Как мне вручную установить активное изображение для jquery-lightbox?

#jquery #ruby-on-rails-3 #lightbox

#jquery #ruby-on-rails-3 #Лайтбокс

Вопрос:

Я пытаюсь создать программу просмотра фотографий в Ruby on Rails, используя jquery-lightbox. Вы можете увидеть его дизайн на изображении ниже.

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

Пока все это работает, но мне нужно, чтобы лайтбокс начинался с текущего выбранного изображения, а не всегда начинался с первого изображения. Я попытался вызвать функцию changeImage (возвращает TypeError) и изменить свойство activeImage (ничего не дает).

Как это можно сделать?

Вот код, который я использую, который в настоящее время весь в моем show.html.erb:

 <a href="<%= @actor.avatar.url(:large) %>" onclick="javascript:setActiveImage();" class="lightbox" title="<%= @actor.name %>" rel="actor"><%= image_tag @actor.avatar.url(:slide), :id => "actor_headshot", :alt => @actor.name %></a>

<% @actor.photos.each do |photo| %>
  <a href="<%= photo.photo.url(:large) %>" class="lightbox" rel="actor"></a>
<% end %>

<div id="actor_photos">
  <div id="actor_photo_list">
  <% @photos.each_with_index.map do |photo, index| %>
      <a href="#" onclick="javascript:swapHeadshot('<%= photo.url(:slide) %>', <%= index %>);"><%= image_tag photo.url(:thumb), :class => "actor_photo_list_item" %></a>
    <% end %>
  </div>
</div>

<script language="JavaScript">
  $('.lightbox').lightbox();

  var _am = 0;

  function swapHeadshot(source, index)
  {
    $('#actor_headshot').attr('src', source);
    _am = index;
  }

  function setActiveImage()
  {
    $('.lightbox').lightbox.activeImage = _am; // has no effect
    //$('.lightbox').lightbox({activeImage:_am}); // has no effect
    //$('.lightbox').lightbox.changeImage(_am); // returns TypeError
  }
</script>

Программа просмотра фотографий

1. Опубликуйте JavaScript, который вы используете в данный момент, чтобы попытаться изменить лайтбокс на определенное изображение, и сообщите нам, какая строка выдает вам ‘TypeError’.

Ответ №1:

По умолчанию jQuery Lightbox поставляется с кнопками prev / next. Возможно, вы захотите взглянуть на этот код и создать функцию на основе любого из них, поскольку они, скорее всего, предоставят вам ответ.

Внутри кода написано:

 $('#lightboxImage').attr('src', opts.imageArray[opts.activeImage][0])width(newWidth).height(newHeight);
resizeImageContainer(newWidth, newHeight);

Я думаю, что это тот код, который вы ищете.

// Редактировать: допущена та же ошибка, что и выше, за исключением того, что он уже дал ответ.

Ответ №2:

changeImage звучит как название функции, но ваш код:

 $('.lightbox').lightbox.changeImage =(_am); //tries to change a function variable to a number

Вы уверены, что это не должно быть:

 $('.lightbox').lightbox.changeImage(_am); //calls the function passing a variable