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

Swarakalibata_CI Cara Tampilkan Foto Galeri Lebih dari satu

Dibuat
Login Terakhir 1 Bulan lalu,
Telah Dilihat 1585 Kali
Simri Nubatonis Mengatakan : Sultan Account
  1. Halo Pak Roby,
  2.  
  3. Mau tanya mengenai cara tampilin foto saat klik salah satu album
  4. Kalo yang di detailalbum.php itu (yang sekarang ini) kalo kita klik di salah satu Album, nah ditampilkan 1 foto, trus baru ada page (1,2,3 dst), dan harus klik untuk lihat foto lain.
  5. Nah case saya seperti ini pak Roby
  6. Maunya saat klik Salah satu Album, tampilkan semua foto yang di isi album tersebut, sehingga tidak perlu klik 1,2,3 dst untuk lihat gambar lain..
  7. Saya coba rubah di detailalbum.php bagian berikut ini (tapi belum berhasil)
  8. <div class="column9">
  9. <div class="block-content">
  10. <?php echo "$rows[keterangan]"; ?>
  11. <hr style='margin:10px'>
  12. <ul class='article-block-big'>
  13. <?php
  14. foreach ($detailalbum->result_array() as $h) {
  15. echo "<li style='width:100%; margin-left:-13px'>
  16. <div class='article-photo'>
  17. <h3>$no. $h[jdl_gallery]</h3>
  18. <img class='jslghtbx-thmb' style='width:87%' title='$h[jdl_gallery]' src='".base_url()."asset/img_galeri/$h[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]' /><br>
  19. <p>$h[keterangan]</p>
  20. </div>
  21. </li>";
  22. $no++;
  23. }
  24. ?>
  25. </ul>
  26.  
  27. <div class='pagination'>
  28. <?php echo $this->pagination->create_links(); ?>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33.  
  34. Atau mungkin teman-teman yang lain ada yang bisa, mohon bantuannya
  35. Makasih sebelumnya
  36.  

Ada 14 Jawaban

PHPMU.COM Support
commented on 20 Sep 2017 18:00:55
  1. Assalam, pertama set pada Controller/Albums.php baris 35 menjadi :
  2. $config['per_page'] = 10; //jumlah foto yang akan ditampilkan dalam 1 halaman
  3.  
  4. Selanjutnya pada Views/phpmu-tigo/detailalbum.php ubah pada baris 46 sampai 55 menjadi :
  5. foreach ($detailalbum->result_array() as $h) {
  6. echo "<li style='width:28%; margin-left:-13px;'>
  7. <div class='article-photo' style='height:160px; overflow:hidden'>
  8. <h3>$no. $h[jdl_gallery]</h3>
  9. <img class='jslghtbx-thmb' style='width:87%' title='$h[jdl_gallery]' src='".base_url()."asset/img_galeri/$h[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]' /><br>
  10. <p>$h[keterangan]</p>
  11. </div>
  12. </li>";
  13. $no++;
  14. }
  15.  
  16. Terakhir Simpan dan lihat hasilnya,,.. :)
Simri Nubatonis
commented on 20 Sep 2017 23:21:00
  1. Pak Robby,
  2. Makasih ya, sudah berhasil pak Robby
  3.  
Kodirrrrrrrrrrrrrrr
commented on 26 Sep 2017 13:30:25
  1. jika diklik fotonya terus tampil menjadi besar gmn caranya?
Simri Nubatonis
commented on 26 Sep 2017 19:10:00
  1. #Laili Qodir: Saya pake plugin "prettyphoto" bang. Jika pengen lihat hasilnya, kirimin saya email via pesan biar saya kasiin link-nya, dan jika sudah lihat dan itu yang dimaksud, baru saya kasiin script-nya bang.
Dzanur Ragil
commented on 26 Sep 2017 20:04:29
  1. ikut nimbrung om
  2.  
Simri Nubatonis
commented on 26 Sep 2017 21:47:29
  1. # Dzanur Ragil: Bro sudah lihat link yang sudah saya kasiin kan?
  2. Nah, berikut script yang sama persis dengan yang dikasiin Pak Robby diatas, hanya kita tambahkan class"prettyphoto" dalam hal ini saya ganti dgn class='simri-photo'
  3. nama ini bro bisa ganti dengan yang bro suka.
  4. Berikut selengkapnya:
  5. - Untuk prettyphoto, bro tinggal download aja ya bro, trus letakkan di folder application/views/phpmu-tigo
  6. - Pada bagian template.php, letakkan berikut ini
  7. <link rel="stylesheet" href="<?php echo base_url(); ?>application/views/<?php echo template(); ?>/prettyphoto/css/prettyPhoto.css">
  8. <!-- prettyPhoto open -->
  9.  
  10. <script type="text/javascript" src="
  11. <?php echo base_url(); ?>application/views/<?php echo template(); ?>/prettyphoto/js/jquery.prettyPhoto.js">
  12. </script>
  13. <script type="text/javascript" charset="utf-8">
  14. $(document).ready(function(){
  15. $(".simri-photo").prettyPhoto();
  16. });
  17. </script>
  18.  
  19. <script type="text/javascript" src="<?php echo base_url(); ?>application/views/<?php echo template(); ?>/js/dm3FadeSlider.jquery.js"></script>
  20. <script type="text/javascript" src="<?php echo base_url(); ?>application/views/<?php echo template(); ?>/js/dm3Slideshow.jquery.js"></script>
  21. <script type="text/javascript" src="<?php echo base_url(); ?>application/views/<?php echo template(); ?>/js/quicksand.js"></script>
  22. <!---pretyphoto ends here--->
  23.  
  24.  
  25. Selanjutnya pada Views/phpmu-tigo/detailalbum.php ubah pada baris 46 sampai 55 menjadi : (jika masih file bawaan ya bro)
  26.  
  27. <?php
  28. foreach ($detailalbum->result_array() as $h) {
  29. echo "
  30. <!--<li style='width:28%; margin-left:-13px;'>----aslinya ini--->
  31. <li style='width:215px'>
  32. <div class='paragraph-row' style='height:160px; overflow:hidden'>
  33. <!--<h3 align='center'>$no. $h[jdl_gallery]</h3> --------aslinya ini--->
  34. <h3 align='center'>$h[jdl_gallery]</h3>
  35. <img style='width:100%' title='Click To See The Bigger Image' src='".base_url()."asset/img_galeri/$h[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 href='".base_url()."asset/img_galeri/$h[gbr_gallery]' class='hover-effect simri-photo' /></a><br>
  36. </div>
  37. </li>
  38. ";
  39. $no++;
  40. }
  41. ?>
  42. Semoga berhasil ya bro...
Simri Nubatonis
commented on 26 Sep 2017 22:01:42
  1. # Dzanur Ragil, sorry bang maksud saya komen diatas untuk mas Laili Qodir. Sorry bro, salah nama.
  2.  
Dzanur Ragil
commented on 27 Sep 2017 11:45:39
  1. ok ok, nyantai, lagian juga ilmu haha
Kodirrrrrrrrrrrrrrr
commented on 27 Sep 2017 14:58:24
  1. @Simri Nubatonis
  2. Boleh bang, kirimin ke email saya aja qodir.amd@gmail.com
Simri Nubatonis
commented on 27 Sep 2017 18:14:42
  1. # Laili: File prettyPhoto yang saya gunakan,sudah saya kirimin ke email ya, sedangkan file template.php, detailalbum.php kan bro tinggal ikutin langkah diatas untuk letakkan ya bro.
  2. Pasti bro bisa.
  3. Jangan lupa: pertama set pada Controller/Albums.php baris 35 menjadi :
  4. $config['per_page'] = 10; //jumlah foto yang akan ditampilkan dalam 1 halaman
  5. Pasti berhasil bro
  6.  
Fauzi Ahmad
commented on 27 Sep 2017 20:20:18
  1. ikut nimbrung, mau tanya foto hasil upload foto dari kcfinder gak langsung ikut responsive ya jadi gepeng? emang sprti itu atau ada bisa langsung resposive? thanks #Swarakalibata_CI
Kodirrrrrrrrrrrrrrr
commented on 28 Sep 2017 13:33:36
  1. @Simri Nubatonis bang klo
  2. <script type="text/javascript" src="<?php echo base_url(); ?>application/views/<?php echo template(); ?>/js/dm3Slideshow.jquery.js"></script>
  3.  
  4. itu kan ada dm3slideshows, setau ane di swarakalibata ci, ga ada file itu, ada file tambahan ga?
Simri Nubatonis
commented on 28 Sep 2017 13:41:35
  1. # Laili: Sorry kelupaan bro
  2. Saya lampirin folder js yang ada dm3Slideshow di pesan ya bro...
  3.  
Kodirrrrrrrrrrrrrrr
commented on 03 Okt 2017 11:40:19
  1. disaya gagal mas, ada pesan error
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!