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

    seolagi

    Moderator

     Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    957
    Đã được thích:
    77
    Điểm thành tích:
    28
    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

    Lượt xem: 481 - Xem Bài Viết Cùng Chủ Đề

    seolagi, 22/10/22
    #1
  3. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,618
    Đã được thích:
    1,130
    Đ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

    contraixinh Thành Viên Mới

    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


Like và Share ủng hộ ITSEOVN