Ajax
Ajax with Flash
Ajax Filtering Content #test
Ajax Filtering Content #blabla
<a href="demoSent.php" class="nyroModal">Ajax</a> <a href="demoSent.php#test" class="nyroModal">Ajax Filtering Content #test</a> <a href="demoSent.php#blabla" class="nyroModal">Ajax Filtering Content #blabla</a>
<a href="demoSent.php" class="nyroModal" rev="modal">Ajax without closing</a>
<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>
Gallery Img 1
Gallery Img 2
Gallery Img 3
<a href="img/img1.jpg" id="imgFiche" class="nyroModal" title="UCLA" rel="gal">Gallery Img 1</a> <a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade by Night" rel="gal">Gallery Img 2</a> <a href="img/img3.jpg" class="nyroModal" title="Sunset at Santa Monica" rel="gal">Gallery Img 3</a>
<a href="#test" class="nyroModal">DOM Element (hidden div)</a> <div id="test" style="display: none; width: 600px;"> <a href="demoSent.php" class="nyroModal">Open a new modal</a><br /> Test </div>
<script type="text/javascript"> $(function() { $.fn.nyroModal.settings.processHandler = function(settings) { var from = settings.from; if (from && from.href && from.href.indexOf('http://www.youtube.com/watch?v=') == 0) { $.nyroModalSettings({ type: 'swf', height: 355, width: 425, url: from.href.replace(new RegExp("watch\\?v=", "i"), 'v/') }); } }; }); </script> <a href="http://www.youtube.com/watch?v=lddUnv1R5y0" class="nyroModal">Youtube Via Process Handler</a>
Manual Call
Manual Call calling through an other link
<script type="text/javascript"> $(function() { $('#manual').click(function(e) { e.preventDefault(); var content = 'Content wrote in JavaScript<br />'; jQuery.each(jQuery.browser, function(i, val) { content+= i + " : " + val+'<br />'; }); $.fn.nyroModalManual({ bgColor: '#3333cc', content: content }); return false; }); $('#manual2').click(function(e) { e.preventDefault(); $('#imgFiche').nyroModalManual({ bgColor: '#cc3333' }); return false; }); $('#myValidForm').submit(function(e) { e.preventDefault(); if ($("#myValidForm :text").val() != '') { $('#myValidForm').nyroModalManual(); } else { alert("Enter a value before going to " + $('#myValidForm').attr("action")); } return false; }); }); </script> <a id="manual" href="#">Manual Call</a> <a id="manual2" href="#">Manual Call calling through an other link</a> <form id="myValidForm" method="post" action="demoSent.php"> <input type="text" name="wouhou" /> <input type="submit" value="simple form with validation" /> </form>
Automatic Iframe via other hostname
Automatic Iframe via target=_blank
<a href="http://www.perdu.com/" class="nyroModal">Iframe Automatique via other hostname</a> <a href="demoSent.php" target="_blank" class="nyroModal">Iframe Automatique via target=_blank</a>
<form method="post" action="demoSent.php" class="nyroModal"> <input type="text" name="wouhou" /> <input type="submit" value="simple form"/> </form> <form method="post" action="demoSent.php#test" class="nyroModal"> <input type="text" name="wouhou" /> <input type="submit" value="simple form Filtering Content"/> </form>
<form method="post" enctype="multipart/form-data" action="demoSent.php" class="nyroModal"> <input type="file" name="file" /> <input type="submit" value="form with file"/> </form> <form method="post" enctype="multipart/form-data" action="demoSent.php#blabla" class="nyroModal"> <input type="file" name="file" /> <input type="submit" value="form with file Filtering Content"/> </form>
Non existent URL
Non existent Image
Non existent Element ID
Non existent Element ID in Ajax Request
<a href="invalidUrl.php" class="nyroModal">Non existent URL</a><br /> <a href="invalidUrl.jpg" class="nyroModal">Non existent Image</a><br /> <a href="#inexistent" class="nyroModal">Non existent Element ID</a><br /> <a href="demoSent.php#inexistent" class="nyroModal">Non existent Element ID in Ajax Request</a>
Preloading Images is not considered to be a part of the plugin, as you probably need to preload other images for your website.
If you need to do so, you can use this code:
<script type="text/javascript"> $(function() { function preloadImg(image) { var img = new Image(); img.src = image; } preloadImg('img/ajaxLoader.gif'); preloadImg('img/prev.gif'); preloadImg('img/next.gif'); }); </script>