Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (68881 Members, 784 Products, 5404 Topic, 13075 Comments)

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

Dibuat
Login Terakhir 3 Tahun lalu,
Telah Dilihat 4056 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 !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase

Online