Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Tamamen JS lightbox Kodu TEK KOD [Resim Büyüteci]
#1
Emeğe Saygı +rep verin lütfen

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>


Önemli ! : Üstte verdiğim kodu tasarımın altına MUTLAKA eklemelisiniz. Eklemezseniz calısmaz.

Bu Koduda Koymak İstediğiniz Yere Yapıştırın .!
Kod:
<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>


Ara
Cevapla
#2
güzel ama kaynak belirtiniz
http://microbil.com
Cevapla
#3
Kaynak ightbox sitesi
Ara
Cevapla
#4
Güncell
Ara
Cevapla
#5
Guzel nasil diye cevapa bak blog
di-8IWD.png
emegesaygips6.gif

4 Kurucu
1 Admin
2 Yönetici
1 Moderatör
1 Deneme Mod.
4 Grafiker
2 Coder
1 Destek Ekibi

Grafik Destek Yönetimi Olarak Hizmetinizdeyiz...!!!
Ara
Cevapla
#6
anlamadım ?
Ara
Cevapla


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 2 Ziyaretçi


10tl.net Destek Forumu -