CODEWITHSUNDEEP
jquery
BobRock
BobRock

Reputation: 3467

on page load clone first image from collection of photos

On my page I'm getting collection of photos, and I store them as thumbs below showImage div which needs to be refreshed with cloned image onclick. Basically everything is ok except I need to populate this showImage div onpage load with first image, and then to use this onclick clone which already works.

<a href="/Property/GetImage/someIntId">
  <img id="someIntId" class="details" width="100" height="100" src="/Property/GetImage/7" alt="">
</a>

function onPopUp() {
        $(".details").click(function (event) {
            //clone the clicked image
            var clone = $(this).clone();
            clone.height("250px").width("280px");
            //place it in the placeholder
            $('div#showImage').html(clone);
        });
    }

Upvotes: 0

Views: 269

Answers (1)

Kyle
Kyle

Reputation: 3042

Perhaps this is what your looking for?

http://www.w3schools.com/jsref/event_body_onload.asp

<html>
<head>
<script type="text/javascript">
function onPopUp() {
    $(".details").click(function (event) {
        //clone the clicked image
        var clone = $(this).clone();
        clone.height("250px").width("280px");
        //place it in the placeholder
        $('div#showImage').html(clone);
    });
}
</script>
</head>

<body onload="onPopUp()">
<a href="/Property/GetImage/someIntId">
   <img id="someIntId" class="details" width="100" height="100" src="/Property/GetImage/7" alt="">
</a>
</body>
</html>

OR, do you use jQuery?

$(document).ready(function(){
   function onPopUp() {
    $(".details").click(function (event) {
        //clone the clicked image
        var clone = $(this).clone();
        clone.height("250px").width("280px");
        //place it in the placeholder
        $('div#showImage').html(clone);
    });
}
});

Upvotes: 1

Related Questions