Making A Photo Album For Your Website With Fotorama jQuery Plug-In


Here we will guide you through the more complicated of the two of the ways you can use the Fotorama jQuery on your website. You don't need any particular programming prowess for either method; the method of installation on both a standard HTML/CSS website and a website using the WordPress content management system are straight forward enough once they have been spelled out to you.

The first way is a small bit more complicated, and it is for installing the plug-in on a HTML/CSS website and creating your own photo gallery. It does not require any rocket science levels of computer programming, but a smidgen of technological prowess will go along way into helping you through this process. Here we will outline the steps for installing Fotorama to your HTML/CSS site.

The first thing you will need to do is read through the documentation and download the source code files. The source code files come in the handy format of a .zip file, meaning the contents have been compressed to allow for a brisker more organized download. You need to download these files to a relevant and convenient location on your local computer for later use. The relevant documentation will also be contained in these files in the form of a help file. Fotorama jQuery gives users a very well-written and precise set of instructions on using the plug-in for their website. This early step might seem obvious, but it is crucial. You need to understand everything your Fotorama jQuery does before bothering to put it on your site. This applies to any jQuery, so it is a good step to remember for future reference.

The next step is to copy and paste some code into your jQuery library which is almost always hosted on a Google server. Upon downloading the files, open up the source code. Copy the following code into the < head > of your website HTML document:

< script src="http://ajax.googleapis.com/ajax/libs/jQuery/1.10.1/jQuery.min.js">< /script >
< script src="../product/Fotorama.js">< /script >


The next step is to place your downloaded files into their corresponding folders. So put the CSS file into your CSS folder and the JS file inside the JS folder. As an aside, it is a good idea to put your JS file in the folder with a -min attached to end of it. This folder has no white space in it. This make is very difficult to read with the human eye, but it runs a lot faster.

Once the above step has been complete, you need to link your CSS and JS files in the head of the HTML document related to your website. To do this, enter the following code in the head of your HTML document, specifically under the first declaration of the CSS stylesheet. Here is the code you will need:

< link href="../product/Fotorama.css" rel="stylesheet" >

After this, you will need to create your HTML. This is a small bit of technical knowledge that is not too difficult to get to grips with once you understand what you are doing. The idea of this stage is to copy and paste the HTML from your downloaded .zip file to your website. The will ensure that your HTML, CSS and Fotorama jQuery plug-in are all communicating and appearing on the same page. The final step in the process is to add to Javascript code that makes the plug-in function. To do this, you will need to copy and paste some code into the head of your HTML document between the < script > tags. Again, the helpful documentation provided with Fotorama will inform you on exactly which source code file relates to the Javascript code. Once you have completed the above steps, your work is done. Fotorama is now ready to display some beautiful photo galleries on your website!