02 Jul 2011

Implementing NyroModal in Blogger

             

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

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>

             

Til next time,
Prayag Verma at 17:12