Creating an Attractive 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).

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.

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

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.

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.

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.

Hello there! My name is Andrew and I have been doing web development for years. Frankly, not only web-development, and system-development too. This site is the place where I get to teach and share my experience for the web. Read more