Demos

empty
Ajax
Ajax with Flash
Ajax Filtering Content #test
Ajax Filtering Content #blabla

<a href="demoSent.html" class="nyroModal">Ajax</a>
<a href="demoSent.html#test" class="nyroModal">Ajax Filtering Content #test</a>
<a href="demoSent.html#blabla" class="nyroModal">Ajax Filtering Content #blabla</a>

Ajax without closing

<a href="demoSent.html" class="nyroModal" rev="modal">Ajax without closing</a>

Image

<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>

DOM Element (hidden div)

<a href="#test" class="nyroModal">DOM Element (hidden div)</a>
<div id="test" style="display: none; width: 600px;">
  <a href="demoSent.html" class="nyroModal">Open a new modal</a><br />
  Test
</div>

Youtube Via Process Handler

<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.html">
  <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.html" target="_blank" class="nyroModal">Iframe Automatique via target=_blank</a>

<form method="post" action="demoSent.html" class="nyroModal">
  <input type="text" name="wouhou" />
  <input type="submit" value="simple form"/>
</form>
<form method="post" action="demoSent.html" class="nyroModal" target="_blank">
  <input type="text" name="wouhou" />
  <input type="submit" value="simple form in iframe"/>
</form>
<form method="post" action="demoSent.html#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.html" class="nyroModal">
  <input type="file" name="file" />
  <input type="submit" value="form with file"/>

</form>
<form method="post" enctype="multipart/form-data" action="demoSent.html#blabla" class="nyroModal">
  <input type="file" name="file" />
  <input type="submit" value="form with file Filtering Content"/>
</form>

<div id="blocker"></div>

<a href="demoSent.html" id="block">blocker Modal</a>
<script type="text/javascript">
$(function() {
  $('#block').nyroModal({
    'blocker': '#blocker'
  });
});

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.html#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>