Manipulating The Fotorama jQuery Code To Loop Between Images


This post is only for users who feel comfortable changing the coding inherent in the Fotorama jQuery photo gallery. As such, we recommend only attempting the guidelines in this post if your computer programming knowledge is beyond a beginner level. When adding the Fotorama jQuery plug-in to your HTML/CSS website template, you will have noticed that we needed to add some jQuery code to make the plug-in function how we wanted it to. The great thing about this coding is that we can alter it so that the plug-in can do other things that aren't in the user interface. This is a key advantage of knowing some coding. You can manipulate the source code in such a way that you can make the underlying plug-in do almost anything you want it to.

One of the handiest ways to change your Fotorama jQuery coding is to add a loop function. The main reason for adding a loop function is that it simply looks great. It allows for seamless transition between say a first image in a gallery and the last image. This requires three or more images to be in your gallery. It is a bit tricky to get your head around the details if you are a beginner programmer, but if you understand where to just copy and paste the code you can get away with implementing a loop function in Fotorama without really knowing what is happening with the code. The same goes for all alterations of jQuery coding. If you haven't got the foggiest what is going on but you understand the premise of copying and pasting to the right areas of the code, you can change almost anything. It is akin to being a programmer without any decent programming knowledge. Quite the paradox eh!

Changing the code to make your gallery loop in a seamless manner between the first and last image, means opening up your jQuery code. There are a number of ways to do this, but the best is by using DevTools which is a tool ingrained in Google Chrome that allows for developers to make changes to websites. To open this just enter the keyboard shortcut Ctrl+Shift+J and the developer panel will open. This tool is quite useful for editing all aspects of a website. This includes HTML elements and CSS styling, allowing you to make changes to either the underlying structure of your website or the styling elements that make it look the way it does. Anyway, to put a loop on your Fotorama jQuery tool, open the Javascript code for your website. Look in the header for something that says div class="Fotorama" . Insert the following code so that the end result looks like this:

< div class="Fotorama"
data-loop="true" >
< img src="1.jpg" >
< img src="2.jpg" >
< /div >


Et voila! You now have a nice loop between the image 1 and 2.