0

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

此脚本取代了以前的手动编码 Javascript 解决方案，该解决方案允许单击大图像，从而导致灯箱模式弹出窗口显示所单击图片的全尺寸版本。

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

这意味着我需要稍微修改脚本以附加一个类（“灯箱”）和一个 href（或只是一个单击事件，以更有意义的方式为准），但我不太确定如何最好地完成此操作。我认为每次单击缩略图时都必须附加事件和课程，但如果这不是最好的方法，我们将不胜感激。

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

提前致谢！

4

4 回答 4

2

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

$(document).ready(function() { 
  $('.photoslider_main img').live('click', function() {
    $(this).showLightbox();
  });
});
于 2010-04-06T14:23:44.353 回答
1

单击缩略图并显示新图像后，您可以click使用 jQuery 的bind. 如果您以后发现需要删除它，可以使用unbind.

于 2010-04-06T14:04:00.020 回答
1

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

于 2010-04-06T14:05:56.943 回答
0

这是导致变量“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>
于 2010-04-06T22:06:11.270 回答