I am currently developing a div that will contain up to 4 Media type divs. The media types include images, PDFs, and Youtube videos.
The code I currently have running creates the divs as imgs if possible. If it is not possible(youtube videos/pdfs) it opens them as IFrames.
As of now, the user is able to click on the imgs which launches a modal. However, I am unable to to get the IFrames to show the modal.
Here is my code
HTML - Modal
<!-- Modal -->
<div id="mediaModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">title</h4>
</div>
<div class="modal-body">
<p>here would be the description</p>
</div>
<div class="modal-media">
<p>here is the media</p>
</div>
<div class="modal-footer">
<p>here would be the credits
</div>
</div>
</div>
</div>
Here is my javascirpt
//this creates img/iframes dynamcially and throws them into a media-container div
var source = null;
//if it is not a youtube video/pdf/txt, put it in a img tag
if( null == ( media[1].match(/pdf/i) || media[1].match(/txt/i) || media[1].match(/youtube.com/) ) )
{
source = "<img data-toggle='modal' data-target='#mediaModal' id='m" + i + "'src='"+ media[1] + "'<img>";
}
else //throw it in a iframe tag
{
source = "<iframe data-toggle='modal' data-target='#mediaModal' class='modz' id='m" + i + "'src='"+ media[1] + "'></iframe>";
}
var div = $(source);
$("#media-container").append(div);
I tried adding a class to the iFrame and adding an onClick method, but it does not seem like the IFrame is picking up a click.
//opens a modal box for IFrame media.
$(".modz").on("click", function(e){
console.log("BING");
$("#mediaModal").modal('show');
});
Any help would be awesome. Thank you!
