如何手动设置 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

changeImage 听起来像一个函数的名称，但你的代码是：

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

你确定它不应该是：

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

Answer 2

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

代码里面写着：

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

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

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