Sitesine lightbox ekleyenlerin ilk başta güzel olduğunu düşündüğü, ama iş resimlere tek tek kod ekleme işine gelince uff dediği eklenti, şimdi öncelikle sitenizde lightbox eklentisi varsa silin hepsini baştan yapacağız adam gibi yapacağız. Temamızda aşağıdaki kodu buluyoruz.
<head>Bu koddan sonra aşağıdaki kodları olduğu gibi ekliyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>Tamam bitti bu kadar :) Bu kadar basitti yani :) Şimdi geri kalan tek şey .js, .css vs. ile biten linkleri bilgisayarınıza kaydedip kendi hostunuza yükleyin sağlam olsun yani onun bunun hostuna bağlı kalmayın. Sağlıcakla kalın :)
0 yorum:
Post a Comment