Bir ürün detay sayfasında görsellere basınca tam ekran olmaları ve tam ekran modubdayken de galeri olarak değiştirilebilmeleri için daha önce de çok kere kullanıp memnun kaldığım magnific popup kullanayım dedim. Ama başlıkta da yazdığım "Magnific popup The image could not be loaded" hatası ile bir saat gereksiz yere uğraştıktan sonra aslında hatanın çok basit bir eksiklikten kaynaklandığını fark ettim ve bu başlıkta hatanın çözümünü paylaşmak istedim.
Magnific popup eklentisini başlatmak için aşağıdaki gibi bir js kodu kullanabilirsiniz.
<div class='container'>
<div class="rsm"><img src="uploads/resim1.jpg"/></div>
<div class="rsm"><img src="uploads/resim2.jpg"/></div>
....
</div>
$('.rsm').magnificPopup({
type: 'image'
// ...
});
Ama Magnific popup öalışması için href özelliği olan a etiketlerine ihtiyaç duyuyor.
Buradaki hatanın çözümü de şu oldu:
<div class="container">
<a class="rsm" href="uploads/resim1.jpg"><img src="uploads/resim1.jpg"/></a>
<a class="rsm" href="uploads/resim2.jpg"><img src="uploads/resim2.jpg"/></a>
....
</div>
Çok basit bir hata ama front-end ve tasarım odaklı olunca gözden kaçabiliyor işte..
Editör editi: benzer başlıklar için;
bkz: mysql is not recognized as an internal or external command hatası ve çözümü
bkz: Wordpress permalink'lerde 404 Hatası ve Çözümü (Plesk)
bkz: brackets PHP7 runtime not found hatası ve çözümü
bkz: Linux nslookup command not found hatası ve çözümü
bkz: Linux ifconfig command not found hatası ve çözümü
bkz: The underlying connection was closed hatası ve çözümü