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(){

但这没有帮助..

OH - 一个重点 - 我改变了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

Mahesh

通过树林的森林......我看不到它，因为我已经摆弄了这么多......缺少对数据大的引用确实是问题。

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

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以处理额外传递的数组 - 没有概率......

就像一个魅力。我现在可以用数据填充它，并将旋转木马放在我需要的任何地方，以及我需要它的大型图像查看器... bravo - 感谢您的帮助。

jquery gallery / carousel oddity

2 个答案: