omegaonur

Light box ekleme

ARKADAŞLAR ÇOK ARANAN LİGHTBOX ANLATIMINI KENDİMCE YAPTIM.UMARIM SİZE YARDIMCI OLMUŞUMDUR.

Tarayıcısı Opera Olanlar Sitemizdeki Örnek Uygulamaları Düzgün Göremiyecektir Çünkü Çakışma Oluyor Explorer- Firefox-Chromeyle Deneyin Bu sorun Sitenizde Olmuyacaktır...

AŞAĞIDAKİ KODU TASARIM ÜSTÜNE EKLEYİN
<script type="text/javascript" src="http://catlaksite55.iwoly.com/js/jquery-1.4.4.min.js"></script> <link rel="stylesheet" href="http://catlaksite55.iwoly.com/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="http://catlaksite55.iwoly.com/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook'}); });</script>

Yukardaki Kodu Ekledikten Sonra Biz Bu Uygulamayla Ne Göstermek İstiyoruz İlk Önce Ona Karar Veriyoruz -

• Galeri-(Resimler-Gif-Png)
• İframe(Siteler-Uygulamalar)
• Video-Flash-Swf Uzantılı Uygulamalar

Yukardaki Seceneklerinden Ekleyecegimiz Sayfada Hangisini Kullanacaksak Onun Kodunu Ekleyip Düzenlemesini Yapıp Sayfamıza Ekliyecegiz.Yukardaki Seceneklerin Kodlarını Tek Tek Uygulamalı Aşag

• Galeri (Resim Gösterme)

Tek Tek Resim Götermek İstiyorsak Yanı Bir Resimden Digerine Geçiş Saglamak İstemiyorsak

Demo:       


<a rel="prettyPhoto" href="Tıklanınca Gösterilcek Büyük Resim Url" _fcksavedurl="Tıklanınca Gösterilcek Büyük Resim Url"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim" _fcksavedurl="Tıklanması İçin Gösterilcek Küçük Resim" /></a>

Eger Galerinizde Birden Çok Resim Göstermek Ve Bu Resimlerin Arasında Geçiş Saglamak İstiyorsanız (İleri-Geri) Aşagıdakı Kodla Yapıcaksınız... Hazır Kodumuzda Sadece Galeriye İsim Vermeniz Yeterli "prettyPhoto[Galeri İsmi]" Ben Örnek Olarak Galeri İsmine omegaonur Verdim Burda Dikkat Etmeniz Bütün Resimlere Aynı Galeri İsmini Vermek...

Demo:       

Kod:
<a rel="prettyPhoto[omegaonur]" href="Tıklanınca Gösterilcek Büyük Resim Url" _fcksavedurl="Tıklanınca Gösterilcek Büyük Resim Url"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim" _fcksavedurl="Tıklanması İçin Gösterilcek Küçük Resim" /></a> <a rel="prettyPhoto[omegaonur]" href="Tıklanınca Gösterilcek Büyük Resim Url" _fcksavedurl="Tıklanınca Gösterilcek Büyük Resim Url"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim" _fcksavedurl="Tıklanması İçin Gösterilcek Küçük Resim" /></a> <a rel="prettyPhoto[omegaonur]" href="Tıklanınca Gösterilcek Büyük Resim Url" _fcksavedurl="Tıklanınca Gösterilcek Büyük Resim Url"><img height="60" width="60" alt="" src="Tıklanması İçin Gösterilcek Küçük Resim" _fcksavedurl="Tıklanması İçin Gösterilcek Küçük Resim" /></a>

• İframe Gösterme

Bu Kodla Sitenizden Çıkmadan Başka Siteleri Gösterebilirsiniz...

Demo:        Google.com            OmegaOnur
Kod:
 <a href="Göstereceginiz Site Url?iframe=true&width=100%&height=100%" _fcksavedurl="Göstereceginiz Site Url?iframe=true&width=100%&height=100%" rel="prettyPhoto">Site İsmi İsterseniz Resim Url </a>
 

Flash Demo:                 

Kod:
 
<a href="Buraya Swf Kodu?width=400&height=400" _fcksavedurl="Buraya Swf Kodu?width=400&height=400" rel="prettyPhoto"><img width="60" src="http://catlaksite55.iwoly.com/images/thumbnails/flash-logo.png" _fcksavedurl="http://catlaksite55.iwoly.com/images/thumbnails/flash-logo.png" /></a>


Video-Flash-Swf Uzantılı Uygulamalar
Video Demo:             
Kod:
<a href="Video Urlsi Buraya" _fcksavedurl="Video Urlsi Buraya" rel="prettyPhoto"><img width="150" alt="" src="https://img.webme.com/pic/c/catlak-site55/videoo.jpg" _fcksavedurl="https://img.webme.com/pic/c/catlak-site55/videoo.jpg" /></a>
 İsterseniz Light Boxun Görünütüsü Degiştirebilirsiniz Yapmanız Gereken Sitemizin Üst Tarafına Ekledigimiz Kodda 

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',theme:'facebook'});
        });

Facebook Yazan Yazıyı

• light_square
• light_rounded
• facebook
• dark_square
• dark_rounded    Bu Seceneklerdeki İsimlerle Degiştirmek Her İsim Farklı Görüntüye Sahip Aslında Onlarında Ekran Görüntülerini Daha sonra Ekliyecegim Siz İsterseniz Yazıyı Degiştirip Hepsini Tek Tek Gözünüzle Görebilirsiniz Benim Hoşuma Facebook Görüntüsü Gittigi İçin Onu Paylaştım...

LİGHT BOX VİDEOLU ANLATIM.....

http://omegaonur.tr.gg/Light-box-videoli-anlatim.htm

Etiketler ( Tags ) : Light Box | Light Box Kodları | Light Box Ekle | Light Box Uygulaması | Sexylihgtbox | Funcy Box | Acılan Pencere |Css Kodları | Photoshop Dersleri |Html-Javascript-Css Kodları | En Güncel Kod Sitesi |