jQuery的画廊/旋转木马奇数

Question

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

看起来像这样：

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

但是，当我尝试将其与旋转木马结合使用时（我在这里找到的最简单的旋转木马-http: //www.flintstudio.biz/stuff/sliders/1.html ）

它停止工作了...

代码看起来像这样

<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
    <a class="button prev" ><img src="images/arrow_left.png"/></a>
    <a class="button next" ><img src="images/arrow_right.png"/></a>
        <ul class="holder">
            <li class="slide first"></li>
            <li class="slide"></li>
            <li class="slide"></li>
            <li class="slide"></li>
            <li class="slide"></li>
        </ul>
    <div class="clear"></div>
</div>  

<script>
$( window ).load(function(){
    var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];     

    $.preloadImages( images, init );

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

$('.holder').delegate('img','click', function(){
    $('#largeImage').attr( 'src',$(this).attr('data-large') );
});
});
</script>

从概念的角度来看，唯一的区别是在窗口加载后填充了列表-我尝试更改

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

至

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

但这没有帮助。

哦-要点-我在carousel.js中更改了一行-因此它不是在做背景图像CSS更改，而是添加图像...

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

$( 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] + '" />' );

我在想什么... ???

简单缩略图查看器的jsfiddle ... http://jsfiddle.net/cBpvZ/

轮播版本的jsfiddle ... http://jsfiddle.net/ZJzLd/

Answer 1

我认为您将事件绑定在错误的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来替换字符串，但是这可行。

Answer 2

马赫什

森林穿过树木……我看不到它，因为我花了很多时间……缺少有关数据大的引用确实是问题所在。

该解决方案（由我定义）具有两个数组-一个用于拇指，一个用于大数组。（我可以选择在图像名称后添加一些后缀或前缀，并保持它们的相关性的路径-但我选择不-因此需要灵活的命名方式...这需要两个数组）

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 );
}

当然，这意味着更改carousel.js以处理其他传递的数组-那里没有问题...

奇迹般有效。 现在，我可以在其中填充数据，然后将轮播放置在我需要的任何位置，并将大图像查看器放置在我需要的位置...太棒了-感谢您的协助。