CODEWITHSUNDEEP
javascriptjquery
Vinicius Santana
Vinicius Santana

Reputation: 4106

Making a simple Image Switcher

I know that there are many jQuery scripts ready to implement something like this here that I'm trying to pull together, but I want to make it as simple as possible. Basically when each image thumb of the list is clicked the main image shows the respective image just only bigger.

So, here is my question. Does anyone have a simple script that does that?

        <div class="main_image">
           <img src="<?=href['imagem'];?>" /> 
        </div>

        <ul>

            <li>
                <a href="img01.jpg"><img src="img01.jpg" alt="Image Name" /></a>
            </li>
            <li>
                <a href="img02.jpg"><img src="img02.jpg" alt="Image Name" /></a>
            </li>
        </ul>

Upvotes: 1

Views: 1973

Answers (2)

mrtsherman
mrtsherman

Reputation: 39902

Pretty simple, you can actually simplify your code a bit.

http://jsfiddle.net/yeGxq/

<div class="main_image">
   <img id="main" src="" /> 
</div>

//dont put <a> tags around images because you will just need to cancel navigation    
<ul>
    <li>
        <img src="http://placehold.it/200x300" alt="Image Name" />
    </li>
    <li>
        <img src="http://placehold.it/300x400" alt="Image Name" />
    </li>
</ul>

//when a list item image is clicked, take your main image and change its src attr
$('li img').click( function() {
    $('#main').attr('src', $(this).attr('src'));
});

Upvotes: 3

Sina Fathieh
Sina Fathieh

Reputation: 1725

it's pretty easy, you can store your thumbnails in a folder called "small" and large images in "large" and then you have something like : 

<ul>

    <li>
        <img class="small" src="small/img01.jpg" alt="Image Name" />
    </li>
    <li>
        <img class="small" src="small/img02.jpg" alt="Image Name" />
    </li>
</ul>
<div class="main_image">
   <img id="large" src="" /> 
</div>

and then write something like this : 

$(".small").click(function(){
var src = $(this).attr("src").replace("small","large");
$("#large").attr("src",src);
})

Upvotes: 3

Related Questions