| OR |
« 6 Steps To 5-Figure Blog Income | Which Video Software To Use For Your Web Video »
|
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 the html code itself (see below), 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. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
29 Comments
Trackbacks/Pingbacks
- http://beauty.diggcontent.com/2010/09/07/how-to-buy-cosmetics-and-beauty-products - Tks... I really need it,thank you very much!!!...
- http://beauty.diggcontent.com/2010/09/07/how-to-buy-cosmetics-and-beauty-products - Tks... I really need it,thank you very much!!!...
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!
Good stuff. this is why i love reading blogs other than my full time career as a dentist.
that’s incredible.
Thank you for posting this awesome read. Check out my very own!
Hello
Thanks for the basic instructions. I inherited a website with a Galleria gallery in it and I’m trying to figure out how to get the first image to load. Currently the main image div is blank until a thumb is clicked.
The URL above has not been styled yet. It is my test. The exisiting page is at http://www.oililywholesale.com/our_collection.html and its got the same issue.
Your help appreciated much!
Nancy
http://www.oililywholesale.com/our_collection_new.html
This is my test page.
@Nancy,
Please visit this page: http://www.2webvideo.com/video-production/demo/galleria-image-gallery/galleria-image-gallery.html
Check out the source code. Stick to the code, and change only the essentials like the dimensions, the ‘active’ photo, etc. It should work.
Best.
Partha
AHHHH! Thank you so much. The previous web guy didn’t add the class “active” to any of the photos!
Many many thanks,
Nancy
Hi,
As I’m relatively new to CSS, I found your article extremely useful in getting Galleria to display properly. The problem that persists, however, is that the code for the gallery and the code for the page tables seem to be interfering and canceling out some of the table code. I’ve gone through the code and experimented, trying to isolate the problem, but without much luck.
The web page is located here: http://www.straightcirclemartialarts.com/gallery.html
Any help or advice is greatly appreciated!
Best,
Paul
@Paul,
Use the <iframe> tag to embed your Galleria in any webpage. My example above is the same as that.
To do that, first create a webpage that has only the Galleria, like my page, http://www.2webvideo.com/video-production/demo/galleria-image-gallery/galleria-image-gallery.html.
Next, use the “iframe tag” to embed the Galleria (more on iframe…here).
Cheers.
I am using the coding for Galleria 1.0b and i would like to know how to position the thumbnails and the photo title captions on the top rather than the bottom of the larger photo. Any help is much apperciated. I am new to web design and dont understand coding well.
I have used your coding and it work but i would like to move the thumbnails and the photo tile/captions to the top rather than having it at the bottom of the main/large photo.
Is there a way this can be done?
I would also like to create a slideshow with smooth transaction between the photos. Can this be done as well?
I am new to web design and dont much understand coding. Any help is much apperciated.
@AJ,
Try altering the style in the html code of the galleria (link given above), and see what all is possible. I’m really sorry I can’t afford time to do it myself.
As for other slideshows, I’ve other posts in this blog about that.
Good luck!
Partha
Thank you for replying back. I have tried playing around with CSS coding window on Deramweaver but nothing work. I do not know how to enter coding on HTML as i am still learning.
Hi
Do you know to remove the thumbnails from the Galleria 1.0 because i want to use this on my home page without the thumbnails and have a slideshow.
@AJ,
To remove thumbnails, just replace this code in the <style> </style> section:
with the following:
Hope this helps!
Would love to perpetually get updated great site ! .
Really interesting, thanks!
thanxx fr such a lovely slideshow…
@garima, you’re welcome!
The RSS feed does not work on my screen Firefox4 how can I repair it?
Hi..Great post..Thanks a lot. I implemented this to my website http://www.PhoTouchs.com and it works great.
Thanks
Jeff