Fotorama, The Most Customizable Photo Slider jQuery Plug-In On The Web


We are mad about Fotorama here at Fotoramajs.com. And in this article we would like to elaborate further on how incredibly customizable this jQuery plug-in is. In the article on autoplay, which we discussed at Autoplay page, we mentioned how to make alterations to the underlying code in any WordPress gallery, you needed to be familiar with the concept of WordPress short code language. We will refresh our memories without going into the level of detail that the linked post went into. WordPress short code gives a simple way to manipulate certain aspects of our WordPress based websites. We saw that the short code for gallery on your WordPress website was was just [ gallery ] .

Since the majority of people who use Fotorama on their website will most likely run it on the WordPress platform, we have decided to dedicate this post to further exploring the plethora of options available in terms of customizing your Fotorama gallery. It is possible that for some galleries you will not want the Fotorama plug-in to display the image at all. Instead you may leave it down to the coding inherent in WordPress's gallery display feature. Let's say your gallery contains images x,y and z. To disable Fotorama for this specific gallery, the code you will need is [ gallery ids="x,y,z" Fotorama="false" ] . We recommend using Fotorama for all of your website's galleires, but maybe one or two images aren't displaying as you would have hoped. This nifty manipulation of the code allows you to switch off Fotorama for certain galleries.

Another great example of the level of detail you can customize to can be found when changing the display of the thumbs. This changes the navigation option from one image to the next from a dot style to a thumbnail style. To do this to our gallery containing photos x,y,z the code we want to write is [ gallery ids="x,y,z" nav="thumbs" ] .

The customization options continue further when you think about the transitions to use. This is down to particular tastes of the individuals running a website, but the fact you are able to edit it in the first place is another great example of the prowess of Fotorama. The two options available for transitioning from one photo to the next is the slide or the crossfade transitions. You can try both options out for a certain gallery and see which one suits you best. To continue our example of photos x,y,z, changing the transition display to crossfade simply requires the following code: [ gallery ids="x,y,z" transition="crossfade" ] .