|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <!-- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> --> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css"> <script> $(document).ready(function(){ $(function () { var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>'); var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({ autoOpen: false, modal: true, resizable: true, width: "auto", height: "auto", close: function () { iframe.attr("src", ""); } }); $(".thumb a").on("click", function (e) { e.preventDefault(); var src = $(this).attr("href"); var title = $(this).attr("data-title"); var width = $(this).attr("data-width"); var height = $(this).attr("data-height"); iframe.attr({ width: +width, height: +height, src: src }); dialog.dialog("option", "title", title).dialog("open"); }); }); }); </script> <ul class="thumb"> <li><a href="http://wwww.codehaven.co.uk/posttest.php/" data-title="Add Your Own Source Code" data-width="512" data-height="520"><img src="http://dummyimage.com/120x90/000/f00&text=Std+4-3+ratio+video" /></a></li> </ul> <style> body { font: 10px sans-serif; } </style> |
