Move fotorama arrows outside stage

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-31 05:44:29

问题


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">
  <img src="2-lo.jpg">
  <img src="9-lo.jpg">
  <img src="6-lo.jpg">
  <img src="5-lo.jpg">
</div>

SCRIPT

  // 1. Initialize fotorama manually.
    var $fotoramaDiv = jQuery('.fotorama_custom').fotorama();

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

// add our buttons 

    jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--prev'><</div>").insertBefore(".fotorama__nav-");
    jQuery("<div class='fotorama_custom__arr fotorama_custom__arr--next'>></div>").insertAfter(".fotorama__nav-");


// make the buttons functionality
    jQuery('.fotorama_custom__arr--prev').click(function () {
        fotorama.show('<');
    });
    jQuery('.fotorama_custom__arr--next').click(function () {
        fotorama.show('>');
    });


来源:https://stackoverflow.com/questions/22448298/move-fotorama-arrows-outside-stage

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!