Question

我使用fancybox图像

这是查看代码

  <div class="image_wrap">
  <a class="fancybox_43566 thumb_a" href="https://******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390">
    <div class="image">
      <div class="resize-and-crop" style="width: 250px; height: 200px;"><img alt="Exterior" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390" width="250" height="250" class="big_thumb" style="left: 0px; top: -25px;"></div>
    </div>
  </a>
  <div class="other_images">
      <div class="small_image">
        <a class="fancybox_43566" href="https://******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Exterior" src="https://*****.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390" width="60" height="60" class="small_thumb_img" style="left: 0px; top: -10px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://******.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" href="https://********.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Guest Room" src="https://******.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
  </div>
</div>

我需要在点击时打开图片并按照这样做

<%= javascript_tag "$('.fancybox_#{hotel.id}').attr('rel', 'gallery').fancybox({ prevEffect : 'none', nextEffect : 'none',  closeBtn : true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });" %>

一切都还可以，但是我需要制作箭头来浏览图像

我怎么做？

我尝试了什么

我试着让它像那样。但它不起作用。

<%= javascript_tag "$('.fancybox_#{hotel.id}').attr('rel', 'gallery').fancybox({ prevEffect : 'none', keyboard: true,arrows: true,nextEffect : 'none',  closeBtn : true, beforeShow : function() { var alt = this.src; this.title = alt; }, helpers : { title : { type : 'inside' }} });" %>

更新

以下是我在控制台中获得箭头的内容

<div class="fancybox-navigation"><a data-fancybox-prev="" class="fancybox-button fancybox-button--arrow_left disabled" title="Previous" href="javascript:;"><svg viewBox="0 0 40 40"><path d="M18,12 L10,20 L18,28 M10,20 L30,20"></path></svg></a><a data-fancybox-next="" class="fancybox-button fancybox-button--arrow_right disabled" title="Next" href="javascript:;"><svg viewBox="0 0 40 40"><path d="M10,20 L30,20 M22,12 L30,20 L22,28"></path></svg></a></div>

Answer 1

调整你的html：

  <div class="image_wrap">
  <a class="fancybox_43566 thumb_a" data-fancybox="gallery" href="https://******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390">
    <div class="image">
      <div class="resize-and-crop" style="width: 250px; height: 200px;"><img alt="Exterior" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390" width="250" height="250" class="big_thumb" style="left: 0px; top: -25px;"></div>
    </div>
  </a>
  <div class="other_images">
      <div class="small_image">
        <a class="fancybox_43566" data-fancybox="gallery" href="https://******.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Exterior" src="https://*****.s3.amazonaws.com/hotelpictures/003/623/222/LON-91B-1.jpg?1387213390" width="60" height="60" class="small_thumb_img" style="left: 0px; top: -10px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" data-fancybox="gallery" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://******.s3.amazonaws.com/hotelpictures/003/623/225/LON-91B-2.jpg?1387213390" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" data-fancybox="gallery" href="https://********.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/227/LON-91B-3.jpg?1387213390" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" data-fancybox="gallery" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Lobby" src="https://*******.s3.amazonaws.com/hotelpictures/003/623/230/LON-91B-4.jpg?1387213391" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
      <div class="small_image">
        <a class="fancybox_43566" data-fancybox="gallery" href="https://*******.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391">
          <div class="resize-and-crop" style="width: 60px; height: 40px;"><img alt="Guest Room" src="https://******.s3.amazonaws.com/hotelpictures/003/623/232/LON-91B-5.jpg?1387213391" width="60" height="45" class="small_thumb_img" style="left: 0px; top: -3px;"></div>
        </a>
      </div>
  </div>
</div>

箭头和钥匙在fancybox

1 个答案: