Galleria
Javascript Library: jQuery
License: GPL
Found Via: DevKick
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Collis Ta'eed
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Onvo Media - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Any way to customize the thumbnails so they automatically horizontally scroll if you have too many images?
How do the thumbnails get generated? It is something that the user has to specify?
Those thumbnails are just normal images resized using CSS – it is why the big ones are loading so fast.
Love it, but it if the back button is hit, you go to the previous image. Depending on the situation, that may or not be a good thing. I can see this being really useful in a separate window / modal window type of situation. Very cool though!
set history to false, and it will stop doing that.
I have tested it on one of my pages but I think that it is useless in gallery bigger than 10 high quality photos – in that case the website is loading too long.
Very nice. Nice and smooth :)
How can i use this gallery without any thumbnails? Just the large picture and “next / prev”
Somebody? :)
When you declare your <ul>, try adding some inline css, like <ul style=”display:none”>
Is it possible to include links in photo captions?
I tried changing all symbols to < and > but it didn’t work…
Hi, I have a php integrated website and I linked the images with a database everything is all fine except that when we click on the picture the URL is changing and showing all the full path to the images.. that is a problem for security reasons.. any way to make that encrypted or something??
thanks in advance..
So.. Would I be allowed to use this on a website?? Also, in a nutshell, what does the GPL kinda mean?
I am new to coding and i have the Galleria 1.0b with thumbnails at the bottom of the main large photo. I would like to know how can i move the thumbnails to the top so when there are clicked, the large photot appear at the bottom of the thumbnails.
Much apperciated if you can tell me how this can be done and where to put the coding. If you can also let me know how can i make the tranaction between the photos smoothers. My coding as follows;
var INTERVAL = 2000;
var slideshow_timer = null;
var is_sliding = null;
function slideShow()
{
is_sliding = true;
$.galleria.next();
is_sliding = false;
}
if (is_sliding== null)
{
slideshow_timer = window.setInterval(slideShow, INTERVAL);
is_sliding = false;
} else if (!is_sliding)
{
window.clearInterval(slideshow_timer);
slideshow_timer = null;
}
$(document).ready(function(){
$(‘.gallery_demo_unstyled’).addClass(‘gallery_demo’); // adds new class name to maintain degradability
$(‘ul.gallery_demo’).galleria({
history : false, // 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
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.3);
// 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.3′;
// 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.3); } // don’t fade out if the parent is active
)
}
});
});
/* BEGIN DEMO STYLE */
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{font-style:italic;color:#887;}
.demo{
position:relative;
float: right;
width: 600px;
}
.gallery_demo{
width:600px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.gallery_demo li{width:68px;height:50px;border:3px double #111;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{
height:435px;
width:580px;
background:black;
margin-top: 0;
margin-bottom: 60px;
float: left;
}
#main_image img{
margin-bottom:10px;
float: right;
}
.nav{padding-top:15px;clear:both;font:80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}
.info{
text-align:left;
width:600px;
border-top:1px dotted #221;
padding-top:30px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
.info p{margin-top:1.6em;}
<body.
Site:
« previous | next »
I am using Galleria 1.0b and want the thumbnails and the photo title caption on top, rather than the bottom of the main large display photo. I am new to coding. Much apperciated any help
very beautiful and simple of picture gallery gerat