Implementing SexyLightbox in Blogger



SexyLightBox is a clone of classic Lightbox , but it's more sexier and lightweight than the classic LightBox. It was built for web designers , so it is really easy to install and use.

SexyLightBox supports all sorts of images of different sizes, HTML elements and Now Area maps . The images larger than the browser, are adjusted automatically to see them completely. I really like the bouncy effect when the box comes out and resizes.

SexyLightBox Compatible with Mootools 1.2.2 or jQuery 1.3.2 and All modern browsers like Internet Explorer.This tutorials explains about the jQuery version.

Note: This tutorial requires that you either have a free Dropbox account or some other file hosting which provides a folder options.






             

Steps to Add it to Blogger:


1.Login to the Blogger account.


2. Now Go to Design > Edit HTML.


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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.min.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.css" media="all" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexyimages/'});

    });

  
</script>

As you see the "dir:" in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present

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



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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.min.js" type="text/javascript">
</script>
<link href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexylightbox.css" media="all" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
    $(document).ready(function(){

      SexyLightbox.initialize({color:'black', dir: 'http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/sexyimages/'});

    });

  
</script>
As you see the "dir:" in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present



4.Now for adding the images into SexyLightbox ,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 border="0" height="90" src="/small3.jpg" width="120" /></a>


Make it like this 




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

As you see we only added a rel="sexylightbox" 


Similarly if you want to add Galleries then each element of the Gallery should have have this kind of a rel tag:



rel="sexylightbox[GalleryName]"


Some Example Code:

Single 
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="sexylightbox" title="Puente de la Mujer - Buenos Aires - Argentina">
<img alt="" height="112" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="200" />
</a>


Gallery
<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="sexylightbox[group1]" title="PHP y MySQL">
<img alt="" height="112" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="200" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/2.png" rel="sexylightbox[group1]" title="D'oh!"><img alt="" height="112" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="200" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="sexylightbox[group1]" title="Clap clap!"><img alt="" height="112" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="200" /></a>

Animated GIFS
<a href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/images/yo.gif" rel="sexylightbox">
<img alt="" src="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/images/yo.jpg" />
</a>

IFrame
<a href="http://www.google.com/?TB_iframe=true&amp;height=450&amp;width=800" rel="sexylightbox">Gooooogle</a>&nbsp;{height-450,width-800}

AJAX
<a href="http://dl.dropbox.com/u/27675057/Needeed/sexy-lightbox-2.3.4/sexy-lightbox-2.3/jQuery/demo-shake.html?height=140&amp;width=480" rel="sexylightbox" title="Contenido cargado via AJAX.">Get data</a>&nbsp; &nbsp;&lt;Dont Click this ,If U will click then I suggest Please use your&nbsp;Browsers REFRESH BUTTON to return to normal&gt;

Youtube Video
<div id="videito2" style="display:none;">
<object width="530" height="260"><param name="movie" value="http://www.youtube.com/v/WyA1dzfKywg&hl=es&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/WyA1dzfKywg&hl=es&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="530" height="260"></embed></object></div>
<a href="#TB_inline?height=260&width=530&background=#000&inlineId=videito2" rel="sexylightbox">Play Video Rambo Extreme Masacre</a>


Divs
<div id="myOnPageContent">

<p>

The <b>Audi R8</b> is a mid-engined sports car introduced by the German automaker Audi in 2006. The R8 is based on the "Audi Space Frame", largely derived from the Lamborghini Gallardo. It is built in a newly renovated factory by Audi AG's wholly owned high performance private subsidiary company, quattro GmbH.</p>

</div>
<a href="#TB_inline?height=125&width=500&inlineId=myOnPageContent" rel="sexylightbox[22]" title="<em>From <a href='http://en.wikipedia.org/wiki/Audi_R8' rel='nofollow'>Wikipedia</a>, the free encyclopedia.</em>">Show HTML</a>



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 !


             



Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

i cant download it... it says some error... check it...

@Em Ji Madhu
Check it out now, its working

Anonymous said...

i added this to HTML/Java script.after add this gadget my slider did't work..
why is that?