Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67423 Members, 783 Products, 5279 Topic, 12953 Comments)

Menampilkan foto galeri menjadi BESAR atau ZOOM ketika di klik pada Swarakalibata_CI

Dibuat
Login Terakhir 1 Tahun lalu,
Telah Dilihat 3154 Kali
Aji Malik Arzak Mengatakan : Sultan Account
  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

Ada 7 Jawaban

ahmad fadillah nf
commented on 09 Sep 2019 17:34:07
  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
commented on 10 Sep 2019 09:09:15
  1. Assalamualaikum,..
  2.  
  3. kalau pakai lightbox gimana caranya ?
PHPMU.COM Support
commented on 10 Sep 2019 09:36:46
  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.
Terdapat 1 File dilampirkan :
1. fancybox_Screenshot.png (161 KB)
Aji Malik Arzak
commented on 10 Sep 2019 12:54:48
  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
Terdapat 3 File dilampirkan :
1. coding_detailalbum.PNG (93 KB)
2. coding_template.PNG (178 KB)
3. zoom_image.PNG (2 MB)
PHPMU.COM Support
commented on 11 Sep 2019 06:03:39
  1. Assalamualaikum,.. folder fancybox ditarok dimana?
  2. bisa jadi karena belum connect dengan js dan css fancybox.
Aji Malik Arzak
commented on 11 Sep 2019 08:09:19
  1. Assalamualaikum,..
  2.  
  3. sudah saya taruh di dalam folder asset bang
Terdapat 1 File dilampirkan :
1. folder_fancybox.PNG (44 KB)
Fadil Maulana Malik
commented on 18 Sep 2019 08:58:14
  1. Assalamualaikum,..
  2.  
  3. mas Bukhori, apa lightbox bisa jg diterapkan pada foto produk?
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!