Javascript 使用展开预览在网格中显示缩略图图像

我从一个星期以来一直在努力处理这段代码，我找不到如何在预览区域中显示与大图像关联的多个图像。我使用的代码来自codrops

代码运行良好，但对于每个大图像，我希望在大图像旁边显示一些其他图像

问题是我对Javascript不太在行，但在这里我理解

在index.html页面中，我们找到了一个图像列表

像这样

<ul id="og-grid" class="og-grid">
                <li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Kuche" data-store="Reitmans" data-avatarsrc="images/userImg/kuche.png" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot."> 
                        <img src="images/thumbs/1.jpg" alt="img01"/>
                    </a>
                </li>
                <li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Megane" data-store="Belle et Rebelle" data-avatarsrc="images/userImg/megane.png" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                        <img src="images/thumbs/2.jpg" alt="img02"/>
                    </a>
                </li>
                <li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/3.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
                        <img src="images/thumbs/3.jpg" alt="img03"/>
                    </a>
                </li>
                <li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/4.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
                        <img src="images/thumbs/4.jpg" alt="img04"/>
                    </a>
                </li>
                <li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
                        <img src="images/thumbs/2.jpg" alt="img02"/>
                    </a>
                </li>

    <ul>
    <li>
                        <a   href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-  title="Kuche" data-store="Reitmans" data-avatarsrc="images/userImg/kuche.png" data-  description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko   coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot."> 
                            <img src="images/thumbs/1.jpg"   alt="img01"/>

   <img src="images/items/1.jpg" alt="img01"/>
   <img src="images/items/2.jpg" alt="img02"/>
   <img src="images/items/3.jpg" alt="img03"/>
                        </a>                    
   </li>
   </ul>

据我所知，Javascript使用

来生成网格，并使用a href属性来生成预览区域

像这样：

    Preview.prototype = {
    create : function() {
        // create Preview structure:
        this.$title = $( '<h4></h4>' );
        this.$store = $( '<h5></h5>' );
        this.$description = $( '<p></p>' );
        this.$href = $( '<a href="#" target="_blank">Visit website</a>' );
        this.$addtext = $( '<span class="og-addtext">Add me in<br>your staff</span>' );
        this.$userimage = $( '<p></p>' ).append( this.$loading );
        this.$add = $( '<span class="og-add"></span>' );
        this.$top = $('<div class="og-detailstop"></div>').append( this.$userimage, this.$title, this.$store, this.$addtext, this.$add );
        this.$details = $( '<div class="og-details"></div>' ).append( this.$top);
        this.$soc = $( '<div class="og-soc"></div>' )
        this.$loading = $( '<div class="og-loading"></div>' );
        this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
        this.$closePreview = $( '<span class="og-close"></span>' );
        this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
        this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
        // append preview element to the item
        this.$item.append( this.getEl() );
        // set the transitions for the preview and the item
        if( support ) {
            this.setTransition();
        }
    },
    update : function( $item ) {

        if( $item ) {
            this.$item = $item;
        }

        // if already expanded remove class "og-expanded" from current item and add it to new item
        if( current !== -1 ) {
            var $currentItem = $items.eq( current );
            $currentItem.removeClass( 'og-expanded' );
            this.$item.addClass( 'og-expanded' );
            // position the preview correctly
            this.positionPreview();
        }

        // update current value
        current = this.$item.index();

        // update preview´s content
        var $itemEl = this.$item.children( 'a' ),
            eldata = {
                href : $itemEl.attr( 'href' ),
                largesrc : $itemEl.data( 'largesrc' ),
                title : $itemEl.data( 'title' ),
                store : $itemEl.data( 'store' ),
                avatarsrc : $itemEl.data( 'avatarsrc' ),
                addtext : $itemEl.data( 'addtext' ),
                add : $itemEl.data( 'add' ),
                description : $itemEl.data( 'description' )
            };

        this.$title.html( eldata.title );
        this.$store.html( eldata.store );
        this.$description.html( eldata.description );
        this.$href.attr( 'href', eldata.href );

        var self = this;

        // remove the current image in the preview
        if( typeof self.$largeImg != 'undefined' ) {
            self.$largeImg.remove();
        }

        // preload large image and add it to the preview
        // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
        if( self.$fullimage.is( ':visible' ) ) {
            this.$loading.show();
            $( '<img/>' ).load( function() {
                var $img = $( this );
                if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
                    self.$loading.hide();
                    self.$fullimage.find( 'img' ).remove();
                    self.$largeImg = $img.fadeIn( 350 );
                    self.$fullimage.append( self.$largeImg );
                }
            } ).attr( 'src', eldata.largesrc ); 
        }

        if( typeof self.$userImg != 'undefined' ) {
            self.$userImg.remove();
        }

        // preload user image and add it to the preview
        // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
        if( self.$userimage.is( ':visible' ) ) {
            this.$loading.show();
            $( '<img/>' ).load( function() {
                var $imgUser = $( this );
                if( $imgUser.attr( 'src' ) === self.$item.children('a').data( 'avatarsrc' ) ) {
                    self.$loading.hide();
                    self.$userimage.find( 'user' ).remove();
                    self.$userImg = $imgUser.fadeIn( 350 );
                    self.$userimage.append( self.$userImg );
                }
            } ).attr( 'src', eldata.avatarsrc );    
        }


    },

Preview.prototype={
创建：函数（）{
//创建预览结构：
此.$title=$（''）；
此.$store=$（''）；
这个.$description=$（“
”）；
此。$href=$（''）；
这个。$addtext=$（'addme-in
your-staff'）；
this.$userimage=$（'
'）。追加（this.$loading）；
本.$add=$（''）；
this.$top=$（''）.append（this.$userimage，this.$title，this.$store，this.$addtext，this.$add）；
this.$details=$（''）.append（this.$top）；
此.$soc=$（''）
这是。$loading=$（''）；
this.$fullimage=$（''）.append（this.$loading）；
此.$closePreview=$（''）；
this.$previewInner=$（''）.append（this.$closePreview，this.$fullimage，this.$details）；
this.$previewWel=$（''）.append（this.$previewWinner）；
//将预览元素附加到项目
this.$item.append（this.getEl（））；
//设置预览和项目的过渡
如果（支持）{
这个.setTransition（）；
}
},
更新：功能（$item）{
若有（$项目）{
此.$item=$item；
}
//如果已展开，则从当前项中删除类“og expanded”，并将其添加到新项中
如果（当前！=-1）{
var$currentItem=$items.eq（当前）；
$currentItem.removeClass（'og expanded'）；
这个.item.addClass（'og expanded'）；
//正确定位预览
这个.positionPreview（）；
}
//更新当前值
当前=此。$item.index（）；
//更新预览的内容
var$itemEl=this.$item.children（'a'），
埃尔达={
href:$itemEl.attr（'href'），
largesrc:$itemEl.data（'largesrc'），
标题：$itemEl.data（'title'），
store:$itemEl.data（'store'），
avatarsrc:$itemEl.data（'avatarsrc'），
addtext:$itemEl.data（'addtext'），
添加：$itemEl.data（'add'），
description:$itemEl.data（'description'）
};
这是.$title.html（eldata.title）；
这个.$store.html（eldata.store）；
这是.$description.html（eldata.description）；
这是。$href.attr（'href'，eldata.href）；
var self=这个；
//删除预览中的当前图像
if（自我类型$largeImg！=“未定义”）{
self.$largeImg.remove（）；
}
//预加载大图像并将其添加到预览中
//对于较小的屏幕，我们不显示大图像（媒体查询将隐藏完整图像包装）
if（self.$fullimage.is（':visible'））{
这是。$loading.show（）；
$（''）.load（函数（）{
var$imgUser=$（本）；
if（$imgUser.attr（'src'）==self.$item.children（'a'）.data（'avatarsrc'））{
self.$loading.hide（）；
self.$userimage.find（'user'）.remove（）；
self.$userImg=$imgUser.fadeIn（350）；
self.$userimage.append（self.$userImg）；
}
}）.attr（'src'，eldata.avatasrc）；
}
},

这就是我被困的地方

我想做这样的事

    <ul>
    <li>
                        <a   href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-  title="Kuche" data-store="Reitmans" data-avatarsrc="images/userImg/kuche.png" data-  description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko   coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot."> 
                            <img src="images/thumbs/1.jpg"   alt="img01"/>

   <img src="images/items/1.jpg" alt="img01"/>
   <img src="images/items/2.jpg" alt="img02"/>
   <img src="images/items/3.jpg" alt="img03"/>
                        </a>                    
   </li>
   </ul>

添加一些与大图像关联并显示在数组中大图像旁边的图像。但是，如果我只是像这样添加图像，它会在网格中显示图像（我不希望这样），我无法确定如何添加这些关联图像并仅在预览区域中显示它们

如果有人能给我一个提示，诡计或黑客找到一个方法来实现这一点，我会非常棒

---

视为

预览对象似乎使用了

data largesrc

属性的值作为详细信息部分中大图像的源，但是该大图像只会显示在更大的屏幕上，因为大图像的容器（

div.og-fullimg

）将使用小分辨率屏幕上的媒体查询隐藏

通过了解这一点，不需要修改插件代码的解决方案是创建一个新图像，其中包含所有要显示的小图像，并将该图像的路径作为

data largesrc

属性的值传递

但是，您也可以实现一个新特性，其中可以通过插件代码设置和处理`数据图像'属性

例如，

这里是我所做的

<li>
                    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Kuche" data-store="Reitmans" data-avatarsrc="images/userImg/kuche.png" data-description="Social icons here" data-items="images/itemsImg/1.jpg"> 
                        <img src="images/thumbs/1.jpg" alt="img01"/>
                    </a>
                </li>

我复制并粘贴代码，但要显示数据项，请参见下面的图片

if( typeof self.$itemImg != 'undefined' ) {
                self.$itemImg.remove();
            }

            // preload items image and add it to the preview
            // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper)
            if( self.$itemsimage.is( ':visible' ) ) {
                this.$loading.show();
                $( '<img/>' ).load( function() {
                    var $imgItem = $( this );
                    if( $imgItem.attr( 'src' ) === self.$item.children('a').data( 'items' ) ) {
                        self.$loading.hide();
                        self.$itemsimage.find( 'itemsImg' ).remove();
                        self.$itemImg = $imgItem.fadeIn( 350 );
                        self.$itemsimage.append( self.$itemImg );
                    }
                } ).attr( 'src', eldata.items );    
            }

if（type of self.$itemImg！=“未定义”）{
self.$itemImg.remove（）；
}
//预加载项目图像并将其添加到预览
//对于较小的屏幕w