如何为jquery-lightbox手动设置活动图像？

Question

我正在尝试使用jquery-lightbox在Ruby on Rails中创建照片查看器。您可以在下图中看到它的设计。

单击较小的图像可使所选图像显示在上方的大空间中。如果单击大图像，则可以按原始上传的分辨率查看所有图像的灯箱幻灯片。

到目前为止，我完成了所有这些工作，但我需要灯箱从当前选定的图像开始，而不是始终从第一张图片开始。我试过调用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>

Answer 1

默认情况下，jQuery Lightbox附带prev / next按钮。您可能想要查看该代码，根据其中任何一个创建函数，因为它们很可能会为您提供答案。

代码内部说：

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

我认为这是您正在寻找的代码。

//编辑：犯了与上面相同的错误，除了他已经给出了答案。

Answer 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