Implementing NyroModal in Blogger

NyroModal is a simple jQuery plugin that implements a complex modal window system

The modals are able to load content such as inline HTML, AJAX calls, iframes with external links, images, gallery sets, external Flash and much more.
Here are some key features of "NyroModal":
· Ajax Call
· Single Image
· Images Gallery with arrow navigating
· Form
· Form in iframe
· Iframe

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/jquery.nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">
$(function() {
  $('.nyroModal').nyroModal();
});
</script>

2.Go to the Post/Page you want to add NyroModal and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link rel="stylesheet" href="http://dl.dropbox.com/u/27675057/jquery.nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nyroModal/js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->

Now search for the </body> tag and paste the following code just Above/Before it.

<script type="text/javascript">
$(function() {
  $('.nyroModal').nyroModal();
});
</script>

4.Now for adding the images into NyroModal ,Firstly add the image normally using Insert Imagebutton


Now When you see the code in the edit HTML window it would be something like this

<a href="large3.jpg"><img height="90" src="/small3.jpg" width="120" /></a>

Make it like this 

<a class="nyromodal" href="large3.jpg"><img border="0" height="90" src="/small3.jpg" width="120" /></a>

As you see we only added a class="nyromodal"


If you want to add a Gallery then Here is the Code:



<a href="9.jpg" id="imgFiche" class="nyroModal" rel="galleryName">Gallery Img 1</a>
<a href="29.jpg" class="nyroModal"  rel="galleryName">Gallery Img 2</a>

As you see we only added a rel tag accompanying the class tag.


Some Example Codes:

Single
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>

Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" id="imgFiche" class="nyroModal" title="UCLA" rel="gal">Gallery Img 1</a>
<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" class="nyroModal" title="3rd Street Promenade by Night" rel="gal">Gallery Img 2</a>
<a href="http://www.youtube.com/watch?v=lddUnv1R5y0" class="nyroModal" rel="gal" title="Hockey Goal fight">Youtube in gallery</a>

<a href="http://dl.dropbox.com/u/27675057/2.png" class="nyroModal" title="Sunset at Santa Monica" rel="gal">Gallery Img 3</a>


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

Test
</div>

Youtube:Via Embedly Filter
<a href="http://www.youtube.com/watch?v=lddUnv1R5y0" class="nyroModal">Youtube (Via Embedly filter)</a>

<a id="manual1" href="#">Manual Call to get an ajax content</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>
<script type="text/javascript">
$(function() {
  $('#manual1').click(function(e) {
    e.preventDefault();
    $.nmManual('demoSent.php');
  });
  $('#manual2').click(function(e) {
    e.preventDefault();
    $('#imgFiche').nmCall();
  });
  var validForm = $('#myValidForm').submit(function(e) {
    e.preventDefault();
    if (validForm.find(':text').val() != '') {
      validForm.nyroModal().nmCall();
    } else {
      alert("Enter a value before going to "   validForm.attr("action"));
    }
  });
});
</script>

Iframe
<a href="http://www.perdu.com/" class="nyroModal">Iframe Automatique via other hostname</a>
<a href="demoIframe.php" target="_blank" class="nyroModal">Iframe Automatique via target=_blank</a>


Non Existent
<a href="invalidUrl.php" class="nyroModal">Non existent URL</a>

<a href="invalidUrl.jpg" class="nyroModal">Non existent Image</a>

<a href="#inexistent" class="nyroModal">Non existent Element ID</a>

<a href="demoSent.php#inexistent" class="nyroModal">Non existent Element ID in Ajax Request</a>

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

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.