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:
    950
    Đã đượ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

  2. 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,620
    Đã được thích:
    1,132
    Đ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é
     


Like và Share ủng hộ ITSEOVN