fotorama

问题 I'm using Fotorama 4.5.0 (Rails gem) and I have a problem with getting the API object. On page load Fotorama is in hidden div. It opens in modal on click. Here is the code (coffee): $objects = $('*[rel="fotorama"]') $fotorama_div = $('.fotorama') $fotorama_div .on('fotorama:showend', (e, fotorama, extra) -> // resizing fotorama ).fotorama() fotorama = $fotorama_div.data('fotorama') console.log(fotorama) // here is undefined $objects.on 'click', -> // finding index of an image modal.open(

问题 I'm using Fotorama 4.5.0 (Rails gem) and I have a problem with getting the API object. On page load Fotorama is in hidden div. It opens in modal on click. Here is the code (coffee): $objects = $('*[rel="fotorama"]') $fotorama_div = $('.fotorama') $fotorama_div .on('fotorama:showend', (e, fotorama, extra) -> // resizing fotorama ).fotorama() fotorama = $fotorama_div.data('fotorama') console.log(fotorama) // here is undefined $objects.on 'click', -> // finding index of an image modal.open(

问题 I'm wondering if it's possible to set different fotorama duration for each slide. Something like this <div class="fotorama"> <div data-duration="3000">Content here</div> <div data-duration="10000">Content here</div> </div> 回答1: I handled it this way, by listening to the fotorama.showend event: In your base JS script, include this... I haven't tested it on a page with multiple fotoramas, so it may affect all on a page, and you would have to modify the variables to target a specific fotorama. $

问题 Is it possible to move the fotorama arrows out of div.fotorama_ stage and into div.fotorama _nav-wrap? I am looking to position my arrows on either side of the nav dots. Thanks! 回答1: Here is my friend http://jsfiddle.net/meickol/72jTR/ HTML <!-- Just don’t want to repeat this prefix in every img[src] --> <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/"> <!-- Fotorama --> <div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%"> <img src="1-lo.jpg">

问题 Is it possible to move the fotorama arrows out of div.fotorama_ stage and into div.fotorama _nav-wrap? I am looking to position my arrows on either side of the nav dots. Thanks! 回答1: Here is my friend http://jsfiddle.net/meickol/72jTR/ HTML <!-- Just don’t want to repeat this prefix in every img[src] --> <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/"> <!-- Fotorama --> <div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%"> <img src="1-lo.jpg">

问题 In the Fotorama plugin, if there are few images then the thumbnails start from the center. I want the thumbnails to start from the left. How can I do this? 回答1: It is simple. The fotorama plugin uses css3 transform property to align thumbnails under the main image. just calculate the parent width and children container width using jQuery and if the parent is wider than children container, make a transform across X axis to shift all thumbnails to the left. $(document).ready(function() { var pw

问题 In the Fotorama plugin, if there are few images then the thumbnails start from the center. I want the thumbnails to start from the left. How can I do this? 回答1: It is simple. The fotorama plugin uses css3 transform property to align thumbnails under the main image. just calculate the parent width and children container width using jQuery and if the parent is wider than children container, make a transform across X axis to shift all thumbnails to the left. $(document).ready(function() { var pw

问题 I have shadowbox operating for all my pictures underneath the fotorama gallery, and it is working great. However, when I click on a button on the fotorama gallery it immediately brings up a shadowbox of an image. It isn't working together properly, and I can't figure out why. Here is the website: http://ultimatefinishdetailing.com/TiburonPictures.html Here is the code on the website: HTML Page Head: <link rel="stylesheet" type="text/css" href="files/shadowbox/shadowbox.css"> <script type=

问题 I tried to search but i can help with this ... My html code is: //<![CDATA[ window.onload=function(){ $("[data-instagram]").each(function(el) { $.getJSON({ method: 'GET', url: $(this).data("instagram"), dataType: 'jsonp', success: function(response) { $('.fotorama').append('<img src="' + response.thumbnail_url + '">'); $('.fotorama').fotorama(); } }); }) }//]]> <!-- 1. Link to jQuery (1.8 or later), --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

问题 I got a little problem using Fotorama Library included in Magento 2 Blank default theme, first I will tell you some settings that I added to make my gallery. my thumbnails are set to be shown in the vertical position in magento 2 using the setting " navdir " that can be found in app/design/frontent/<-vendor->/<-theme->/etc/view.xml The problem is that I wanted to add margins around theses thumbnail so using fotorama official documentation that can be found here : http://fotorama.io/customize