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.