30 Jun 2011
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.
As you see the "dir:" in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present
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>
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">As you see the "dir:" in the above JavaScript snippet points to the address where the Next ,Previous ,etc button images are present
</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>
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> <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> <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&height=450&width=800" rel="sexylightbox">Gooooogle</a> {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&width=480" rel="sexylightbox" title="Contenido cargado via AJAX.">Get data</a> <Dont Click this ,If U will click then I suggest Please use your Browsers REFRESH BUTTON to return to normal>
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.
Til next time,
Prayag Verma
at 11:20
