Creating photo album with jQuery Fotorama

Today I have prepared tutorial about using new impressive jQuery gallery – Fotorama. This is a nice looking javascript gallery with intuitive controls, and great browser compatibility. You can use this plugin at iPhones and any other mobile devices (you can slide photos with touch).

Here are links to demo and downloadable package:

Live Demo
download in package

Ok, lets download the example files and goto coding !


Step 1. HTML

index.html

This is markup of our result page with Fotorama gallery. Here it is.

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>Creating photo album with jQuery Fotorama | Script Tutorials</title>
06         <link href="css/layout.css" rel="stylesheet" type="text/css" />
07         <link href="css/fotorama.css" rel="stylesheet" type="text/css" />
08         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
09         <script src="js/fotorama.js"></script>
10         <script src="js/main.js"></script>
11     </head>
12     <body>
13         <header>
14             <h2>Creating photo album with jQuery Fotorama</h2>
15             <a href="https://www.script-tutorials.com/photo-album-with-jquery-fotorama/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
16         </header>
17         <div class="container">
18             <div id="fotorama">
19                 <img src="images/pic1.jpg" alt="photo #1" />
20                 <img src="images/pic2.jpg" alt="photo #2" />
21                 <img src="images/pic3.jpg" alt="photo #3" />
22                 <img src="images/pic4.jpg" alt="photo #4" />
23                 <img src="images/pic5.jpg" alt="photo #5" />
24                 <img src="images/pic6.jpg" alt="photo #6" />
25                 <img src="images/pic7.jpg" alt="photo #7" />
26                 <img src="images/pic8.jpg" alt="photo #8" />
27                 <img src="images/pic9.jpg" alt="photo #9" />
28                 <img src="images/pic10.jpg" alt="photo #10" />
29                 <img src="images/pic11.jpg" alt="photo #11" />
30                 <img src="images/pic12.jpg" alt="photo #12" />
31             </div>
32         </div>
33     </body>
34 </html>

Very easy – right?

Step 2. CSS

css/layout.css and css/fotorama.css

First stylesheet is page layout of our page. Second one is default stylesheet file of fotorama gallery. You can customize it (if need). Both files available in our package.

Step 3. JS

js/fotorama.js

This is main gallery javascript file. It uses jQuery, so we have to include both (fotorama.js and jquery) files. This file available in package.

js/main.js

01 jQuery(function(){
02     $('#fotorama').fotorama({
03         // width: 1000, // Width of container
04         // height: 600, // Height of container
05         startImg: 10, // Initial image
06         transitionDuration: 400, // Duration of transition
07         touchStyle: true// Enable dragging
08         // pseudoClick: true, // Slide between images by click (if touchStyle = true)
09         // loop: false, // Loop for images (if touchStyle = false)
10         // backgroundColor: null, // Custom background color
11         margin: 10, // Margin between images
12         // minPadding: 10, // Min padding
13         // alwaysPadding: false, // Apply padding for images
14         // preload: 3, // Amount of pre-loaded images from each end of the active image
15         // resize: false, // Resize images
16         // zoomToFit: true, // Zoom to fit
17         // cropToFit: false, // Crop to fit
18         // vertical: false, // Vertical thumbs
19         // verticalThumbsRight: false, // Vertical thumbs at right
20         // arrows: true, // Draw arrows
21         arrowsColor: '#3399cc'// Arrows color
22         // thumbs: true, // Draw thumbs
23         // thumbsBackgroundColor: null, // Thumbs Background Color
24         // thumbColor: null, // Thumb Color
25         // thumbsPreview: true, // Thumb Preview
26         thumbSize: 50, // Thumb size (height)
27         // thumbMargin: 5, // Thumb margins
28         thumbBorderWidth: 1, // Thumb border width
29         // thumbBorderColor: null, // Thumb Border Color
30         caption: true// Display captions
31         // html: null, // You can full html code of gallery here
32         // onShowImg: null, // Custom function when we select image
33         // shadows: true // Display shadows
34     });
35 });

This is main initialization of fotorama gallery. Several styles was customized, another – no. I have added descriptions of all possible parameters of this gallery.

Here you can find official documentation of this gallery.

Step 4. Images

All gallery images is in ‘images’ folder.


Live Demo
download in package

Conclusion

I hope that today we made new nice photo gallery. Good luck in your projects!