Colorbox Jquery in Blogger Lightbox Alternative

Colorbox jQuery application lightbox is a very successful alternative. Application of various versions of previously colorbox told blogger integration process. Application developers have been working very well Colorbox jQuery and are constantly updated. Each new version is further enhanced optimization.

I published my writings in Turkish blog (www.teknomobi.net) and I'm very happy using Colorbox application. Users can also use for novice blogger who I do expression.

Wordy blogger platform integrated into the application and use colorbox tell methods.

Describes five different types of application separately Colorbox will. First, I will at the beginning of explanation: I recommend you take a look at the demo. So you may decide to use which kind of colorbox.

After the application code Colorbox types of images, video, or you can use links within the page also will describe the code. Please give example from 1 until 5 of the example of my code wait. The last course I will tell them ...

Colorbox Example1

Visit to Colorbox Example1 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example1/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#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>

Colorbox Example2

Visit to Colorbox Example2 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example2/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#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>

Colorbox Example3

Visit to Colorbox Example3 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example3/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#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>

Visit to Colorbox Example4 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example4/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#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>


Visit to Colorbox Example5 Demo

</head> Add the following code immediately above the code

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example5/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#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>

Now that you publish your blog posts in your pictures, youtube videos and links with colorbox application can open.

Now one must add the code to your images.

elastic transition : rel="example1"

fade transition : rel="example2"

no transition + fixed width and height (75% of screen size) : rel="example3"

slideshow : rel="example4"

Must add the code above, one of your pictures. Demonstration is as follows.

<a href="http://i36.tinypic.com/nosp4x.jpg" imageanchor="1" rel="example2" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i36.tinypic.com/nosp4x.jpg" width="420" /></a>

With any application to open a web page colorbox must add the following code.

class='iframe'

This code after adding the following appearance will.

<a class='iframe' href="http://www.google.com/">Web Page - Iframed Content</a>

YouTube videos should use when adding the following methods.

Before

http://www.youtube.com/watch?v=AUiSF4C3alg

watch? would delete section = replace / put

After

http://www.youtube.com/v/AUiSF4C3alg

Sample

<a class='youtube' href="http://www.youtube.com/v/AUiSF4C3alg" title="Black Eyed Peas Meet Me Halfway">Flash / Video (Direct Link To YouTube)</a>