fancybox中的箭头和键

Question

I have using fancybox for images

Here is View code

  <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>

I need to make images opens on click and do it like this

<%= 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' }} });" %>

All okay and works well, but I need to make arrows to navigate through images

How I can do it?

What I tried

I tried to make it like there. But it not works.

<%= 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' }} });" %>

UPDATE

Here is what I get for arrows in console

<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

Adjust your 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>