Lightbox Nedir , Ne İşe Yarar ?

Lightbox günümüzde bir çok web sitesinin sıklıkla kullandığı bir çeşit resimlere görsel şıklık kazandırmak amacıyla kullanılan eklenti.

Resimlerin Üzerine tıkladığımızda yeni bir pencerede görsel olarak görüntülenmesi olayıdır.
Gelelim Jquery Lightbox Kullanımına, Bir html veya php sayfası oluşturuyoruz

Buradan colorbox.css ve jquery.colorbox.js Dosyalarını indiriyoruz.

En üst kısmına aşağıdaki kodları ekliyoruz.

<link href="/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="/jquery.colorbox.js"></script>

Daha Sonra ikinci İşlem  Olarak Bu kodların hemen alt tarafına script kodlarımızı ekliyoruz.

<script type="text/javascript">// <!&#91;CDATA&#91;
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:’group1′});
$(".group2").colorbox({rel:’group2′, transition:"fade"});
$(".group3").colorbox({rel:’group3′, transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:’group4′, slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert(‘onOpen: colorbox is about to open’); },
onLoad:function(){ alert(‘onLoad: colorbox has started to load the targeted content’); },
onComplete:function(){ alert(‘onComplete: colorbox has displayed the loaded content’); },
onCleanup:function(){ alert(‘onCleanup: colorbox has begun the close process’); },
onClosed:function(){ alert(‘onClosed: colorbox has completely closed’); }
});
$(‘.non-retina’).colorbox({rel:’group5′, transition:’none’})
$(‘.retina’).colorbox({rel:’group5′, transition:’none’, retinaImage:true, retinaUrl:true});
//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;
});
});
// &#93;&#93;></script>


Dosya yollarını düzenliyoruz.

Şimdi işlememiz tamam artık Kodları Web Sitemize uygulamaya sıra geldi.

<a title="açıklama" href="resimyolu.jpg">Bağlantı ismi veya Resim Kodu</a>

< Örnek Kodlama İndir >

Metin Saraç 2 186 9 Mart 2014
0 beğeni - 2 Yorum