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,029
    Đã đượ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

  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,901
    Đã được thích:
    1,199
    Đ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é
     
  3. 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!