javascript - Selecting an <iframe> inside of an <a> tag with jquery -
i have script display lightbox when thumbnail clicked, , worked pictures. realized needed videos, not pictures, though, , changes script don't seem working. how select iframe inside clicked anchor tag display video? html , jquery:
html
<div class="backdrop"></div> <div class="box"> <div class="close">x</div> <img class="big_img" src="#"> </div> <div class="container"> <ul class="body"> <li class="responsive"> <div class=image> <a href="#" class="lightbox"><img class="gallery thumbnail" src="../pics/placeholder.png"><iframe width="560" height="315" src="https://www.youtube.com/embed/uaq9-sl13zg" frameborder="0" allowfullscreen></iframe></a> <p>test</p> </div> </li> jquery
<script type="text/javascript"> $(document).ready(function() { $(".thumbnail").click(function() { var video = $("iframe",this).attr("src"); $('.big_img').attr("src",video); $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); $('.box').animate({'opacity':'1'}, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function(){ close_box(); }); $('.backdrop').click(function(){ close_box(); }) }); function close_box() { $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){ $('.backdrop, .box').css('display', 'none'); }); } </script>
Comments
Post a Comment