Change Images dynamically in lightbox using jQuery

Question

I have four links all with the same class like this

<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>
<a href="" class="learn-more">Learn More</a>

On clicking each of this link a lightbox will load. All the four links will load the same lightbox except the heading of the content in the lightbox. All the four lightboxes will have different heading, but the content are same. Also all the lightboxes will have the same product images except for the third link, which will have a different image. I need to achieve this in jQuery.

You need to make your links distinct. perhaps use href for the image location and add a name attribute or something for the header — Koenyn
– Koenyn, Commented Nov 22, 2012 at 6:45

volvgang · Accepted Answer · 2012-11-22 09:29:30Z

html:

    <a href="" class="learn-more" rel="0">Learn More</a>
    <a href="" class="learn-more" rel="1" >Learn More</a>
    <a href="" class="learn-more" rel="2" >Learn More</a>
    <a href="" class="learn-more" rel="3" >Learn More</a>
    <div class="LightBox">
    <div class="LightBox_h"><img src="image/img0.jpg">your text</div>
    <div calss="LightBox_b">your text</div>
    <div calss="LightBox_f">your text</div>
    </div><!--End LightBox-->

style:

LightBox{display:none}

query:

$('a').click(function(){
  $('.LightBox').css({'display':'block'}); 
  var i_see =  parseInt($(this).attr('rel'));        //  you can use  case 
  if ( i_see == 0){$('.LightBox_h').html('new next')}
     else if (i_see ==1){$('.LightBox_h').html('new next')}
        else if (i_see ==2){$('.LightBox_h').html('new next')}
            else if (i_see ==3){$('.LightBox_h').html('new next')}
});

some like this

or

var arr = ["img0" , "img1","img2" , "img3" ]; //sourse to img

   $('a').click(function(){
      $('.LightBox').css({'display':'block'}); 
      var i_see =  parseInt($(this).attr('rel'));       
      $('.LightBox_h img ').attr('src':'+ arr[i_see] +'); 

    });

Collectives™ on Stack Overflow

Change Images dynamically in lightbox using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related