jQuery的画廊/转盘古怪

我有一个图像浏览器，结合了缩略图/大的图像块的伟大工程......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>

然而，当我尝试结合这与一个旋转台（最简单的一个，我发现在这里 - 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/

来源

2013-03-26 jpmyob

我认为你具有约束力错DOM对象的事件，所以不是IMG应该是李。您可以使用萤火虫检查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-26 01:51:39

thx ..我改变了旋转木马/ js插入图像不使用CSS背景...所以我会尝试你的建议，但看看我上面添加的代码.. – jpmyob 2013-03-26 01:58:40

@jpmyob：这将是很大的帮助，如果你可以在小提琴上分享代码。 – 2013-03-26 02:05:05

做虽然林不知道如何添加carousel.js，所以我只是通过它的JS框，在onload一起... – jpmyob 2013-03-26 02:18:37

THX马赫什

林通树木......我看不到它，因为我已经与它摆弄这么多...缺少的参照数据大确实是问题。

该解决方案（由我定义）有两个阵列 - 一个用于拇指，另一个用于大型..（我可以采用为图像名称添加一些后缀或前缀并保持它们相关的路径 - 但我选择不 - 而为此希望能够灵活地名称的东西什么......而这需要两个阵列）

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-26 04:07:49 jpmyob

jQuery的画廊/转盘古怪

回答

相关问题