Colorbox-Extended-Version

Herkes Colorbox’ı biliyordur. Jackmoore yazmış kullanılıyor şık güzel bir şey fakat kullanımında illaki ayrı ayrı scriptler içine yazmak gerekiyor. Ben bunu biraz kolaylaştırmayı denedim ve güzel sonuçlar aldım. Orijinal Colorbox’a sadık kalarak geliştirdiğim bir eklentidir. Kullanım şekili şöyle;

İlk kurallardan birisi olarak class’ına mutlaka colorBox değerini eklemeliyiz. data-cbset özelliğini kullanarak sırası ile ne yapılması istenmelidir.

  1. Açmak istediğimiz modalbox türü:
    • inline: Sayfa içindeki herhangi bir divi modalbox içinde açmak için kullanılır. İnline kullanımlarda a tagının href değerine açılması istenen div’in idsi # kullanılarak yazılmalıdır.
    • iframe: Sayfa dışından bir sayfayı sayfa içinde modalbox içinde açmak için kullanılır. Iframe kullanımlarında a tagının href değerine açılması istenen url yazılmalıdır.
    • nofollow: Sayfa içindeki bir resimi modalbox içinde tek halde açmak için kullanılır. Nofollow kullanımlarında a tagının href değerine açılması istenen resim urlinin tamamının yazılması gereklidir.
  2. Açmak istediğimiz modalbox genişlik değeri: • %’deli ya da düz olarak genişlik değeri girilmelidir. Herhangi bir harf yazılırsa otomatik olarak 75% olan default değerine geri dönecektir.
  3. Açmak istediğimiz modalbox yükseklik değeri: • %’deli ya da düz olarak genişlik değeri girilmelidir. Herhangi bir harf yazılırsa otomatik olarak 75% olan default değerine geri dönecektir.

Demo – Kaynak Kodu

3 Yorum var
  • Osman Fikret Ceylan
    Mart 12, 2013

    Faydalı kullanımı olan güzel bir script olmuş. Teşekkürler Emre Bey.

  • Efe Vatansever
    Ocak 29, 2015

    Kolay gelsin. Easy Builder’de nasıl kullanabilirim yardımcı olabilecek birisi var mı ?

    • Emre Dardağan
      Ocak 30, 2015

      Selam, sayfanda ekte verdigim script dosyasini var olan jquery.colorbox.js dosyasi yerine cagirmalisin.

      Daha sonra da demo sayfalarindaki orneklerde gosterdigim gibi sayfa icinde cagirarak kullanabilirsin. Herhangi ekstra bir durumu yok. Yine bir sorun ile karsilasirsan bana ulasabilirsin.

      Kolay gelsin.

Cevapla

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir