Ajax
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>
<a href="demoSent.html" 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.html" 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.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>
blocker Modal
<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>