strip-focused-image

jQuery ile Ekranın Köşesinde Lightbox

Strip, alışık olduğumuz lightboxlara kıyasla web sayfanıza daha iyi adapte olan bir jQuery eklentisi.

Bu eklenti ile lightboxlarınız ekranın istediğiniz köşesinde istediğiniz boyutta çıkıyor. Böylece ilgili multimedya öğesinin web sayfanızla olan etkileşimi de hiç kesilmiyor. Hem resimleriniz için hem de videolarınız için kullanabileceğiniz Strip şık tasarımıyla da ilgi çekici.

Strip bütün popüler tarayıcılarda çalışmakta : IE7+ Firefox 3+, Chrome 5+, Opera 9+, Safari 3+, iOS5+ ve Android 3+

Nasıl kullanılır?

Strip, jQuery 1.x’in en son versiyonlarıyla birlikte kullanılabilmekte. Sayfanıza aşağıdaki 3 adet dosyayı eklemeniz yeterli.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/strip/strip.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/strip/strip.css"/>

Download & Demo Strip

Eklentiyi aşağıdaki adreslerden indirebilir veya test edebilirsiniz.

DEMO  DOWNLOAD


 

Temel kullanım

strip-single

Eklentiyi çalıştırmanın en temel yolu ise linklere strip classı eklemek.

<a href="resim.jpg" class="strip">Resmi göster</a>

Altyazı destekli lightbox

strip-single-caption

Eğer lightboxlara altyazı da eklemek isterseniz data-strip-caption attribute yardımınıza yetişiyor.

<a href="resim.jpg" class="strip" data-strip-caption="Altyazı buraya">Caption</a>

Değiştirilebilir özellikleriyle lightbox

Veya tamamıyla değiştirilebilir data-strip-options özelliğini kullanabilirsiniz.

<a href="http://vimeo.com/51949926" class="strip" data-strip-options="side: 'top', maxWidth: 800">Ayarlar</a>

Çoklu resimden lightbox

strip-group

Ayrıca birden fazla fotoğrafı da Strip sayesinde gruplayabilirsiniz.

<a href="resim1.jpg" class="strip" data-strip-group="grubum">Resim 1</a>
<a href="resim2.jpg" class="strip" data-strip-group="grubum">Resim 2</a>

YouTube videolarını lightbox’da gösterme

YouTube videolarını da lightbox’da açabilirsiniz.

<a href="http://www.youtube.com/watch?v=89R8pT-f2ZM" class="strip">YouTube</a>

YouTube için değiştirilebilir ayarlar da mevcut.

<a href="http://www.youtube.com/watch?v=89R8pT-f2ZM" class="strip" 
   data-strip-options="width: 853, height: 480,youtube: { autoplay: 0 }">Youtube</a>

Vimeo videoları için lightbox

strip-vimeo

Tabii ki Vimeo desteği de mevcut.

<a href="http://vimeo.com/51949926" class="strip">Vimeo</a>

Vimeo’nun da değiştirilebilir ayarları mevcut.

<a href="http://vimeo.com/51949926" class="strip" 
   data-strip-options="vimeo: {autoplay: 0,portrait: 1}">Vimeo</a>

Ne düşünüyorsunuz?

Alışılmamış tasarımı ve işleyişi ile Strip’in lightbox anlayışına yenilik getirdiği aşikar. Peki siz bu konuda ne düşünüyorsunuz? Hali hazırda kullandığınız lightbox uygulamasını değiştirmeyi sizlere de düşündürdü mü?

Bu da ilginizi çekebilir  Sayfanın Üstünde Açılabilir Menü

Yorumlarınızı bekliyoruz.



  • Ahmet Mazlum Aras

    Güzel bir plugin, fakat kısıtlayıcı. Tek bir efekti var. Artırılır ise daha güzel olablir.

    • Evet, giriş ve çıkış efekti tek tip ancak ekranda gözükeceği yeri değiştirebiliyoruz. Zaten mobilde de klasik modal mantığına bürünmekte.

      • Ahmet Mazlum Aras

        Bir ara modalbox yazmıştım animete.css destekli. Aslında ona galeri mantığını kursam güzel olabilir gibi.

        Jquery-plugins.net adresini biliyorsundur. Oraya senin focus mantığı ile yaptığın formu koymuşlar. Gerçekten gurur verici. Ellerine sağlık. Basit, hızlı, estetik.

        Bu arada paylaşımların çok iyi. Böyle devam etmesi dileğiyle.