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

【问题标题】：Attach an HREF and a class to an img link generated by the PhotoSlider script?将 HREF 和类附加到 PhotoSlider 脚本生成的 img 链接？
【发布时间】：2010-04-07 06:06:11
【问题描述】：

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

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

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

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

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

提前致谢！

【问题讨论】：

标签： jquery html class slideshow href

【解决方案1】：

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

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

【讨论】：

谢谢格雷格！我在下面添加了另一个我遇到的问题，如果您愿意看看吗？
我不明白为什么当我使用 var src = $(".photoslider_main img").attr("src");然后提醒结果变量“src”，我不断得到“未定义”？我在 photoslider 设置了它的结构之后调用它，所以它肯定应该工作吗？
你是在 document.ready() 中做的吗？如果它只是根据代码流的“之后”（例如，在您调用照片滑块之后），这可能并不意味着它真的在那个时候完成，因为它可能在那个时候等待事件等。（在开始使用 javascript 和 jquery 等库时，这是一个非常常见的错误）。尝试执行 console.log($('.photoslider_main img')) 看看你得到了什么（当然你需要安装 firebug）
我在 $(document).ready(function(){ 块内执行此操作，当我按照您的建议执行 console.log 时，我在 Firebug 的一行中得到 [img]控制台 - 这对你有什么意义吗？我在下面的附加答案中添加了我的完整代码，也许我遗漏了一些东西。再次感谢你的帮助，格雷格。

【解决方案2】：

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

【讨论】：

【解决方案3】：

等待脚本完成其 HTML 代码的生成，然后根据您的喜好对其进行修改。由于 PhotoSlider 只生成 HTML 一次，因此无需每次点击都进行修改。

【讨论】：

【解决方案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>

【讨论】：