Javascript jquery画廊/旋转木马奇趣

我有一个图像查看器，它结合了缩略图/大图像块，效果非常好

看起来像这样：

<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
    <ul class="holder">
    <li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li>
    <li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li>
    <li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li>
    <li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li>
    <li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li>
</ul>
<div class="clear"></div>
</div>
<script>
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
</script>

到

但那没用

哦-一个重要的点-我在carousel.js中更改了一行-所以它不是做背景图像css更改，而是添加了一个图像

所以我改变了这个（第37行）

到

$（e）.find（'.holder>li'）.eq（i）.html（''）；

我错过了什么

简单缩略图查看器的JSFIDLE

---

旋转木马版本的JSFIDLE

我认为您将事件绑定到了错误的DOM对象上，因此应该是LI而不是IMG。您可以使用firebug检查HTML，并可以看到UL.holder中没有IMG标记。请尝试以下代码

$('.holder').delegate('li','click', function(){
    var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
    $('#largeImage').attr( 'src',imgSrc);
});

理想情况下，我应该使用RegExp来替换字符串，但是这是可行的。

thx Mahesh

穿过树林的森林。。。我看不见它，因为我经常摆弄它。。。缺少对大型数据的引用确实是问题所在

解决方案是（由我定义）有两个数组-一个用于拇指，一个用于大..（我可以采取在图像名称中添加一些后缀或前缀的方式，并保持它们之间的相关性-但我选择不这样做-因此需要灵活地命名任何东西…这需要两个数组）

var images=['gallers/kids/01.jpg'、'gallers/kids/02.jpg'、'gallers/kids/03.jpg'、'gallers/kids/04.jpg'、'gallers/kids/05.jpg'；
var large=['gallers/kids/06.jpg'，'gallers/kids/07.jpg'，'gallers/kids/08.jpg'，'gallers/kids/09.jpg'，'gallers/kids/10.jpg']；
$（“#图库滚动条”）。附加（“”）；
$.preload图像（图像，初始化）；
函数init（）{
$（“#库加载器”）.remove（）；
$（“#图库滚动条”）.imgSlider（图像，大型）；
}

当然，这意味着改变carousel.js来处理额外传递的数组-没有问题

---

工作起来很有魅力。我现在可以用数据填充它，并将旋转木马放在我需要的任何地方，将大型图像查看器放在我需要的地方。。。太好了-谢谢你的帮助。

thx。。我更改了carousel/js以插入不使用css背景的图像。。。因此，我会尝试你的建议，但看看我上面添加的代码。@jpmyob：如果你能在fiddle.done上共享代码，那将非常有帮助。虽然我不知道如何添加carousel.js，所以我只是将它和onload一起传递到js框中…@jpmyob：检查这个。我有一个问题，什么是数据大？它只是我传递的一个值，所以我可以引用任何图像-原始图像的工作方式。。。（）假设缩略图将使用“_-thum”b，而大图像将使用“_-large”。。。它做了一个替换（就像你的第一个例子）。。。但我不想命名/重命名图像。。。因此，我将“额外”数据作为一个属性传递，我可以引用它-这样，大图像可以被命名为与拇指完全不同的东西。。。个人喜好真的吗

.delegate('img','click', function(){

.on( 'click', 'img', finction(){ 

$( e ).find( '.holder > li' ).eq( i ).css( 'background', 'url('+images[i]+') no-repeat' );

$( e ).find( '.holder > li' ).eq( i ).html( '<img class="thumb" src="' + images[i] + '" />' );

$('.holder').delegate('li','click', function(){
    var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
    $('#largeImage').attr( 'src',imgSrc);
});

var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg'];

$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>');

$.preloadImages( images, init );

function init() {
$( '#gallery-loader' ).remove();
$( '#gallery-scroller' ).imgSlider( images, large );
}