jquery gallery

[Violet_82]

Hi peeps, I was thinking to develop something similar to this http://www.toyota.co.uk/cgi-bin/toyota/bv/generic_editorial.jsp?navRoot=toyota_1024_root&noLeftMenu=true&edname=See-the-range&zone=Zone+See+the+Range&id=SeeTheRange_Link

It is in flash now, and I would like to have something similar in jquery, what would be the best way to proceed do you think? Any advice?
thank you

[pritaeas]

If you want something out-of-the-box, have a look at HighSlide. Here is an example. If you want to write your own, perhaps the code will get you started.

There's also this thread, the link shows a similar gallery.

[Violet_82]

hi well, unfortunately I have to do it myself, can't use an out of the box product, and besides, this will help me understand it better.
Now here's the problem: http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test.htm

Not only the images need to change but also the paragraphs related to the images. Now could anybody help me to understand how I need to set up the script please? I started off with jquery but I am not entirely sure how to continue it. The idea is that when I click on a thumbnail in thumb_images div

<div class = "big_image">
            <img src="placeholder.jpg" alt="" class="show_image">
            <img src="test1.jpg" alt="" class="hide_image">
            <img src="test2.jpg" alt="" class="hide_image">
            <img src="test3.jpg" alt="" class="hide_image">
        </div>
        <div class="thumb_box">
            <ul class="thumb_images">
                <li><a href="#"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
                <li><a href="#"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
                <li><a href="#"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
            </ul>
        </div>

the big image in the big_image div changes from default to whathever I clicked on, probably changing the class from show_image to hide_image. Same principle for the paragraphs:

<div>
            <p>This paragraph is the default</p>
            <p class="hide_paragraph">This paragraph comes in with image 1</p>
            <p class="hide_paragraph">This paragraph comes in with image 2</p>
            <p class="hide_paragraph">This paragraph comes in with image 3</p>
        </div>

I have preloaded the images in the script

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var.pic3 = new Image();
pic3.src = "test3.jpg";

$(document).ready(function(){

    $("thumb_images li a").click(function(){

        $("big_image img").fadeOut(1000, function(){



        });

    });

});

and now I need a way to say when I click on the thumb $("thumb_images li a").click(function(){ thenget whatever big image is there and replace with the one the thumb represents...

[Violet_82]

I mean, at the end of the day it doesn't matter if I use javascript or jquery. I have a little script that works to an extent and seems better than jquery, unfortunately I can't find a way to change more than 1 image...

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var pic3 = new Image();
pic3.src = "test3.jpg";

function changeImage(){
    var theImage = document.getElementById("placeholder_image");
    theImage.src = pic1.src;

}

[Violet_82]

hi I think Im slowly getting there, here's the link http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/working/test.htm

Here's what I have done:
html

<div>
            <p>This paragraph is the default</p>
            <p class="hide_paragraph">This paragraph comes in with image 1</p>
            <p class="hide_paragraph">This paragraph comes in with image 2</p>
            <p class="hide_paragraph">This paragraph comes in with image 3</p>
        </div>
        <div class = "big_image" id="big_image">
            <img src="placeholder.jpg" alt="" id="placeholder_image">
            <img src="test1.jpg" alt="" class="hide_image">
            <img src="test2.jpg" alt="" class="hide_image">
            <img src="test3.jpg" alt="" class="hide_image">
        </div>
        <div class="thumb_box">
            <ul class="thumb_images">
                <li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
                <li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
                <li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test3.jpg')">Thumb3</a></li>
            </ul>
        </div>

javascript

function changeImage(image){

    var theImage = document.getElementById("placeholder_image");
    theImage.src = image;   

}

CSS

.big_image{
    border:1px solid red;
    width:700px;
    height:525px;
    margin:0 auto;
}

.thumb_images{
    list-style:none;    
}

.thumb_images li{
    float:left;
    padding:15px;
}

.thumb_images li img{
    display:block;
}


body{
    background-color:pink;
}

.thumb_images li a img{
    border-style:none;
}

.thumb_images li a{
    text-decoration:none;
}

.thumb_images li a:hover{
    color:red;
    text-decoration:underline;
}

.hide_image{
    display:none;
}

.show_image{
    display:block;
}

.hide_paragraph{
    display:none;
}

.show_paragraph{
    display:block;S
}

I used only javascript. I don't want to give you the impression that I am changing my mind all the time, only, I am trying to get the best solution that works for me and that I can understand.
Now, the images change, which is great, but I am having trouble changing the associated paragraphs. At the moment there is a function call from the html:

<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
        ...

I need a way to pass the paragraph to the function, so I wonder would something like this be acceptable:
<li><a href="#"><img src="test1_thumb.jpg" alt=""onclick="changeImage('test1.jpg',p:first)">Thumb1</a></li>

thanks

[pritaeas]

Wouldn't it be easier to give the paragraph a class-name that matches the image name (without .jpg) ?

Wouldn't it be easier to use changeImage(this) so in your function you will already have the image (and src) you clicked?

Here's how you can do it with jQuery:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div>
            <p>This paragraph is the default</p>
            <p class="hide_paragraph test1">Test image 1</p>
            <p class="hide_paragraph test2">Test image 2</p>
            <p class="hide_paragraph test3">Test image 3</p>
        </div>
        <div class="big_image">
            <img src="placeholder.jpg" alt="" class="show_image">
            <img src="test1.jpg" alt="" class="hide_image test1">
            <img src="test2.jpg" alt="" class="hide_image test2">
            <img src="test3.jpg" alt="" class="hide_image test3">
        </div>
        <div class="thumb_box">
            <ul class="thumb_images">
                <li><a href="#"><img src="test1_thumb.jpg" alt="test1">Thumb1</a></li>
                <li><a href="#"><img src="test2_thumb.jpg" alt="test2">Thumb2</a></li>
                <li><a href="#"><img src="test3_thumb.jpg" alt="test3">Thumb3</a></li>
            </ul>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('li a').click(function(){
                    var alt = $(this).find('img').attr('alt');
                    $('p').hide();
                    $('p.' + alt).show();
                    $('.big_image img').hide();
                    $('.big_image img.' + alt).show();
                });
            });
        </script>
    </body>
</html>

[Violet_82]

fantastic thanks for your help. Sorry I am a bit of a beginner with jquery...!