How to assign image in HTML file

Question

i am using following way to open the image in light box but it opens the image which is selected i want that when i click any image it should open another images how to do this

<script type="text/javascript" >
    $(document).ready(function(){
        $(".linkbutton").click(function(){
            var address= $(this).attr("src");
            $("#popup").fadeIn("slow");
            $("#lightbox").attr("src",address);
        });
        $("#close").click(function(){
            $("#popup").fadeOut("fast");
        });
    });
</script>

Following in body

<div>
    <img src="image/smallicon_2.png" class="linkbutton">
</div> 

<div id="popup">
    <div id="center">
        <img id="lightbox" src="image/popup_page_1.png" >
        <img id="close" src="images/close.png" alt="close" >
    </div>  <!-- #center --> 
</div>

Niet the Dark Absol · Accepted Answer · 2012-04-23 11:24:05Z

1

Add an attribute in the image element to reference the new image:

<img src="image/smallicon_2.png" class="linkbutton" data-light="image/bigimage_2.png" />

Then replace:

var address= $(this).attr("src");

with:

var address= $(this).attr("data-light");

answered Apr 23, 2012 at 11:24

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2012-04-23 11:22:14Z

0

Change the line that determines the src of the image

var address= $(this).attr("src");

So it uses the src of the image you want.

answered Apr 23, 2012 at 11:22

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Jackson J Over a year ago

i am using this code for 3 image like i have two button and for each i want different so how will i aasing in this it will get only for one image

Collectives™ on Stack Overflow

How to assign image in HTML file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related