FancyBox ile projenizde ki resimleri bir pencere ve slayt şeklinde gösterebilirsiniz.Bizde yapmış olduğumuz örneğe bu özelliği ekleyeceğiz.İlk olarak projemizde welcome_message.php viewimizdeki <head> tagları arasına alltaki script ve link bloglarını ekliyoruz.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script><link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen"><script type="text/javascript">$(document).ready(function() {//https://github.com/fancyapps/fancyBox$(".fancybox").fancybox({});});</script>
Son olarak kişilerimizin resimlerini gösterdiğimiz img e link ekliyoruz.Aşağıdaki gibi ayarlıyoruz.
<a class="thumbnail fancybox" rel="ligthbox" href="<?php echo base_url("resim") . "/" .$kbilgi->resim_url ?>"><imgwidth="80"src="<?php echo base_url("resim") . "/" .$kbilgi->resim_url ?>"></a>
Evet kullanıcı resmine tıkladığımızda ki ekran görüntümüz.
Şimdi projemizin her defasında internete bağlanıp fancybox ı yüklemesini istemeyiz bunun için .js ve css kodlarınızı projemize indirip ekleyelim. style ve script linkerimizi kopyalıp tarayıcımıza açıp sağ tuşla tıklayıp farkı kaydet seceneğini secerek projemizin ana dizininde assets adı altında bi klasör oluşturup buraya ekliyoruz.Daha sonra projemizdeki css ve js linkerini kendi projemizdeki adreslerle aşağıdaki gibi değiştiriyoruz.
<script src="<?php echo base_url("assets/jquery.min.js")?>"></script><script src="<?php echo base_url("assets/jquery.fancybox-1.3.4.js")?>"></script><link rel="stylesheet" href="<?php echo base_url("assets/jquery.fancybox-1.3.4.css")?>" media="screen"><script type="text/javascript">$(document).ready(function() {//https://github.com/fancyapps/fancyBox$(".fancybox").fancybox({});});</script>
Şimdi projemizi çalıştıralım.Projemizi çalıştırdığımızda hata mesajları ile karşılaştık.
Hataya baktığımızda bazı php uzantılı dosyaları bulamadığını görüyoruz.Bu resimleri eklemek için buradan dosyaları indiriyoruz ve hatada yazılan resimleri projemizdeki assets klasörüne kopyalıyoruz. Şimdi projemizi tekrar çalıştırıyoruz.Hatalarımız aşağıda gözüktüğü gibi gitti.
Umarım faydalı olmuştur.Projenin son halini buradan indirebilirsiniz.
Hiç yorum yok:
Yorum Gönder