Finding out which photo is currently showing in a javascript slideshow

Question

I'm using a javascript slideshow called TinySlideshow (creators' page , demo). Is there a way to tell which photo in an index is currently being shown such that I can add a context based link (e.g. a "Share this" button that allows someone to send the current photo to an email)

I have adapted the code a bit to work in Ruby on Rails with Paperclip, using a loop:

<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>

Thanks for any advice you may have, and let me know if you'd like more information!

If the author of this script had used variable names that mean something (other than a,b,c,d) I would be able to tell you in a second. — Diodeus - James MacFarlane, Apr 07 '11 at 18:35

score 0 · Answer 1 · answered Apr 07 '11 at 18:35

You could do a number of things. First, you could simply add the share button as part of the <li> (You really should use a partial to render out this as a list of collections)

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

Second, you could add a data element to the elements, and then generate the share buttons with javascript, but I think the previous solution is better because it doesn't require any js or post-processing.

Hope this helps.

score 0 · Answer 2 · answered Apr 07 '11 at 18:37

You should assign an ID to your image class so that you can identify which image you are dealing with. Attach it to each list item, like so: <li id="slideshow-image-<%= image.id %>">. The nice part about this is you have IDs in the DOM like slideshow-image-1 and slideshow-image-2 which you can now iterate over in JavaScript very easily.

score 0 · Answer 3 · answered Apr 07 '11 at 18:37

if you know Jquery, this is how I would do.

Get the image "src" of the element id image then store it in the DOM, when your users share image, you just call the image src back from the DOM.

the code to get image "src"

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

Then Use data() method to store and retrieve the "src".

Finding out which photo is currently showing in a javascript slideshow

3 Answers3