-2

我从一个星期开始就一直在处理这段代码，我找不到如何在预览区域中显示与大图像相关联的多张图像。我使用的代码来自 codrops http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

该代码工作正常，但对于每个大图像，我想在大图像旁边显示一些其他图像。

问题是我对 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>

我理解的是 Javascript 使用<img src="images/thumbs/1.jpg" alt="img01"/>来做网格，它使用 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 );    
        }


    },

所以我被困在这里

我想实现这样的目标

    <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>

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

如果有人可以给我一个提示、技巧或技巧以找到实现这一目标的方法，我将非常高兴。

问候

4

2 回答 2

0

这是我所做的

<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>

我补充data-items="images/itemsImg/1.jpg">说，如果我尝试使用这样的多图像data-items="images/itemsImg/1.jpg, images/itemsImg/2.jpg, images/itemsImg/3.jpg">它不起作用（根本不显示图像。但是使用一张图像我可以显示它。

我在 .js 文件中破解的是用于显示大图像的代码

// 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.$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 );    
            }

使用此代码，我可以在数据项属性中显示图像，但如果它们有超过 1 个图像则不能。

任何帮助将不胜感激。

于 2013-05-02T12:48:48.840 回答
0

Preview 对象似乎使用data-largesrc属性的值作为详细信息部分中大图像的来源，但是该大图像只会显示在较大的屏幕上，因为div.og-fullimg在小分辨率屏幕上使用媒体查询将隐藏大图像的容器 ( ) .

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

但是，您还可以实现一个新功能，其中可以由插件代码设置和处理`data-images 属性。

例如<a href="..." data-img-collection="img1.png,img2.png,img3.png">

于 2013-05-01T20:50:32.987 回答