Creating an Attractive Photo Gallery using SmartGallery (jQuery)

Creating an Attractive Photo Gallery using SmartGallery (jQuery)

10 2013
SmartGallery photo gallery

Creating photo gallery using SmartGallery (jQuery)

Today we continue our overview of available photo galleries. The next gallery is SmartGallery. This is light-weight gallery that allows us to have thumbnail navigation, auto image scaling, 12 transition effects (at the current moment). Everything is controlled by a options of this gallery.

By default, the gallery expects that all the necessary HTML structure is prepared (with necessary images). Our task is to create a script that will automatically load the necessary sets of images (as you may remember – our main goal is to display pictures of different members). This gallery requires the JQuery library ($. get function).

First of all – you can test the demo:

Live Demo

Now, let’s start coding !


Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/smart-gallery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<div class="example">
    <h3><a href="#">SmartGallery example</a></h3>
    <div class="smart_gallery"></div>
</div>

As you can see – the gallery <div class="smart_gallery"></div> is empty. We will load imaged dynamically.

Step 2. CSS

The following CSS file contains styles of our demo and the gallery:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:572px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*SmartGallery styles*/
.min-gallery
{
  width:572px;
  height:465px;
  border:solid 1px black;
  background-color:Black;
  background:url(../images/bg.jpg);
  margin:auto;
}
.min-gallery .preview
{
  width:500px;
  height:335px;
  margin-top:36px;
  margin-left:36px;
  margin-right:36px;
  position:relative;
  border:solid 2px black;
  overflow:hidden;
  background-color:White;
}
.min-gallery .preview img
{
  position:absolute;
}
.min-gallery .bottom
{
  width:100%;
  height:98px;
  color:Gray;
  font-family:Arial;
  font-size:1em;
  font-weight:bold;
  overflow:hidden;
}
.min-gallery .bottom .long
{
  width:100%;
}
.close
{
  text-align:center;
  color:white;
  font-family:Verdana;
  font-size:10px;
  font-weight:normal;
  text-transform:uppercase;
  cursor:pointer;
  width:100%;
  padding:4px;
}
.min-gallery .bottom .short
{
  width:100%;
  height:100%;
}
.min-gallery .bottom .short .left
{
  padding-left:5%;
  padding-top:42px;
  width:35%;
  float:left;
}
.min-gallery .bottom .short .middle
{
  width:20%;
  float:left;
}
.min-gallery .bottom .short .right
{
  width:35%;
  float:left;
  text-align:right;
  padding-right:5%;
  padding-top:42px;
}
.min-gallery .bottom .short .middle > div
{
  float:left;
}

.short-thumbnail-container
{
  width:36px;
  padding-top:30px;
  cursor:pointer;
}
.gallery-nav-left
{
  cursor:pointer;
  width:12px;
  margin-right:25px;
  height:18px;
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.gallery-nav-right
{
  width:12px;
  margin-left:25px;
  height:18px;
  cursor:pointer;
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:center;
  margin-top:40px;
}
.thumbnail-button
{
  width:8px;
  height:8px;
  margin:2px;
  background-image:url(../images/box.jpg);
  float:left;
}
.active-image
{
  z-index:100;
  display:block;
}
.inactive-image
{
}
.gallery-caption
{
  position:absolute;
  width:100%;
  height:100px;
  background-color:Black;
  widht:100%;
  z-index:102;
  color:gray;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter:alpha(opacity=70);
  -moz-opacity:0.7;
  -khtml-opacity:0.7;
  opacity:0.7;
  padding:8px;
}

.thumbnails
{
  width:420px;
  margin:auto;
  padding:0;
  padding:22px 0px 0px 0px;
  position:relative;
}
.thumbnails-back, .thumbnails-forward
{
  float:left;
  width:13px;
  height:40px;
  position:relative;
  top:6px;
  cursor:pointer;
}
.thumbnails-back
{
  background-image:url(../images/arrow-left.png);
  background-repeat:no-repeat;
  background-position:left;
}
.thumbnails-forward
{
  background-image:url(../images/arrow-right.png);
  background-repeat:no-repeat;
  background-position:right;
}
.thumbnails-contents
{
  width:390px;
  height:48px;
  float:left;
  position:relative;
  overflow:hidden;
}
.thumbnails-contents > div
{
  position:absolute;
  width:100%;
}
.thumbnails-contents > div > div
{
  float:left;
}
.thumbnails-contents img
{
  width:43px;
  height:43px;
  margin-left:9px;
  margin-right:9px;
  border:solid 2px black;
}

.hidden
{
  display:none;
}
.visible
{
  display:block;
}
.thumbnail-active
{
  filter:alpha(opacity=100);
  opacity:1.0;
  cursor:pointer;
}
.thumbnail-inactive
{
  filter:alpha(opacity=50);
  opacity:0.5;
  cursor:pointer;
}
.thumbnail-text
{
  color:#7A7677;
  font-weight:bold;
  text-align:left;
  display:block;
  padding:10px 2px 2px 0px;
}
.clear-fix
{
  clear:both;
}

Step 3. JS

The following JS file initializes the gallery:

js/main.js

jQuery(window).load(function() {
    $.get('feed.php', function(data){
        $('.smart_gallery').append(data);

        $('.smart_gallery').gallery({
            random: true,
            circular: true,
            masked: true,
            animation: "blind",
            noofthumbnails: 6,
            thumbnailscrollspeed: 2000,
            animationspeed: 1000,
            stickthumbnails: true,
            imagedisplaytime: 3000
        });
    });
});

Well, when the page is loaded, it begins loading additional information (about custom images) from feed.php file using jQuery. Then, the received data goes (append) directly inth the $(‘.smart_gallery’). Finally – it invokes the initialization of our gallery with necessary params. Full list of possible parameters is provided in the end of the article.

js/jquery-1.5.2.min.js and js/smart-gallery.min.js

This is main jQuery library with gallery plugin. It is available in our package.

Step 4. PHP

The following file is the data generator of our images:

feed.php

<?

// define template for gallery
$sImageTemplate = <<<HTML
<a href="{fileurl}" title="{title}"><img src="{fileurl}" /></a>
HTML;

$sImages = '';
$sFolder = 'data_images/';

$aUnits = array( // obtaining array of used images
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10'
);

foreach ($aUnits as $sFileName => $sTitle) { // preparing images data
    $sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle));
}

echo $sImages;

?>

The code is fairly simple, in the begining – it is template for the image list, then – it walks through the images, makes replacements, and then – it prints the result of our list (back to JS function)

Step 5. Images

Our SmartGallery gallery uses next image files:





Table with all possible params (at the current moment) of this gallery:

Param Type Default Description
random boolean true If you going to use single transition, set to ‘false’
circular boolean true Is thumb gallery circular?
masked boolean true All images in thumbs line will have mask, and, onhover – mask disappear
animation string blind Transition effect (fadein, blind, fallingbars, appear, fillin, explode, jumble, risingbars, paint, diagonal, crunchingbars, slidein)
noofthumbnails int 6 Amount of thumbs displayed in time
thumbnailscrollspeed int 2000 Speed, where thumbnails scroll back and forth (ms)
animationspeed int 1000 Speed of animation (ms)
stickthumbnails boolean false In case of false – bar with thumbnails will closing automatically
imagedisplaytime int 3000 Time of displaying of single image (ms)

Live Demo

Conclusion

Today we explained how to build the new jQuery gallery. I’m sure, that you will be happy to use it in your projects. Good luck!


10 COMMENTS

  1. excellent job sir…thanks for ur effort. This will give a great motivation for me (a beginner) in this field.

    • Hi monika,
      In the same way as you work with any another language. The main task of every language (for web) – is to produce HTML. If you prefer to use .Net (ASP# as example), you should just echo HTML in the result of your work.

  2. Hi Great job with the gallery, need help with IE9 as it stops rendering all the images. The error with the site shows error on page message. ‘jQuery’ is undefined. ‘p’ is null or not an object. smart-gallery.min.js Line: 396, Code 0 Char:25
    Please help.

    • Hi Auriff,
      This is strange, but it seems that this error can happen only in case if the jQuery is actually not defined. Doesn’t it work at your own website, or our demo doesn’t work for you too?

  3. HI Andrey

    Thank you for your reply, my site workes in all browsers but exibits problems with IE9 and possibly under. I am using bgStretch.js, superfish.js, jquery.easing.min.js as the common jquery plugins on the site that work on the home page (www.magic-makeup.co.uk/main.php, however the bridalmakeup.php has the smart-gallery.min.js with the jquery-1.5.2.min.js that show the problem in IE9. I would like to use this plugin for all the other pages but need to have the IE9 issue sorted.
    the jQuery is defined correctly but depending on where it is placed in the list displays additional errors in files placed before it. Please help.

    Kind regards
    Auriff

    • Hi Auriff,
      I tested this gallery with jQuery (jquery-1.10.2.js) and it works smoothly. Thus, you can omit this jquery-1.5.2.min.js and use the latest version of the jQuery without any problem.

Leave a Reply