Creating an Attractive Photo Gallery using SmartGallery (jQuery)

SmartGallery photo gallery

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:

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
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!

Enjoyed this Post?

If you enjoy our articles, feel free to share our tutorials with your friends.

6 thoughts on “Creating an Attractive Photo Gallery using SmartGallery (jQuery)

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

    • Strange, should work in IE9 (already tested). Possible in IE8 too (will need to perform more researches)

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

Leave a Reply

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

*

     

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>