Mintik posted
4 year ago

MagnificPopup – Resme tıklandığında çerçevede açılsın

Magnific-Popup

Birçok yerde  ve özellikle de Faceboo’ta görmüşsünüzdür resme tıklandığında  aynı sayfada ama başka  bir çerçevede açılma olayını. Mouse ile tıklandığında resmi çerçeve içinde  açan bu örneklerin  tamamına  genel olarak Lightbox  adı verilir. Bu tür çalışmaları sitenizde kullanabilmek için hazırlanmış onlarca jQuery Lightbox uygulaması var.

Magnific Popup uygulaması da Dmitry Semenov tarafından geliştirilmiş resme tıklandığında  daha büyük olarak çerçevede açmaya yarayan bir jQuery eklentisidir. Şimdiye  kadar görmüş olduğunuz bütün lightbox  örneklerini bir kenara bırakın. Çünkü magnific popup  sizin için gerekli  olan bütün özellikleri içinde barındırıyor.  Daha önceleri paylaştığımız lightbox örneklerinin  çoğu sadece resimler için kullanılıyordu. Birde Magnific Popup uygulamasının  özelliklerine bakalım.

Web sayfanızda bulunan küçük resimler tıklandığında Magnific Popup sayesinde lightbox penceresinde  açılıyor ve daha büyük oluyor. İsterseniz resimlerinizi  grup olarak kaydederek açılan lightbox penceresinden slayt  galeri  benzeri olarak ta kullanabilirsiniz. Websayfanıza küçük resimleri ekleyerek sayfanızın daha hızlı açılmasını sağlayabilirsiniz. Magnific Popup ile  açılacak olan lightbox penceresine de  resimlerin büyük versiyonlarını ekleyebilirsiniz. Küçük resimler  tıklandığında açılan çerçevede resimlerin büyük hali  ajax ile yüklenerek açılıyorlar.

Magnific Popup  ile lightbox pencerelerinde videolar da oynatabilirsiniz. Youtube ve Vimeo sitelerini destekleyen Magnific Popup ile linklere Youtube ve Vimeo sitelerindeki video adreslerini ekleyerek ziyaretçilerin linklere tıklayarak açılan pencerede video izlemelerini sağlayabilirsiniz. Aynı bu şekilde linklere video gibi haritada ekleyebilirsiniz.  Google map üzerinden herhangi bir yeri  kaydedip linke tıklandığında  lightbox penceresinden ziyaretçilerinize gösterme imkanı sağlıyor.

Ayrıca  isterseniz bir başka sayfayı Magnific Popup uygulamasını kullanarak aynı sayfa içine ajax ile çağırabilirsiniz.  Uygulamanın  son özelliği de form örnekleri için. Dilerseniz  lightbox penceresinden form örneklerini de açtırabilirsiniz. Gördüğünüz  gibi  uygulamanın  birçok özelliği bulunuyor. Ama söylemediğim son bir  özellik daha kaldı. Tıkladığınızda açılan çerçeveler  tarayıcıya duyarlı (responsive ) olarak çalışıyor.  Resimler, videolar, haritala vs. bütün örnekler aynı şekilde tarayıcıya duyarlı olarak çalışıyor. Demo sayfasında bir lightbox penceresi açtıktan sonra tarayıcı boyutunu değiştiriseniz eğer lightbox penceresinin boyutununda değiştiğini gözle görebileceksiniz.

 

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail