我现在用一周的时间来解决这个代码的困难，我找不到如何在预览区域中显示与大图像相关联的多个图像。我使用的代码是来自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>
添加与大图像关联的一些图像，并在数组中的大图像旁边显示。但是，如果我只是添加这样的图像，它会在网格中显示图像（我不想这样），我无法想象如何添加这些相关图像并仅在预览区域中显示它们。
如果有人能给我一个小费，诡计或黑客来找到实现这一目标的方法，我将会非常棒。
此致
答案 0 :(得分：0)
Preview对象似乎使用data-largesrc属性的值作为详细信息部分中大图像的源，但是大图像只会显示在较大的屏幕上，因为大图像的容器（{{1将在小分辨率屏幕上使用媒体查询隐藏。
通过了解，不需要您修改插件代码的解决方案是创建一个包含您要显示的所有小图像的新图像，并将该图像的路径作为{的值传递{1}}属性。
但是，您还可以实现一个新功能，其中可以通过插件代码设置和处理`data-images属性。
E.g。 div.og-fullimg
答案 1 :(得分：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文件中修改的是用于显示largeimage的代码
// 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张图像则不能。
任何帮助都将受到赞赏。