colorbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
colorbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Colorbox Jquery Lightbox 1.3.6 Blogger Entegrasyonu

| | Comments

Daha önce Colorbox uygulamasının bir kaç versiyonunun anlatımı Blogger altyapısı kullananlar için yapmıştım. Colorbox uygulaması sürekli güncellenen ve bünyesine yeni özellikler katan bir jquery uygulamasıdır. Ayrıca Blogger altyapıssında sorunsuz ve blogunuzu kasmadan çalışmaktadır.

Colorbox Jquery, Lightbox uygulamalarından bir tanesidir. Benim en sevdiğim uygulamadır. Jquery ile hazırlandığı için çok kullanışlı ve çok hızlı... en yeni versiyonu olan 1.3.6 sürümünde de bazı yenilikler yapılmış. Bunlar genelde kod yapısında yapılan iyileştirmeler diyebilirim.

Daha önceki anlatımlarımı inceleyenler bu eklentiyi kurmakta fazla zorlanmayacaklar. Colorbox uygulamasının 5 adet demosu var. Ben sizlere demo 1 den başlayarak sırasıyla anlatımları yapacağım.

Colorbox Jquery Ligthbox in Blogger - Section Four

| | Comments

Blogger general application integration to tell jQuery lightbox Colorbox after the order to the use of this plugin

one of the first examples on these pages integrate blog

A little code to add pictures to your article class will assign. These codes are the problem, manually enter the class each image.

İmage Content Types

When you add a code like the following image with your blog is. We will assign this code class rel ...

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" width="400" />

elastic transition for : rel="example1" , fade transition for : rel="example2" , no transition + fixed width and height (75% of screen size) for : rel="example3" , slideshow for : rel="example4" add one of the class.

Our code will be as follows after Add.

<a href="http://i27.tinypic.com/23vjpeq.jpg" imageanchor="1" rel="example1" title='Test title' style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="http://i27.tinypic.com/23vjpeq.jpg" alt='test' width="400" />

Other Content Types

<a class='iframe' href="http://www.google.com">Outside webpage (IFrame)</a>

<a class='youtube' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health">Flash / Video (Direct Link To YouTube)</a>

Youtube video link to open the link in the window below colorbox something like this should make arrangements.

Before
http://www.youtube.com/watch?v=bqeuSWTgtQo

watch? would delete section = replace / put

After
http://www.youtube.com/v/bqeuSWTgtQo

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Three

Colorbox Jquery Ligthbox in Blogger - Section Three

| | Comments

Application to both the third part Colorbox jQuery Lihgtbox start.

Colorbox Example4

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/1704149/Colorbox1.2.9/example4/colorbox.css" />
<!--[if IE]>
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/1704149/Colorbox1.2.9/example4/colorbox-ie.css" title="example" />
<![endif]-->
<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Colorbox Example5

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/1704149/Colorbox1.2.9/example5/colorbox.css" />
<!--
This example has no IE-Only Stylesheet because the theme uses no transparent png files.
-->

<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become

Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Two , Colorbox js v1.2.9 in Blogger Section Four

Colorbox Jquery Lİgthbox in Blogger - Section Two

| | Comments

Application to both the second part Colorbox jQuery Lihgtbox start.

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/1704149/Colorbox1.2.9/example2/colorbox.css" />
<!--
This example has no IE-Only Stylesheet because the theme uses no transparent png files.
-->

<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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become


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/1704149/Colorbox1.2.9/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/1704149/Colorbox1.2.9/js/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>


If you are using a lightbox at the top to your blog within the code rel = 'example1' instead rel = "lightbox" is simply put. In this way, in your old article without having to make changes in the lightbox code compatible with the application colorbox have become


Visit to : Colorbox js v1.2.9 in Blogger Section One , Colorbox js v1.2.9 in Blogger Section Three , Colorbox js v1.2.9 in Blogger Section Four