Susan Susan - 4 years ago 139
ASP.NET (C#) Question

jquery modal dialog open image onclick with multiple images

There are a number of thumb images and I want the modal dialog to open with the full-size image onclick. I want to dynamically pass the 'src' of the full-size image to the 'dialog' div 'src'

C# code:

<div id="dialog" title="American Lady Caterpillar">
<img id="myImage" src="../Images/Caterpillar/Cat_AmericanLady.jpg" style="vertical-align: top; padding: 0px 10px 10px 2px;" />
</div>


<table id="cat_tbl">
<tr>
<td class="cat_colwidth">
<img class="imgLink" src="../Images/Caterpillar/Cat_AmericanLady_Thumb.jpg" style="float:left; padding: 0px 10px 10px 2px;" />
<span class="cat_bold">Genus</span>: Vanessa &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="cat_bold">Species</span>: virginiensis <br />
<span class="cat_bold">Common Name: American Lady<br />
<span class="cat_bold">Group</span>:</span> Brushfoots<br />
<span class="cat_bold">Host Plants</span>: Sweet everlasting, Pearly everlasting, Plantain-leaved pussy toes, and Ironweed
</td>
</tr>
<tr>
<td class="cat_colwidth">
<img class="imgLink" src="../Images/Caterpillar/Cat_Viceroy_Thumb.jpg" style="float:left; padding: 0px 10px 10px 2px;" />
<span class="cat_bold">Genus</span>: Limenitis &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="cat_bold">Species</span>: archippus<br />
<span class="cat_bold">Common Name</span>:<br />
<span class="cat_bold">Group</span>: Admirals<br />
<span class="cat_bold">Host Plants</span>: Trees in the willow family including Willows, and Poplars and Cottonwoods
</td>
</tr>
</table>


Jquery -- so far:

<script>
$(document).ready(function() {
$('#dialog').dialog({ autoOpen: false })
$('.ui-dialog').css({
width : 600,
height: 450})
$('.imgLink').click(function () {
$('#myImage').attr('src', imgSrc);
$('#dialog').dialog('open').css({
width: 600,
height: 450
});
});
});
</script>

Answer Source

If you code is only this, the problem is here:

$('#myImage').attr('src', imgSrc);

Change to this:

$('#myImage').attr('src', $(this).attr('src').replace('_Thumb', ''));
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download