Torbjorn Tornkvist wrote:
> Joel Birch wrote:
>> On 15/03/2007, at 7:54 PM, Hrvoje Blažeković wrote:
>>> Simple to use, I have used it on some small sites (st-georg.hr -
>>> the home page, www.podravka.com/visebojac/ - the header images)
>>> Hrvoje
>>>
>>> On 15 ožu, 2007, at 9:47, Torbjorn Tornkvist wrote:
>>>> Hrvoje Blažeković wrote:
>>>>> Hi,
>>>>> for a simple slide show try this:
>>>>>
>>>>> http://www.gizone.co.uk/web-design/jquery-plugins/simple-jquery-
>>>>> slideshow/
>> Another good plugin for this is innerFade:
>> http://medienfreunde.com/lab/innerfade/
>>
>> And another *might* just be released soon (this weekend maybe) by
>> myself.
>
> Nice! Looking forward to it.
>
> What I want to achive is to have a list of thumbnails
> at the side of a larger area were one image/photo is shown
> at a time. A click on a thumbnail should cause the new
> image to replace the old one in a smooth blending effect.
>
> I will try and see if I can cook up something based on the
> existing examples.
>
> Cheers, Tobbe
>
>
JFTR: Here is some code that solved my problem.
It also handles a caption, shown below the large image.
-------------------------------------------
var last = null;
var current = null;
// Display a large photo.
function display_large(src, cap) {
var large = '<img src="' + src + '" width="450" />';
if (current != null) {
last = current;
$(last).css({zIndex : "0"}).fadeOut("slow");
$("#caption").fadeOut("slow");
}
current = $(large);
var opts = {display : "none",
zIndex : "1",
position : "absolute"};
$(current).appendTo("#large").css(opts).fadeIn("slow", function() {
if (last != null) { $(last).remove(); }
$("#caption").html(cap).fadeIn("slow");
});
}
// Display the first thumbnail as a large photo.
$(function() {
var src = $(".thumb img:first").attr("src");
var cap = $(".thumb a:first").attr("title");
display_large(src, cap);
})
// Setup a click event handler for the thumbnails
$(function() {
$(".thumb a").click(function() {
var src = $("img:first", this).attr("src");
var cap = $(this).attr("title");
display_large(src, cap);
});
})
-------------------------------------------
Cheers, Tobbe
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
