Hi there!
i try to create a previous/next-link in my thumbnail gallery.
the gallery is created by an cms, and provides a certain amount of
thumbnails which link to a big image, which will then be shown when the
thumb is clicked.
i got it working so far that the big image fades in, a fade effect for
hovering the thumbs and displaying a loading gif...but i'm stuck with
creating a prev/next-link. i was searching and trying to find a solution
without success (i'm a noob, btw), so i thought maybe this has been done
over and over before, and somebody here can help me out, maybe sharing some
code or pointing me in the right direction. i got a hint btw. what needs to
be done, but since i'm new to this, it didn't help me.
he told me:
Quote:
You need to write a js code that collects all thumbnails to an array and
then do js functions for prev and next links. In that function you check
what is currently displayed in the picture container, find the same from the
array that holds all thumbnails and then call the image change function with
the information of the next/prev image.
the js is:
Code:
//<![CDATA[
$(document).ready(function(){
$(".hoverthumb").hover(function(){
$(this).fadeTo("fast", 0.6); // This sets the opacity to 60% on hover
},function(){
$(this).fadeTo("fast", 1.0); // This sets the opacity back to 100% on
mouseout
});
});
function showPic(url,title,descr,width,height) {
$("#maxImage").fadeOut("slow", function(){
var image = new Image();
$(image).load(function() {
$(this).hide();
// with the holding div #loader, apply:
$('#picturecontainer')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
$("#maxImage").attr({
src: url,
width: width,
height: height
});
$("#maxImage").fadeIn("fast");
$("#maxTitle").html(title);
$("#maxDescr").html(descr);
$('#picturecontainer').addClass('loading')
});
$(image).attr({src: url, width: width, height: height});
});
}
//]]>
</script>
#maxImage is the id of the big image
#picturecontainer & .loading are the id & class of the div wrapping
the big image
.hoverthumb is the class of every div holding a thumbnail
and javascript:showPic is inserted to the thumbnail link like this:
Code:
href="javascript:showPic ('/linktopicture/picture.JPG','','',225,300)
thank you & best regards, j
--
View this message in context:
http://www.nabble.com/Thumbnail-Gallery---previous-next-link-tp20989009s27240p20989009.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
