Creating a Photo Album with Galleriffic jQuery plugin

Creating a Photo Album with Galleriffic jQuery plugin

10 112755
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

[sociallocker]

download in package

[/sociallocker]


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="https://www.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

Conclusion

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

SIMILAR ARTICLES


10 COMMENTS

  1. 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

  2. Thanks a lot for all those scripts.
    Sorry for my english.
    I have a question:
    Is it not to heavy to load if my album has many photos in higher quality about 200K/o each?
    Because I think that all picture are load at the start.
    Another thing, i add a comment space just under the downlaod original but every time that i hit the space key it switch the photo
    thanks for your answer

    • Hello Seb,
      I think that 200kb is not so big size of a photo.
      as for second, as I know, when you click ‘space’ symbol, it moves forward (it is in the end of jquery.galleriffic.js)

    • Hi Samuel,
      there is a plenty of possible places for ads: before breadcrumbs, before the closing div of .content, or even – below the gallery.

  3. the script works fine with few adjustments on gallerific-2.css style sheet, except on the caption class, it doesn’t show the caption of the image when it’s run/deploy on a browser. it is suppose to be located at the bottom part or wherever it is positioned by the developer of the slideshow-container.

    do you have any idea/work around on this?

    thanks in advance…

    • Hi Eris,
      In general, it is up to you where you want to display this content, in the bottom or in the top, because you always have an opportunity to adjust these styles as you desire (using css)

  4. Hi thanks very much for this. Am having a little challenge though, my images don’t change when I click on them, only when I use keyboard controls or the “playslideshow” button. It was working fine before I integrated it into one of my existing site. I am using foundation by zurb which has other javascript files. Any assistance offered will be appreciated.

    • Hi Roland,
      I recommend that you check how it works using an inspector. For example – Firebug (for Firefox). Here is probably a minor JS error in code.

Leave a Reply to Roland Cancel reply