I would say it looks nicer and loads faster than Fancybox.
Download Colorbox files
Go and get Colorbox from here. You will find several folders,
- Colorbox // Contains Colorbox JS files. Host this file to get a specific URL //
- Content // May or may not use on your trial //
- Example 1 - 5 // 5 themes included. Choose one that suit to your eyes. See the demo for each theme from their website. In this tutorial, I use example 5 (Theme no 5) //
Insert script to your template
Open template editor and find
</head>. Paste above it with this two-line code.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="YOUR COLORBOX.JS URL"></script>
or, you can try using my URL for the second line.
<script type="text/javascript" src="https://sites.google.com/site/fowziey/jquery.colorbox.js"></script> UPDATE: <script type="text/javascript" src="'http://dl.dropbox.com/u/73287739/54blogger/colorbox.css' rel='stylesheet'"></script>
Style with CSS
Then, below the two-line code, add this Colorbox CSS.
<style type='text/CSS'>
#colorbox, #cboxOverlay, #cboxWrapper {
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay {
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
clear:left;
}
#cboxContent {
position:relative;
}
#cboxLoadedContent {
overflow:auto;
}
#cboxTitle {
margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position:absolute;
top:0;
left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor:pointer;
}
.cboxPhoto {
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe {
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay {
background:#000;
}
#colorbox{}
#cboxTopLeft {
width:14px;
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 0;
}
#cboxTopCenter {
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x top left;
}
#cboxTopRight {
width:14px;
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px 0;
}
#cboxBottomLeft {
width:14px;
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter {
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x bottom left;
}
#cboxBottomRight {
width:14px;
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft {width:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -175px 0;
}
#cboxMiddleRight {
width:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -211px 0;
}
#cboxContent {
background:#fff;
overflow:visible;
}
#cboxLoadedContent {
margin-bottom:5px;
}
#cboxLoadingOverlay {
background:url(https://sites.google.com/site/fowziey/colorbox_loading_background.png) no-repeat center center;
}
#cboxLoadingGraphic {
background:url(https://sites.google.com/site/fowziey/colorbox_loading.gif) no-repeat center center;
}
#cboxTitle {
position:absolute;
bottom:-25px;
left:0;
text-align:center;
width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent {
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
position:absolute;
bottom:-29px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious {
left:0px;
background-position: -51px -25px;
}
#cboxPrevious.hover {
background-position:-51px 0px;
}
#cboxNext {
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover {
background-position:-75px 0px;
}
#cboxClose {
right:0;
background-position:-100px -25px;
}
#cboxClose.hover {
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow {
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover {
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow {
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover {
background-position:-125px 0px;
}
</style>
Fire Colorbox using jQuery selector
Next, paste the code below the CSS.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("a.color-elastic").colorbox();
$("a.color-fade").colorbox({transition:"fade"});
$("a.color-slideshow").colorbox({slideshow:true});
$(".color").colorbox();
$(".color-video").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".color-iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".color-inline").colorbox({width:"50%", inline:true, href:"#Description"});
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
//]]>
</script>
Set your links to Colorbox
Now, to add the function to your single image/content just add class to a tag which matched with Colorbox selector eg [class='color'], and add rel when use for a group of images/contents eg [class='color' rel='group1'].
Code for Single Image
<a class='color' href="IMAGE URL" title="IMAGE CAPTION">
<img height='90' width='120' src="IMAGE URL"/>
</a>
Code for Gallery with elastic effect
<a class="color-elastic" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-elastic" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a>
Code for Gallery with fade effect
<a class="color-fade" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-fade" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a> <a class="color-fade" href="IMAGE_03 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_03 URL" width="120" /> </a>
Slideshow
<a class="color-slideshow" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"> <img height="90" src="IMAGE_01 URL" width="120" /> </a> <a class="color-slideshow" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"> <img height="90" src="IMAGE_02 URL" width="120" /> </a> <a class="color-slideshow" href="IMAGE_03 URL" rel="GALLERYTITLE" title="IMAGE_03 CAPTION"> <img height="90" src="IMAGE_03 URL" width="120" /> </a>
Code for Youtube/Vimeo
<!--For Youtube--> <a class='color-video' href="YOUTUBE EMBED CODE URL" title="VIDEO TITLE"> <img border='0' height='90' width='120' src="YOUTUBE LOGO URL"/> </a> <!--Same for Vimeo--> <a class='color-video' href="VIMEO EMBED CODE URL" title="VIDEO TITLE"> <img border='0' height='90' width='120' src="VIMEO LOGO URL"/> </a> <!--OR use simple link--> <a class='color-video' href="YOUTUBE/VIMEO EMBED CODE URL" title="VIDEO TITLE">WATCH THE VIDEO</a>
Code for Inline Content
Here, you need 2 main elements inside your html.
- A link that can be clicked to bring the popup
- Some contents that can be shown in the pop-up // Hidden element //
<a class="color-inline" href='#Description'>Upin and Ipin, who are they?</a> <div style='display:none'> <div id='Description' style='padding:10px; background:#fff;'> <p>Lorem ipsum dolor sit amet, ullamcorper adipiscing meus incassum, paulatim abigo erat, tation populus, melior nulla immitto hendrerit. Pneum abigo magna blandit diam ad commoveo. In in neque tum tum, esca, quis nisl. </p> </div> </div>
Code for Iframe
<a class="color-iframe" href='WEB URL'>CLICK HERE</a>
Happy coding!...and Blogging!
