Question

我正在使用名为TinySlideshow（creators' page，demo）的javascript幻灯片。有没有办法告诉当前正在显示索引中的哪张照片，以便我可以添加基于上下文的链接（例如，“分享此”按钮，允许某人将当前照片发送到电子邮件）

我使用循环使用Paperclip在Ruby on Rails中使用了一些代码：

<ul id="slideshow">
<%= @images.each do |image| %>
        <li>
            <h3><%= image.theme%></h3>
            <span><%= image.photo.url(:large)%></span>
            <p></p>
            <a href=" <%= upload_image_path(image)%>"><img src="<%= image.photo.url(:thumb)%>" alt="Sea Turtle" /></a>
        </li>
      <%end%>


      </ul>

感谢您提出的任何建议，如果您想了解更多信息，请与我们联系！

Answer 1

你可以做很多事情。首先，您可以简单地添加共享按钮作为<li>的一部分（您真的应该使用partial将其呈现为集合列表）

<ul id="slideshow">
    <%= render @images %>
</ul>

其次，您可以向元素添加数据元素，然后使用javascript生成共享按钮，但我认为之前的解决方案更好，因为它不需要任何js或后处理。

希望这会有所帮助。

Answer 2

您应该为图像类指定一个ID，以便您可以识别要处理的图像。将其附加到每个列表项，如下所示：<li id="slideshow-image-<%= image.id %>">。关于这一点的好处是你在DOM中有ID slideshow-image-1和slideshow-image-2，你现在可以很容易地在JavaScript中迭代。

Answer 3

如果你认识Jquery，我就是这样做的。

获取元素id图像的图像“src”，然后将其存储在DOM中，当用户共享图像时，只需从DOM调用图像src即可。

获取图像的代码“src”

var image = $('#image').attr('src');

然后使用data（）方法存储和检索“src”。

找出当前在javascript幻灯片中显示的照片

3 个答案: