cancel
Showing results for 
Search instead for 
Did you mean: 

Fotorama Navigation

Fotorama Navigation

Is there a way to limit the number of thumbnails on the fotorama navigation? I want to either limit the number of thumbnails to lets say 5 and then if there are more photos, they can be accessed through the navigation arrows. Or another way could be to limit the height (I'm using a vertical navigation) of the navigation. I've tried several methods to limit the height, however, I was not able to find a solution to limit the height of the navigation without changing the height of the gallery.

 

Any solutions would be greatly appreciated!

 

Thank you!

3 REPLIES 3

Re: Fotorama Navigation

Hello @msecomm 

 

You can use the nav option to specify the number of thumbnails you want to display. For example, to display 5 thumbnails, you would use the following code:

 
$('.fotorama').fotorama({
  nav: 'thumbs',
  navCount: 5
});

You can also use the navWidth option to specify the width of the navigation bar. For example, to set the width of the navigation bar to 200px, you would use the following code:

 
$('.fotorama').fotorama({
  nav: 'thumbs',
  navWidth: 200
});

If you want to limit the height of the navigation bar, you can use the navHeight option. For example, to set the height of the navigation bar to 100px, you would use the following code:

 
$('.fotorama').fotorama({
  nav: 'thumbs',
  navHeight: 100
});

Note that if you use the navWidth or navHeight options, the height or width of the navigation bar will be fixed, and the thumbnails will be resized to fit. If you want to keep the thumbnails at their original size, you can use the navFit option to set the navFit option to contain. For example, to keep the thumbnails at their original size and fit them within a 200px wide navigation bar, you would use the following code:

 
$('.fotorama').fotorama({
  nav: 'thumbs',
  navWidth: 200,
  navFit: 'contain'
});
 
Was my answer helpful? You can accept it as a solution.
175+ Professional Extensions for M1 & M2
Need a developer?Just visit Contact Us Now

Re: Fotorama Navigation

Hello theMageComp,

 

Thank you for your reply. At the moment, I'm controlling the settings of fotorama through the following files:

 

view.xml

lib/web/fotorama/fotorama.js (copied into my custom theme)

gallery.phtml

 

Where can I apply your suggestions?

 

Thank you

Re: Fotorama Navigation

How can I restrict the number of thumbnails in the fotorama navigation? I'd like to limit it to 5 thumbnails and provide navigation arrows for accessing additional photos. Alternatively, I'm considering limiting the height of the vertical navigation without affecting the gallery's height. I've tried various methods, but haven't found a solution yet. Any help would be appreciated. Thank you!