Creating an Attractive Photo Gallery using SmartGallery (jQuery)

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:

Live Demo

[sociallocker]

download in package

[/sociallocker]

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!