0

我有一个图像查看器，它结合了一个很棒的缩略图/大图像块......

看起来像这样：

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

4

2 回答 2

0

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

于 2013-03-26T01:51:39.143 回答
0

谢谢马赫什

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

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

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 来处理额外传递的数组 - 没有问题......

奇迹般有效。我现在可以用数据填充它，并将旋转木马放置在我需要的任何地方，并将大图像查看器放在我需要的地方......太棒了 - 感谢您的帮助。

于 2013-03-26T04:07:49.820 回答