Creating an Attractive Photo Gallery using SmartGallery (jQuery)

Creating photo gallery using SmartGallery (jQuery)

Today we will continue overviews of available photo galleries. Next gallery will SmartGallery. This light-weight gallery will allow us to have thumbnail navigation, auto image scaling, 12 transition effects (to current moment). All this is done with the options of this gallery.

By default, the gallery is expected that all the necessary HTML data is prepared (with all used 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 picture the various members). We will use JQuery ($. get function).

Firstly – you can download our package and check demo:

Live Demo

download in package

Lets 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 – we having empty <div class="smart_gallery"></div> here. We will load imaged dinamically.

Step 2. CSS

Here are used CSS file with styles of our demo and of this gallery too:

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

Here are all JS files:

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
        });
    });
});

So, when page loaded, I start loading extra info (about using images) from feed.php using jQuery. After, appending received info to our $(‘.smart_gallery’). And then – perform initialization of our gallery with necessary params. Full list of possible params I will put in end of article.

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

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

Step 4. PHP

Here are source code of our generator of 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;

?>

This is easy code, in begining – template for image list, then – I passing through our images, performing replaces, and echo result of our list (back to JS function)

Step 5. Images

Our SmartGallery gallery using next images:

And at last – table with all possible params (to current moment) of that gallery:

Live Demo

download in package

Conclusion

Today I told you how to build new jQuery gallery. Sure that you will happy to use it in your projects. Good luck!

Related Articles

Creating photo gallery using jQuery and VisualLightBox

How to Create Animated Photo Gallery using jQuery (Slider Kit)

Creating Ajaxy Photo Gallery (jQuery) with Custom Images Sets

New Great jQuery Photo Gallery – Skitter