Galleria

Any way to customize the thumbnails so they automatically horizontally scroll if you have too many images?

Those thumbnails are just normal images resized using CSS – it is why the big ones are loading so fast.

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

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 »

very beautiful and simple of picture gallery gerat