Haloo! Selamat Datang di Komunitas Private Training Web Development (48216 Members, 455 Projects, 3700 Topic, 10094 Comments)

Butuh karyawan baru? atau seorang Web Developer (Part-time/Freelance/Full-time), cari disini : Members Area Jobs!
Menampilkan foto galeri menjadi BESAR atau ZOOM ketika di klik pada Swarakalibata_CI
Aji Malik Arzak Mengatakan : Members -
Rate Topic :
  1. Assalamualaikum Warahmatullahi Wabarakatuh...
  2.  
  3.  
  4. Menampilkan foto galeri menjadi besar ketika di klik pada Swarakalibata_CI sudah mencoba dengan coding
  5. <style>
  6. img:hover{
  7. transform: scale(1.1); // 110% zoom hover, sesuaikan dgn kebutuhan...
  8. }
  9. </style>
  10.  
  11. tapi yang zoom semua gambar yang ada di tampilannya
ahmad fadillah nf Mengatakan :
Members -
  1. Assalamualaikum,.. coba untuk ubah berdasarkan class saja.
  2. <style>
  3. .nama_class_img:hover{
  4. transform: scale(1.1); // 110% zoom hover, sesuaikan dgn kebutuhan...
  5. }
  6. </style>

Aji Malik Arzak Mengatakan :
Members -
  1. Assalamualaikum,..
  2.  
  3. kalau pakai lightbox gimana caranya ?

Robby Prihandaya Mengatakan :
Admin -
  1. Assalamualaikum,.. pake Fancybox saja : http://fancybox.net/howto
  2. Download dulu https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip
  3. extraxt dan ambil folder fancybox lalu copas ke folder swarakalibata ci di folder asset,
  4.  
  5. cara aktifkan di swarakalibata ci :
  6. buka file "application/views/phpmu-tigo/template.php"
  7. tambahkan di dalam tag <head>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  9. <script type="text/javascript" src="<?php echo base_url(); ?>asset/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  10. <script type="text/javascript" src="<?php echo base_url(); ?>asset/fancybox/jquery.easing-1.4.pack.js"></script>
  11. <script type="text/javascript" src="<?php echo base_url(); ?>asset/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  12.  
  13. <script type="text/javascript">
  14. $(document).ready(function() {
  15. /* This is basic - uses default settings */
  16. $("a#single_image").fancybox();
  17.  
  18. /* Using custom settings */
  19. $("a#inline").fancybox({
  20. 'hideOnContentClick': true
  21. });
  22.  
  23. /* Apply fancybox to multiple items */
  24. $("a.group").fancybox({
  25. 'transitionIn' : 'elastic',
  26. 'transitionOut' : 'elastic',
  27. 'speedIn' : 600,
  28. 'speedOut' : 200,
  29. 'overlayShow' : false
  30. });
  31. });
  32. </script>
  33.  
  34. Terakhir buka file "application/view/phpmu-tigo/detail.album.php"
  35. lalu pada baris 50 tambahkan tag url untuk foto yg awalnya :
  36. <img style='width:87%' title='$h[jdl_gallery]' src='".base_url()."asset/img_galeri/$gbr_gallery' alt='$h[jdl_gallery]' data-jslghtbx='".base_url()."asset/img_galeri/$h[gbr_gallery]' data-jslghtbx-group='group3' data-jslghtbx-caption='$h[keterangan]' />
  37.  
  38. ubah menjadi :
  39. <a id='single_image' href='".base_url()."asset/img_galeri/$gbr_gallery'>
  40. <img style='width:87%' title='$h[jdl_gallery]' src='".base_url()."asset/img_galeri/$gbr_gallery' alt='$h[jdl_gallery]' data-jslghtbx='".base_url()."asset/img_galeri/$h[gbr_gallery]' data-jslghtbx-group='group3' data-jslghtbx-caption='$h[keterangan]' /></a>
  41.  
  42. Simpan dan selesai, penampakan hasil percobaan saya lampirkan dibawah ini.

Ada 1 File Kiriman :
1. fancybox_Screenshot.png (161 KB)
Aji Malik Arzak Mengatakan :
Members -
  1. Assalamualaikum,.. sudah saya coba bang tapi tidak muncul icon closenya tapi malah gambarnya ke buka ke halaman baru
  2.  
  3.  
  4. berikut penampakan hasil percobaan saya lampirkan dibawah ini

Ada 3 File Kiriman :
1. coding_detailalbum.PNG (93 KB)
2. coding_template.PNG (178 KB)
3. zoom_image.PNG (2 MB)
Robby Prihandaya Mengatakan :
Admin -
  1. Assalamualaikum,.. folder fancybox ditarok dimana?
  2. bisa jadi karena belum connect dengan js dan css fancybox.

Aji Malik Arzak Mengatakan :
Members -
  1. Assalamualaikum,..
  2.  
  3. sudah saya taruh di dalam folder asset bang

Ada 1 File Kiriman :
1. folder_fancybox.PNG (44 KB)
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!