Выяснение, какая фотография в настоящее время показывает в слайд-шоу JavaScript

Question

Я использую слайд-шоу Javascript под названием TinySlideshow ( страница создателей , демо ).Есть ли способ определить, какая фотография в индексе отображается в данный момент, так что я могу добавить контекстную ссылку (например, кнопку «Поделиться», которая позволяет кому-то отправить текущую фотографию на электронную почту)

Я немного адаптировал код для работы в Ruby on Rails с Paperclip, используя цикл:

<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 id="slideshow-image-<%= image.id %>">. Приятно то, что у вас есть идентификаторы в DOM, такие как slideshow-image-1 и slideshow-image-2, которые теперь вы можете легко перебирать в JavaScript.

Answer 2

если вы знаете Jquery, я бы так и сделал.

Получите изображение "src" из идентификатора элемента image, затем сохраните его в DOM, когда ваши пользователи обмениваются ими, вы просто вызываете изображение src из DOM.

код для получения изображения "src"

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

Затем используйте метод data () для сохранения и получения «src».

Answer 3

Вы могли бы сделать несколько вещей.Во-первых, вы можете просто добавить кнопку «Поделиться» как часть <li> (вы действительно должны использовать частичный , чтобы отобразить это как список коллекций)

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

Во-вторых,Вы можете добавить элемент данных к элементам, а затем сгенерировать кнопки общего доступа с помощью javascript, но я думаю, что предыдущее решение лучше, поскольку оно не требует js или постобработки.

Надеюсь, это поможет.