Image not showing in modal on thumbnail click

Question

When I select a thumbnail from the gallery I want the modal window to pop up and display the image inside. It pops up, but the image isn't displaying, I'm getting the 'alt' message.

Here is my HTML and javascript.

 $("#pop").on("click", function () { $('#modalPreview').attr('src', $('#imageresource').attr('imagesrc')); $('#imageModal').modal('show'); }); 

 <div id="row"> <div id="sortable"> @foreach (var image in Model.Images) { @*<li>this is an image</li>*@ <div class="col-sm-6 col-md-4"> <div class="thumbnail"> @{ var base64 = Convert.ToBase64String(image.ImageThumbnail); var thumbSrc = String.Format("data:image/gif;base64,{0}", base64); var base64Modal = Convert.ToBase64String(image.Image); var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal); } <a id="pop" href="" data-toggle="modal" data-target="#myModal"> <img id="imageresource" src="@thumbSrc" data-imagesrc="@imgSrcModal" alt="image not found" width="203" height="136" /> </a> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> } </div> <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <a href="" data-toggle="modal" data-target="#myModal"> <img id="modalPreview" alt="image not found" width="255" height="255" /> </a> </div> </div> </div> </div> 

Answer 1

your following line seems incorrect:

$('#modalPreview').attr('src', $('#imageresource').attr('imagesrc'));

get the data attribute, as change to

$('#modalPreview').attr('src', $('#imageresource').data('imagesrc'));
//or
$('#modalPreview').attr('src', $('#imageresource').attr('data-imagesrc'));