Question

我正在使用来自http://opiefoto.com/articles/photoslider的非常好的PhotoSlider脚本为我的一个客户创建一个图像幻灯片。

此脚本取代了之前手动编码的Javascript解决方案，该解决方案允许单击大图像，从而生成灯箱模式弹出窗口，显示所单击图片的完整版本。

当然，客户端坚持认为此功能保持不变，但大图像的HTML代码是由PhotoSlider脚本本身即时生成的。

这意味着我需要稍微修改脚本以附加一个类（“lightbox”）和一个href（或者只是一个点击事件，无论哪个更有意义），但我不太清楚如何最好地完成这个。我认为每次点击缩略图时都必须附上活动和课程，但如果这不是最好的方法，那么任何建议都将受到赞赏。

脚本在我的页面中实现，可以看到here，没有点击或类。我非常感谢stackoverflowites提供的任何帮助。

提前致谢！

Answer 1

查看jquery live()方法，该方法允许您将事件附加到现在或将来存在的选择器。实际上，您可以执行类似的操作（基于photoslider网站上的示例）：

$(document).ready(function() { 
  $('.photoslider_main img').live('click', function() {
    $(this).showLightbox();
  });
});

Answer 2

单击缩略图并显示新图像后，您可以使用jQuery的click将bind事件附加到新图像。如果您发现以后需要将其删除，可以使用unbind。

Answer 3

等待脚本完成生成HTML代码，然后根据自己的喜好进行修改。不需要对每次点击进行修改，因为PhotoSlider会生成一次HTML。

Answer 4

这是导致变量'src'未定义的完整代码 - 不确定原因。

<div class="photoslider" id="default"></div>

<script type="text/javascript">
$(document).ready(function(){
    //change the 'baseURL' to reflect the host and or path to your images
    FOTO.Slider.baseURL = '';

    //set images by filling our bucket directly
    FOTO.Slider.bucket = {
        'default': {
            <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>,
            1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>,
            2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>,
            3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>,
            4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %>
        }
    };
    FOTO.Slider.reload('default');  
    FOTO.Slider.preloadImages('default');  
    FOTO.Slider.enableSlideshow('default');  

    //or set our images by the bucket importer
    //var ids = new Array(0,1,2,3);
    //FOTO.Slider.importBucketFromIds('default',ids);


    console.log($('.photoslider_main img'));
    var src = $(".photoslider_main img").attr("src");
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox'));

    $('a.lightbox').lightBox();

 // $('.photoslider_main img').live('click', function() {
 //   $(this).showLightbox();
 // });
});



</script>

将HREF和类附加到PhotoSlider脚本生成的img链接？

4 个答案: