Question

I have a div contain the image inside it like this :

<div class="gallery clearfix"> 
<img id="medium-image" src="test.gif" alt="Product Specification" width="230" />
</div>

This is what I want to do :

<div class="gallery clearfix"> 
<a href="blahblah"><img id="medium-image" src="test.gif" 
alt="Product Specification" width="230" /></a>
</div>

This is the jquery that I tried:

<script language="javascript" type="text/javascript">
$(document).ready(function () {
 $("#gallery").click(function () { //The link that will be click 
   var path_detail = $('#medium-image').attr('src');
   $('#medium-image').wrap('<a href="' + path_detail + '" class="promotion"></a>')
 });
});
</script>

But It doesn’t appear anything like what I want. I have no idea about that. Anyone can share some idea please.

Thanks.

Answer 1

This is a bit neater than building the entire HTML string:

$(document).ready(function () {
    $("#gallery").click(function () { //The link that will be click 
        var path_detail = $('#medium-image').attr('src');
        var $a = $('<a/>').attr('href',path_detail).addClass('promotion');
        $('#medium-image').wrap($a);
    });
});