Display thumbnail images in a grid with expanding preview
<p>i'm struggle with this code from a week now and i cannot find how to display multi images associated with the large image in the preview area. The code i use is the one from codrops <a href="http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/" rel="nofollow">http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/</a> </p>

<p>The code works fine but with each large images i want to display beside the large image some other images.</p>

<p>The problem is i'm not so good with Javascript but here wnat i understand</p>

<p>In the index.html page we found a list of image</p>

<p>like this</p>

<pre><code>&lt;ul id="og-grid" class="og-grid"&gt;
                &lt;li&gt;
                    &lt;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."&gt; 
                        &lt;img src="images/thumbs/1.jpg" alt="img01"/&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;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."&gt;
                        &lt;img src="images/thumbs/2.jpg" alt="img02"/&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;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."&gt;
                        &lt;img src="images/thumbs/3.jpg" alt="img03"/&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;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."&gt;
                        &lt;img src="images/thumbs/4.jpg" alt="img04"/&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;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."&gt;
                        &lt;img src="images/thumbs/2.jpg" alt="img02"/&gt;
                    &lt;/a&gt;
                &lt;/li&gt;
</code></pre>

<p></p>

<p>What i understand is the Javascript use the <code>&lt;img src="images/thumbs/1.jpg" alt="img01"/&gt;</code> to do the grid and it use the a href attributs to generate the preview area.</p>

<p>like this :</p>

<pre><code>    Preview.prototype = {
    create : function() {
        // create Preview structure:
        this.$title = $( '&lt;h4&gt;&lt;/h4&gt;' );
        this.$store = $( '&lt;h5&gt;&lt;/h5&gt;' );
        this.$description = $( '&lt;p&gt;&lt;/p&gt;' );
        this.$href = $( '&lt;a href="#" target="_blank"&gt;Visit website&lt;/a&gt;' );
        this.$addtext = $( '&lt;span class="og-addtext"&gt;Add me in&lt;br&gt;your staff&lt;/span&gt;' );
        this.$userimage = $( '&lt;p&gt;&lt;/p&gt;' ).append( this.$loading );
        this.$add = $( '&lt;span class="og-add"&gt;&lt;/span&gt;' );
        this.$top = $('&lt;div class="og-detailstop"&gt;&lt;/div&gt;').append( this.$userimage, this.$title, this.$store, this.$addtext, this.$add );
        this.$details = $( '&lt;div class="og-details"&gt;&lt;/div&gt;' ).append( this.$top);
        this.$soc = $( '&lt;div class="og-soc"&gt;&lt;/div&gt;' )
        this.$loading = $( '&lt;div class="og-loading"&gt;&lt;/div&gt;' );
        this.$fullimage = $( '&lt;div class="og-fullimg"&gt;&lt;/div&gt;' ).append( this.$loading );
        this.$closePreview = $( '&lt;span class="og-close"&gt;&lt;/span&gt;' );
        this.$previewInner = $( '&lt;div class="og-expander-inner"&gt;&lt;/div&gt;' ).append( this.$closePreview, this.$fullimage, this.$details );
        this.$previewEl = $( '&lt;div class="og-expander"&gt;&lt;/div&gt;' ).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();
            $( '&lt;img/&gt;' ).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();
            $( '&lt;img/&gt;' ).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 );    
        }


    },
</code></pre>

<p>So here where i'm stuck</p>

<p>I want to acheive something like this</p>

<pre><code>    &lt;ul&gt;
    &lt;li&gt;
                        &lt;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."&gt; 
                            &lt;img src="images/thumbs/1.jpg"   alt="img01"/&gt;

   &lt;img src="images/items/1.jpg" alt="img01"/&gt;
   &lt;img src="images/items/2.jpg" alt="img02"/&gt;
   &lt;img src="images/items/3.jpg" alt="img03"/&gt;
                        &lt;/a&gt;                    
   &lt;/li&gt;
   &lt;/ul&gt;
</code></pre>

<p>Adding some images associated with the large image and displayed beside the large image in a array. But if i just add the images like this it display the images in the grid (i don't want that) and i cannot figure how to add those associated images and display them only in the preview area.</p>

<p>If anyone can give me a tip, trick or hack to find a way to achieve that i will be really greatfull.</p>

<p>Regards</p>
