Я использую 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' }} });" %>
UPDATE
Вот что я получаю за стрелки в консоли
<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>