Xin Javascript setting cài đặt của cube portfolio để tùy biến trường default value

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 22/10/22.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Điểm thành tích:
    48
    Xin Javascript setting cài đặt của cube portfolio để tùy biến trường default value.
    Hiện tại em có code Portfolio Filters cube html như sau:
    Hiện tại em muốn cài đặt mặc định lọc là cái .food mà nó không hiểu nó cứ hiển thị cái * all tất cả các hình ảnh ra.
    Cho em xin cái code cài đặt của thằng cube portfolio với, em cảm ơn.
    Em lên trang đọc của nó mà không hiểu gì cả, cảm ơn ạ
    HTML:
     <!--Portfolio Filters-->
                <div class="cbp-l-filters-button" id="js-filters-mosaic-flat">
                    <div class="cbp-filter-item-active cbp-filter-item" data-filter=".food">Food & Beverace</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".kien">Kiến Trúc</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".fash">Fashion</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".chan">Chân Dung</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".doan">Doanh nghiệp</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".even">Event</div>
                    <span class="text-blue"> / </span>
                    <div class="cbp-filter-item" data-filter=".fass">Fashion Show</div>
                </div>

                <!--Portfolio Items-->
                <div class="cbp cbp-l-grid-mosaic-flat" id="js-grid-mosaic-flat">
                    <div class="cbp-item food">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-8.jpg" >
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-1" src="/wp-content/themes/flatsome-child/agency/img/work-8.jpg"  width="300" height="300">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item food">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-8.jpg" >
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-1" src="/wp-content/themes/flatsome-child/agency/img/work-8.jpg"  width="300" height="300">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item fash">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-2.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-2" src="/wp-content/themes/flatsome-child/agency/img/work-2.jpg" width="300" height="300">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item fash">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-3.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-4" src="/wp-content/themes/flatsome-child/agency/img/work-3.jpg" width="300" height="300">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item even">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-4.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-3" src="/wp-content/themes/flatsome-child/agency/img/work-4.jpg"  width="600" height="600">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item even">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-5.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-5" src="/wp-content/themes/flatsome-child/agency/img/work-5.jpg" width="600" height="600">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item even">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-6.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-6" src="/wp-content/themes/flatsome-child/agency/img/work-6.jpg" width="600" height="300">
                            </div>
             
                        </a>
                    </div>
                    <div class="cbp-item even">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-7.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-7" src="/wp-content/themes/flatsome-child/agency/img/work-7.jpg" width="300" height="300">
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item even">
                        <a class="cbp-caption cbp-lightbox" href="/wp-content/themes/flatsome-child/agency/img/work-8.jpg">
                            <div class="cbp-caption-defaultWrap">
                                <img alt="port-8" src="/wp-content/themes/flatsome-child/agency/img/work-8.jpg" width="300" height="300">
                            </div>
                        </a>
                    </div>

                </div>
     
    Cảm ơn đã xem bài:

    Xin Javascript setting cài đặt của cube portfolio để tùy biến trường default value

    seolagi, 22/10/22
    #1
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Thêm mã javascript cài đặt sau vào nhé:
    HTML:
     $('#js-grid-mosaic-flat').cubeportfolio({
        filters: '#js-filters-mosaic-flat',
        layoutMode: 'mosaic',
        sortByDimension: true,
        mediaQueries: [{
            width: 1500,
            cols: 6,
        }, {
            width: 1100,
            cols: 4,
        }, {
            width: 800,
            cols: 3,
        }, {
            width: 480,
            cols: 1,
            options: {
                gapHorizontal: 15,
                gapVertical: 15,
            }
        }],
        defaultFilter: '.food',
        animationType: 'fadeOutTop',
        gapHorizontal: 0,
        gapVertical: 0,
        gridAdjustment: 'responsive',
        caption: 'zoom',

        // lightbox
        lightboxDelegate: '.cbp-lightbox',
        lightboxGallery: true,
        lightboxTitleSrc: 'data-title',

        plugins: {
            loadMore: {
                element: '#js-loadMore-mosaic-flat',
                action: 'click',
                loadItems: 3,
            }
        },
    });
    • Với defaultFilter: '.food' như em cần rồi nhé
     
    admin, 22/10/22
    #2
  4. contraixinh
    Tham gia ngày:
    26/2/23
    Bài viết:
    10
    Đã được thích:
    0
    Điểm thành tích:
    1
    bài viết hay, ý nghĩa thiết thực, ứng dụng thực tế, thanks thớt nhé! Cám ơn bạn!
     
    contraixinh, 26/2/23
    #3


Chủ để tương tự : Javascript setting
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Add value to tag <a> <i> < u> như thế nào trong js, javascript html 28/6/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Lỗi: Uncaught TypeError: $ is not a function trong javascript jQuery HTML 12/4/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Button Copy text to Clipboard trong HTML với JavaScript JS 31/8/18