CODEWITHSUNDEEP
javascriptjqueryhtmlcsscolorbox
Glen Robson
Glen Robson

Reputation: 938

dynamic image changing in colorbox

Im working on the products page or an ecommerce site and currently there are 3 small images and one large image. the three small images are clickable and when the user clicks one of the images the larger image is changed to show that image using:

onMouseDown="document.Image.src=/img1.jpg;"

This works fine. The trouble I am having is when trying to link this with colorbox. What I would like to do is for the user to click one of the smaller images and then the larger image is loaded then when they click that larger image the colorbox function is called and the image is shown in the colorbox popup. Is there anyway to do this?

Currently my code shows as follows:

jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true}); 

<a class="largeImgPop" href="/img1.jpg">1</a>
<a class="largeImgPop" href="/img1.jpg">2</a>
<a class="largeImgPop" href="/img1.jpg">3</a>

<img src="/img1.jpg" name="Image" alt="Image 1" />

Is this possible?

Upvotes: 0

Views: 901

Answers (2)

typeslower
typeslower

Reputation: 26

A couple of things.

Why not skip right to the colorbox after clicking the small image?

But assuming you have one large placeholder image and several thumbnails swapping them, this is how I would do it.

Give this an id. You can set the size to whatever you need.

<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" />

Try using the .click() && .live() functions with jquery. Note: live() has been deprecated in later versions of jquery. try using on() if that doesn't work.

 $(function(){ 
    $('.largeImgPop').click(function(){
        var img = $(this).attr('src');
        $('#mainImg').attr("src", img);
    });
    $('#mainImg').live('click',function(){
        $(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
    });

});

I don't know if this will work...also I don't know why you would load one image to another. You never specified your image directory structure. You could add rel="/images/larger/img1.jpg" and get that.

And change to.

var img = $(this).attr('rel');
$('#mainImg').attr("src", img);

Upvotes: 1

Bernardao
Bernardao

Reputation: 500

<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>

Upvotes: 0

Related Questions