* Forum Sitemiz Acilmistir.TİKLA
Sponsor Reklam Alanı
 
Ana Sayfa
Bize Ulaşın
Tasarımlar
Yorumlar

   

MustafaOzkara // ▀ir ▀log Sitesinin €debi Rekabeti

lightbox kodu

Tamamen JS lightbox Kodu TEK KOD

Az önce bir lightbox yapım sitesinde cook güzel PAYLAŞILAN bir kod gördüm. Yayınlama hakları acik yani. Hosting'e akarıp kullanmaya başladım. Sonra cok sevdim sizinle de paylaşmak istedim. Cok seveceksiniz diye düşünüyorum. Lightbox (Resim, video, swf, ifram) gibi bir cok özelliği barındırıyor. Eminim ki bu zamana kadar yayınladıklarımın en iyisi budur. Sitenizin her tarafında RAHATLIKLA kullanabilirsiniz. Üstelik tek kod halinde veriyorum. Önce tasarımın altın'a Sonra da koyacağınız sayfaya koyuyorsunuz basit ve cok güzeller. Güle güle kullanın!
Öncelikle alttaki kodu Tasarımın altına MUTLAKA ekleyin.
Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script> 
!window.jQuery && document.write('<script src="http://bilgilisite.abcz8.com/bs-aktif/lightbox/jquery-1.4.3.min.js"></script>
</script> 
<script type="text/javascript" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
<script type="text/javascript" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//fancybox/jquery.fancybox-1.3.4.css" media="screen" /> 
<script type="text/javascript"> 
$(document).ready(function() {
/*
*   Examples - images
*/
 
$("a#example1").fancybox();
 
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
 
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
 
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
 
$("a#example5").fancybox();
 
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
 
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
 
$("a#example8").fancybox({
'titlePosition' : 'over'
});
 
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
}
});
 
/*
*   Examples - various
*/
 
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
 
$("#various2").fancybox();
 
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
 
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
 
</script> 

Sonra Alttan istediğiniz'i seçin. Altlarında yayınladığım kodları kullanın
Önemli ! : Üstte verdiğim kodu tasarımın altına MUTLAKA eklemelisiniz. Eklemezseniz calısmaz.
1-#Yazılı
Ön izlemesi:
example4
Kodu:
<a id="example5" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/5_b.jpg" title="Bu alana yazınızı yazabiliyorsunuz!"><img alt="example4" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/5_s.jpg" /></a>

2-#Yazılı
Ön izlemesi:

Kodu:
<li><a id="various3" href="http://www.mustafaozkara.tr.gg">İframe Ön izlemesi için Tıklayın!</a></li>

3-#Yazılı
Ön izlemesi:

Kodu:
<a rel="example_group" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/9_s.jpg" /></a> s
 
<a rel="example_group" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/10_b.jpg" title=""><img alt="" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/10_s.jpg" /></a> 
 
<a rel="example_group" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/11_b.jpg" title=""><img alt="" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/11_s.jpg" /></a> 
 

<a rel="example_group" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/12_b.jpg" title=""><img class="last" alt="" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/12_s.jpg" /></a> 

4-#Yazılı
Ön izlemesi:
example4
Kodu:
<a id="example4" href="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/4_b.jpg"><img class="last" alt="example4" src="http://bilgilisite.abcz8.com/bs-aktif/lightbox//example/4_s.jpg" /></a>

5-#Yazılı
Ön izlemesi:

Kodu:
<li><a id="various4" href="http://www.youtube-nocookie.com/v/gFf90Yl91-4?version=3">Swf (Video) Ön izlemesi için tıkla!</a></li>

6-#Yazılı
Ön izlemesi:
  • Ön izlemesi için tıklayın!
    Bu alana yazını yazıp kaydediyorsun panpa. Çok şekil, adam gibi bir kutu olmuş oluyor. Neyse uzatmak istemiyorum. Ama ne kadar uzun yazarsanız scroolbaaar denen şey cıkar ve daha güzel görünür!

Kodu:
<ul>
    <li><a id="various1" title="Buraya başlık yazzzzzzzzzsana " href="#inline1">&Ouml;n izlemesi i&ccedil;in tıklayın!</a></li>
    <div style="display: none;">
    <div id="inline1" style="width:400px;height:100px;overflow:auto;">Bu alana yazını yazıp kaydediyorsun panpa. &Ccedil;ok şekil, adam gibi bir kutu olmuş oluyor. Neyse uzatmak istemiyorum. Ama ne kadar uzun yazarsanız scroolbaaar denen şey cıkar ve daha g&uuml;zel g&ouml;r&uuml;n&uuml;r!</div>
    </div>

</ul>
Bugün 6 ziyaretçikişi burdaydı!
İstatik Gelecek tr
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
tasarimkurdu
Sitemizin bedavasitem'e kayıt tarihi : 31.08.2009 olsada asıl yayına 15.12.2013 tarihinde girmiştir. Sitemiz bedavasitem'in yeni üyelerine tasarım hizmeti vermek üzere açılmıs ve ziyaretçileirmize hizmet vermeye devam etmektedir.
Eklenece
Sitede Bulunan Tasarımlar Bize Aittir.
Kaynak Gösterilmeden Paylaşılamaz...!
Bu web sitesi Řcretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
▄cretsiz kaydol