How To Manually Change The Position And Look Of The Fotorama Navigation Thumbs?


Some people like to get very specific when changing some details on their website. It is remarkable how much human beings vary in our eye for detail. Some beginner website owners will just install a theme, a couple of decent extensions or plug-ins such as the Fotorama jQuery plug-in and do no more. Once the basic structure of a website is there, they are happy to let their content shine through. Others like to fine tune every detail possible on their website. Some might say this borders on being obsessive to the point of wasting too much time doing pointless things that won't have much of an effect on website usability, but hey, we're all different. If you are part of the latter category and you have the Fotorama jQuery gallery installed on your website, read on.

In this post we will guide you through changing a specific detail of the plug-in, namely the thumbnail navigations. If your website is a straight up HTML/CSS template, open it up using the Developer tools option in chrome. This can be a daunting prospect if you are not used to it because the Developer tools options displays the web page on top of a whole lot of coding that is dizzying and looks like it will never end. Once you get your bearings and your eyes adjust to things though, you can navigate to the jQuery code. To do this, you need to read up on one of the many tutorials on the net to know where you are going. Once you get to a section of code related to Fotorama called div class="Fotorama" , you can insert the following code to change the navigation style from iPhone style dots to full-on thumbnail images:

< div class="Fotorama"
data-nav="thumbs" >
< img src="3.jpg" >
< img src="5.jpg" >
< /div >


This takes images 3 and 5 and uses them as thumbnails. To further enhance the performance of thumbnails it is a good idea to have smaller versions of your images on hand. The code can then be further refined to:

< div class="Fotorama"
data-nav="thumbs" >
< a href="3.jpg" >< img src="3_thumb.jpg" >< /a >
< a href="5.jpg" >< img src="5_thumb.jpg" >< /a >
< /div >