Search code examples
wordpressfotorama

How do I change the thumbnail size of a fotorama slider?


I've been using the Fotorama plugin to create a slider on my website. It works as it should, but I want to change the size of the thumbnails that are shown, and I can't figure out how. The website is: http://jeannebard.ch/?p=123.


Solution

  • See the full list of options for fotorama here: http://fotorama.io/customize/options/

    Options can be passed via data attributes:

    <div class="fotorama"
         data-thumbwidth="120"
         data-thumbheight="120">
      <img src="1.jpg">
      <img src="2.jpg">
    </div>
    

    ...or JavaScript:

    $('.fotorama').fotorama({
      thumbwidth: '120',
      thumbheight: '120'
    });
    

    ...or the Shortcode if using the plugin version:

    [gallery ids="1,2,3" nav="thumbs" thumbwidth="120" thumbheight="120"]
    

    This example would set the thumbnails twice their current size, to 120x120.