Creating a Photo Album with Galleriffic jQuery plugin

Date: 05th Oct 2011 Author: admin 4 Comments
Posted in: HTML/CSS, jQuery |Tags: , , , , ,

creating photo album with Galleriffic

Creating photo album with Galleriffic jQuery plugin

Today we will make a new photo gallery. Recently I found another nice JQuery plugin – Galleriffic. This plugin well optimized to handle high volumes of photos. Also it have nice features like thumbnail navigation (with pagination), jQuery.history plugin integration, slideshow with Play/Pause, keyboard navigation etc. So I decided to practice with it today.

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

Here are html source code of our photo album. I don`t will scare you with huge code here, but will show most important.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating photo album with Galleriffic jQuery plugin | Script Tutorials</title>

        <link href="css/galleriffic.css" rel="stylesheet" type="text/css" />
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.history.js"></script>
        <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
        <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
        <div class="container">

            <div class="navigation-container">
                <div id="thumbs" class="navigation">
                    <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>

                    <ul class="thumbs">
                        <li>
                            <a class="thumb" name="photo1" href="images/pic1.jpg" title="Title #1">
                                <img src="images/t_pic1.jpg" alt="Title #1" />
                            </a>
                            <div class="caption">
                                <div class="image-title">Title #1</div>
                                <div class="image-desc">HTML <b>description</b></div>
                                <div class="download"><a href="images/pic1.jpg">Download Original</a></div>
                            </div>
                        </li>
                        <li>
                            <a class="thumb" name="photo2" href="images/pic2.jpg" title="Title #2">
                                <img src="images/t_pic2.jpg" alt="Title #2" />
                            </a>
                            <div class="caption">
                                <div class="image-title">Title #2</div>
                                <div class="image-desc">HTML <i>description</i></div>
                                <div class="download"><a href="images/pic2.jpg">Download Original</a></div>
                            </div>
                        </li>
                        ........... other photos here ..............
                    </ul>
                    <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
                </div>
            </div>
            <div class="content">
                <div class="slideshow-container">
                    <div id="controls" class="controls"></div>
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container">
                    <div class="photo-index"></div>
                </div>
            </div>
            <div style="clear: both;"></div>

        </div>

        <footer>
            <h2>Creating photo album with Galleriffic jQuery plugin</h2>
            <a href="http://script-tutorials.com/creating-photo-album-with-galleriffic-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

All units – LI elements. Af useful feature – we can set custom HTML description for each object (photo).

Step 2. CSS

css/main.css

This file contain styles of our main page layout. We do not have to publish it here – it will be available in our package. But another one file – more important – styles for gallery:

css/galleriffic.css

div#container {
  overflow: hidden;
}
div.content {
  display: none;
  clear: both;
}

div.content a, div.navigation a {
  text-decoration: none;
}
div.content a:hover, div.content a:active {
  text-decoration: underline;
}

div.navigation a.pageLink {
  height: 52px;
  line-height: 52px;
}

div.controls {
  margin-top: 5px;
  height: 23px;
}
div.controls a {
  padding: 5px;
}
div.ss-controls {
  float: left;
}
div.nav-controls {
  float: right;
}

div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
  width: 510px;
}

div.loader,
div.slideshow a.advance-link,
div.caption-container {
  height: 342px;
}

div.slideshow-container {
  position: relative;
  clear: both;
  float: left;
  height: 372px;
}

div.loader {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(loader.gif);
  background-repeat: no-repeat;
  background-position: center;
}
div.slideshow span.image-wrapper {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
}
div.slideshow a.advance-link {
  display: block;
  line-height: 342px;
  text-align: center;
}

div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
  text-decoration: none;
}
div.slideshow a.advance-link:focus {
  outline: none;
}

div.slideshow img {
  border-style: solid;
  border-width: 1px;
    border-color: #888;
}
div.caption-container {
    color: #eee;
  float: right;
  position: relative;
  margin-top: 30px;
}
span.image-caption {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

div.caption-container, span.image-caption {
  width: 334px;
}

div.caption {
  padding: 0 12px;
}

div.image-title {
  font-weight: bold;
  font-size: 1.4em;
}
div.image-desc {
  line-height: 1.3em;
  padding-top: 12px;
}
div.download {
  margin-top: 8px;
}
div.photo-index {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 12px;
}
div.navigation-container {
  float: left;
  position: relative;
  left: 50%;
}
div.navigation {
  float: left;
  position: relative;
  left: -50%;
}
div.navigation a.pageLink {
  display: block;
  position: relative;
  float: left;
  margin: 2px;
  width: 16px;
  background-position:center center;
  background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
  outline: none;
}
div.navigation a.prev {
    background-image: url(page_prev.gif);
}
div.navigation a.next {
    background-image: url(page_next.gif);
}

ul.thumbs {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
ul.thumbs li {
  float: left;
  padding: 0;
  margin: 2px;
  list-style: none;
}
a.thumb {
  padding: 1px;
  display: block;
}
a.thumb:focus {
  outline: none;
}

ul.thumbs li.selected a.thumb {
    background: #fff;
}

ul.thumbs img {
  border: none;
  display: block;
}
div.pagination {
  clear: both;
  position: relative;
  left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
  position: relative;
  display: block;
  float: left;
  margin-right: 2px;
  padding: 4px 7px 2px 7px;
  border: 1px solid #ccc;
}
div.pagination a:hover {
  text-decoration: none;
}
div.pagination span.current {
  font-weight: bold;
}
div.pagination span.ellipsis {
  border: none;
  padding: 5px 0 3px 2px;
}

div.gallery-gutter {
  clear: both;
  padding-bottom: 20px;
}

Step 3. JS

js/jquery-1.5.2.min.js, js/jquery.galleriffic.js, js/jquery.history.js and js/jquery.opacityrollover.js

This is different jQuery libraries (including our new gallery), these files always available in package

js/main.js

jQuery(document).ready(function($) {
    $('div.content').css('display', 'block');

    var onMouseOutOpacity = 0.67; // initial opacity
    $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles
        mouseOutOpacity:   onMouseOutOpacity,
        mouseOverOpacity:  1.0,
        fadeSpeed:         'fast',
        exemptionSelector: '.selected'
    });

    var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin
        delay:                     2500,
        numThumbs:                 8,
        preloadAhead:              8,
        enableTopPager:            false,
        enableBottomPager:         false,
        imageContainerSel:         '#slideshow',
        controlsContainerSel:      '#controls',
        captionContainerSel:       '#caption',
        loadingContainerSel:       '#loading',
        renderSSControls:          true,
        renderNavControls:         true,
        playLinkText:              'Play Slideshow',
        pauseLinkText:             'Pause Slideshow',
        prevLinkText:              'Previous Photo',
        nextLinkText:              'Next Photo',
        nextPageLinkText:          'Next &rsaquo;',
        prevPageLinkText:          '&lsaquo; Prev',
        enableHistory:             true,
        autoStart:                 false,
        syncTransitions:           true,
        defaultTransitionDuration: 900,
        onSlideChange:             function(prevIndex, nextIndex) {
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut:       function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn:        function() {
            var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
            var nextPageLink = this.find('a.next').css('visibility', 'hidden');

            if (this.displayedPage > 0)
                prevPageLink.css('visibility', 'visible');

            var lastPage = this.getNumPages() - 1;
            if (this.displayedPage < lastPage)
                nextPageLink.css('visibility', 'visible');

            this.fadeTo('fast', 1.0);
        }
    });

    gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links
        gallery.previousPage();
        e.preventDefault();
    });

    gallery.find('a.next').click(function(e) {
        gallery.nextPage();
        e.preventDefault();
    });

    // integration with jquery.history
    function pageload(hash) {
        if (hash) {
            $.galleriffic.gotoImage(hash);
        } else {
            gallery.gotoIndex(0);
        }
    }

    $.historyInit(pageload, 'system.html');
});

Here are we have initialization of gallery itself, several event handlers etc.

Here you can find full documentation for this gallery (with explanation of all params).

Step 4. Images

For gallery interface – we using few small icons (loader.gif, next.png, page_next.gif, page_prev.gif and prev.png). These icons available in package. Images of pur album located in ‘images’ folder. Here are thumb images (with prefix ‘t_’) and full-size images (pic1.jpg, pic2.jpg .. pic10.jpg).


Live Demo
download in package

Conclusion

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

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.
    Tweet
   
   

Stay connected with us:

2 Comments

    • Steve Nykiel's Gravatar
    • Your demo works with firefox but does not work in internet explorer 8 and 9. What can I change in it to make it work in internet explorer 8 and 9 also?

      Thanks Steve

  1. 18 Fresh and Useful jQuery Tutorials | AcrisDesign on October 7, 2011 at 11:19 am
  2. 15 Best Web Design And Development Tutorials Of October 2011 | stylishwebdesigner on November 6, 2011 at 8:26 am

Leave a Reply

Your email address will not be published. Required fields are marked *

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>