In this blog I have been writing on a series of demonstrative articles on creating photo gallery cum slideshow.
If you will check up the earlier articles you will find that the stress of these articles has always been on easy ways of making the image galleries work.
A few like the slideshow with iframe tag, or that with the help of onMouseover JavaScript are decidedly easy.
Some like the present one are a bit tougher since these involve using several JavaScripts and CSS properties. But every effort has been made to make the work easy for you, including providing full html code to implement in your website.
Today’s photo gallery is based on DevKick’s Galleria, which is a JavaScript written in jQuery. Galleria loads photos one after another when you click on the thumbnails or the bigger images or the previous/next text links at the bottom.
What is good about Galleria is that it automatically creates thumbnails from bigger photos, and therefore there is no need to separately create them for use.
The other advantage is that the thumbnails can be given certain opacity while the active one is not, giving sophistication to your photo gallery. What is more, the caption can be made to fade-in when an image is selected, and yes you can alter the time of fade-in in milliseconds.
Let me present you an example of Galleria photo gallery cum slideshow below, after which comes the video tutorial. In the slideshow, notice how the thumbnails are all dark (more opacity) except the one that is open by default. As you move on to other images, the corresponding thumbnails become bright while all other turn dark.
If the slideshow below doesn’t play properly, you can view it here.
How To Do It
The photo gallery makes use of 5 scripts – 3 JavaScript and 2 CSS. The JavaScript code for bringing in opacity and fade-in effect is mentioned in html code itself, as also the CSS code for the unordered list of thumbnails and that of general appearance of the image gallery.
The 2 main JavaScript codes are the jQuery library and the Galleria. Both can be downloaded free – jQuery minified from this site and Galleria from here. In addition, also download the Galleria CSS file.
All these code files need to be copy-pasted in Notepad, and then saved with the extensions as ‘.js’ or ‘.css’ as the case may be.
The full html code is given below. All the images and codes come from the same directory as the html source. This is done for ease of doing it in your website, though it is likely that you will prefer the images and codes placed in different directories, and then suitably referenced in your page html.
HTML Code
<html><head>
<title>My Small Picture Gallery With Galleria JS</title>
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.pack.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
$('ul.gallery_demo').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.4);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.4';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.4); } // don't fade out if the parent is active
)
}
});
});
</script>
<style media="screen,projection" type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:5px;background:white;text-align:center;background:white;color:#333;font:80%/140% georgia,serif;}
h1,h2{font:italic 125% georgia,'helvetica neue',sans-serif;letter-spacing:1px;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{color:#321;font:normal 17px verdana;}
.demo{position:relative;margin-top:0.5em;}
.gallery_demo{width:602px;margin:0 auto;}
.gallery_demo li{width:76px;height:57px;border:3px double #ccc;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
#main_image{margin:0 auto 33px auto;height:450px;width:600px;background:white;padding:1px;border:3px double #777;}
#main_image img{margin-bottom:10px;}
.nav{padding-top:15px;clear:both;font:90% 'helvetica neue',sans-serif;letter-spacing:2px;}
</style>
</head>
<body>
<h1>My Small Picture Gallery</h1>
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<li><img src="morning-or-end-of-day.jpg" alt="Morning" title="Is it morning, or end of day?"></li>
<li><img src="who-says-its-morning.jpg" alt="Morning not yet" title="Who says it is morning?"></li>
<li><img src="breakfast.jpg" alt="Breakfast" title="Breaking fast at last"></li>
<li class="active"><img src="mirror-mirror-on-the-wall.jpg" alt="Mirrors all around" title="Mirror, mirror on the wall"></li>
<li><img src="road-blocked.jpg" alt="Road blocked" title="Road blocked by a flock of sheep"></li>
<li><img src="ostrich-egg-shells.jpg" alt="Ostrich egg shells" title="Table lamps created with ostrich egg shells"></li>
<li><img src="the-ocean.jpg" alt="The Ocean" title="An endless sheet of water, the Indian Ocean"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">« previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next »</a></p>
</div>
</body>
</html> This article of September 21st, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
I dont get how this works.
Can you give more details?
Edgar,
I’ve rectified the galleria demo above, though it still seems not to be working okay in all browsers.
To make it work, you need 2 javascript files, the jquery library and the galleria. In addition you also need the css file for galleria. All these codes are free, and the links to download these files are given in the second para under the heading ‘How To Do It’ above.
After you’ve all these files, copy the html code, paste in a text editor, and save it as an html file. Keep all the code files in the same folder where you have the html file and all the image files.
Now when you open the html file in a browser, the galleria slide show should work.
Hope it helps!
Hi,
the downloading for Galleria and CSS Gallery isn’t working and can’t download. The demo looks awesome.
Thanks for putting them online for free. Highly preciated.
Sylvia
Sylvia,
Do the following:
Hope this helps.
Partha
Hey thanks very much for the info! This has helped me out a stack!
Just wondering were the photo’s you used taken in Cape Town?
Thanks. And yes, some of these are taken in Cape Town…a wonderful place!
Hi, i am trying to get this script running on a website i am creating using web page maker, i cant seem to get it working, im sorry but i have no coding experience can you give me a very simple step by step guide.
Thanks
Hi Carl,
Start with the bare-bones HTML code above. In that, leave the gallery related code untouched, and try to build up your webpage. I believe you will be able to make it.
Best wishes!