Creating photo album with jQuery Fotorama

Jan 11, 2012

0 57240

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.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating photo album with jQuery Fotorama | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/fotorama.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/fotorama.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <header>
            <h2>Creating photo album with jQuery Fotorama</h2>
            <a href="https://www.script-tutorials.com/photo-album-with-jquery-fotorama/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div id="fotorama">
                <img src="images/pic1.jpg" alt="photo #1" />
                <img src="images/pic2.jpg" alt="photo #2" />
                <img src="images/pic3.jpg" alt="photo #3" />
                <img src="images/pic4.jpg" alt="photo #4" />
                <img src="images/pic5.jpg" alt="photo #5" />
                <img src="images/pic6.jpg" alt="photo #6" />
                <img src="images/pic7.jpg" alt="photo #7" />
                <img src="images/pic8.jpg" alt="photo #8" />
                <img src="images/pic9.jpg" alt="photo #9" />
                <img src="images/pic10.jpg" alt="photo #10" />
                <img src="images/pic11.jpg" alt="photo #11" />
                <img src="images/pic12.jpg" alt="photo #12" />
            </div>
        </div>
    </body>
</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

jQuery(function(){
    $('#fotorama').fotorama({
        // width: 1000, // Width of container
        // height: 600, // Height of container
        startImg: 10, // Initial image
        transitionDuration: 400, // Duration of transition
        touchStyle: true, // Enable dragging
        // pseudoClick: true, // Slide between images by click (if touchStyle = true)
        // loop: false, // Loop for images (if touchStyle = false)
        // backgroundColor: null, // Custom background color
        margin: 10, // Margin between images
        // minPadding: 10, // Min padding
        // alwaysPadding: false, // Apply padding for images
        // preload: 3, // Amount of pre-loaded images from each end of the active image
        // resize: false, // Resize images
        // zoomToFit: true, // Zoom to fit
        // cropToFit: false, // Crop to fit
        // vertical: false, // Vertical thumbs
        // verticalThumbsRight: false, // Vertical thumbs at right
        // arrows: true, // Draw arrows
        arrowsColor: '#3399cc', // Arrows color
        // thumbs: true, // Draw thumbs
        // thumbsBackgroundColor: null, // Thumbs Background Color
        // thumbColor: null, // Thumb Color
        // thumbsPreview: true, // Thumb Preview
        thumbSize: 50, // Thumb size (height)
        // thumbMargin: 5, // Thumb margins
        thumbBorderWidth: 1, // Thumb border width
        // thumbBorderColor: null, // Thumb Border Color
        caption: true, // Display captions
        // html: null, // You can full html code of gallery here
        // onShowImg: null, // Custom function when we select image
        // shadows: true // Display shadows
    });
});

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.