JQuery Zoomooz : Zoom Effect on Gallery - website files

“Everyone loves images.”

Jika blog atau website menampilkan gallery foto, seperti website Toko Online, maka setting image menjadi masalah besar. Ada sejumlah besar gambar berukuran Large, Medium atau Small yang jika tampil “apa adanya” tentu tidak efisien, kacau dan Loading Time sangat lambat, sehingga berpengaruh negatif terhadap search engine dan pengunjung pun akan pergi. Apa solusinya?

Efek Zoom Galeri Foto untuk website Toko Online

Image tidak bisa dipisahkan dari website Toko Online. Image dimaksudkan untuk memberi informasi efektif dan efisien karena alinea-alinea panjang bisa terwakili oleh 1 gambar. Image juga untuk unsur keindahan tampilan blog berfungsi sebagai background, header, logo, header slider, menu navigasi etc. Koleksi foto bagus dapat menjadi galeri foto seperti Toko Online Boneka Bagus.

jika Anda klik salah satu foto akan terjadi efek “Pembesaran” dan “Pengecilan.” Kita gunakan >JQuery dan plugin Zoomooz untuk membuat efek zoom.

Bagaimana membuat galeri foto dengan zooming effect?

• Step 1: Import Library Jquery dan Zoomooz.js

  Download semua library (framework) yang diperlukan. Untuk JQuery download dari Official Site. Untuk plugin Zoomooz download  dan Anda browsing saja di Google. Pasca download dan ekstrak, pastikan Anda mengetahui letaknya.
  
  
  Import library JQuery dan Zoomooz sebagai berikut :
  
  
  Lihar Tabel di bawah garis MERAH – pergi ke bagian bawah artikel ini (TABEL Snippet I)
  
  Pada baris 1 snippet I, diimport library JQuery ver. 1.4.4 Sesuaikan dengan versi yang Anda gunakan. Pada baris 2-5, kita import beberapa file library yang diperlukan, termasuk library inti zoomooz.js.

• Step 2: Siapkan dan Tampilkan Gambar di halaman dengan HTML

  Image bisa berasal dari album foto Anda, Flickr, Photobucket, Google Picasa etc. Kita akan mengambil foto dari http://lorempixel.com/ yang menyediakan ribuan image gratis siap pakai.
  
  
  Cukup dengan mengarahkan source image ke alamat dengan format http://lorempixum.com/600/600/ maka akan dihasilkan gambar secara random dengan ukuran 600 x 600 pixel. Kita juga dapat mengambil image kategori tertentu, misalnya format ttp://lorempixum.com/600/600/nature/.
  
  
  Untuk menampilkan image, kita “bungkus” dalam sebuah “ul” (un-ordered list). Kita juga membungkus “ul” dalam suatu <div> dengan id “gallery” dan class “zoom”. Hal tersebut untuk mempermudah CSS dan JQuery mengatur tampilan maupun pengaturan.
  
  
  Berikut ini snippet (potongan) untuk menampilkan gambar :
  
  
  Lihar Tabel di bawah garis BIRU – pergi ke bagian bawah artikel ini (TABEL Snippet II)
  
  

• Step 3: Percantik Galeri Foto dengan CSS

  Tanpa bantuan CSS, tampilan tentu berantakan. “Tugas” CSS adalah mengatur tampilan halaman secara umum seperti font, perataan dan sebagainya, lalu untuk mengatur tampilan image agar berjajar dalam sejumlah baris dan kolom. CSS juga yang akan mengatur ukuran halaman menjadi lebih kecil (thumbnail) dengan ukuran 100 x 100 pixel.
  
  
  Berikut ini potongan program CSS yang digunakan :
  
  
  Lihar Tabel di bawah garis HIJAU – pergi ke bagian bawah artikel ini (TABEL Snippet III)

• Step 4: Terapkan Efek Zoom

  Langkah terakhir adalah menerapkan efek zoom saat suatu image foto diklik. Untuk melakukan tidak sulit, karena cukup memanggil fungsi yang sudah didefinisikan oleh plugin JQuery, yaitu Zoomooz.
  
  
  Berikut ini snippet (potongan) programnya :
  Lihar Tabel di bawah garis ORANGE – pergi ke bagian bawah artikel ini (TABEL Snippet IV)

  
  

  Untuk membuat object dikenai efek perbesar (zoom) saat klik, cukup dengan memanggil fungsi zoomTo(). Baris 3-6 terlihat selector class “zoom” akan menjadikan image dan area gallery kena efek zooming. Baris 7-11 akan menjadikan halaman secara keseluruhan juga memiliki efek zoom saat diklik.

• Step 5: Coba dan Lihat hasilnya.

  Kita lihat hasilnya. Dibawah ini tampilan Awal Halaman Galeri Foto.
  
  
  
  
  
  
  
  

  

   DEMO : KLIK SAJA GAMBAR DIATAS
                 Tampilan Foto Saat Diklik (Zooming)
  

Demo dan Download

*      Lihat demo program secara langsung disini.
**    Download Program Lengkap (termasuk JQuery dan plugin Zoomooz)
***  Download Tutorial Lengkap (PDF)

Referensi

1. Situs Resmi JQuery, http://jquery.com
2. Plugin Zoomooz.js
3. Create an Awesome Zooming Web Page With jQuery, http://designshack.co.uk/?p=20521
4. http://achmatim.net/2011/05/29/membuat-efek-zoom-pada-galeri-foto-dengan-jquery-zoomooz/

---

Code block Snippet I kelengkapan STEP 1 - Import library JQuery dan Zoomooz                   

1. <script type="text/javascript" src="zoomooz/lib/jquery-1.4.4.js"></script>
2. <script type="text/javascript" src="zoomooz/lib/sylvester.js"></script>
3. <script type="text/javascript" src="zoomooz/js/purecssmatrix.js"></script>
4. <script type="text/javascript" src="zoomooz/js/jquery.animtrans.js"></script>
5. <script type="text/javascript" src="zoomooz/js/jquery.zoomooz.js"></script>

---

Code block    Snippet II Kelengkapan STEP 2 - snippet untuk menampilkan gambar                  

1. <div id="headline">
2. <h1>Galeri Foto</h1>
3. <p>Klik gambar untuk Perbesar foto dan klik di luar foto untuk memperkecil</p>
4. </div>
5.  
6. <div id="gallery" class="zoom">
7. <ul>
8. <liclass="zoom"><imgsrc="http://lorempixum.com/600/600/people/1"/></li>
9. <liclass="zoom"><imgsrc="http://lorempixum.com/600/600/people/2"/></li>
10. <li class="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li>
11. <li class="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li>
12. <li class="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li>
13. <liclass="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li>
14. <li class="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li>
15. <li class="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li>
16. <li class="zoom"><img src="http://lorempixum.com/600/600/people/9"/></li>
17. <li class="zoom"><img src="http://lorempixum.com/600/600/people/10"/></li>
18. <li class="zoom"><img src="http://lorempixum.com/600/600/nature/1"/></li>
19. <li class="zoom"><img src="http://lorempixum.com/600/600/people/2"/></li>
20. <li class="zoom"><img src="http://lorempixum.com/600/600/people/3"/></li>
21. <li class="zoom"><img src="http://lorempixum.com/600/600/people/4"/></li>
22. <li class="zoom"><img src="http://lorempixum.com/600/600/people/5"/></li>
23. <li class="zoom"><img src="http://lorempixum.com/600/600/people/6"/></li>
24. <li class="zoom"><img src="http://lorempixum.com/600/600/people/7"/></li>
25. <li class="zoom"><img src="http://lorempixum.com/600/600/people/8"/></li>
26. </ul>
27. </div>

---

Code block   Snippet III - Kelengkapan STEP 3 - Snippet CSS yang digunakan                               

1. <style type="text/css">
2. * {
3. margin: 0;
4. padding: 0;
5. }
6.  
7. /*Text Styles*/
8.  
9. #headline {
10. text-align: center;
11. margin: 20px 0;
12. }
13.  
14. h1 {
15. font-family: 'Arvo', Georgia, Times, serif;
16. font-size: 50px;
17. line-height: 65px;
18. }
19.  
20. p {
21. font-family: 'PT Sans', Helvetica, Arial, sans-serif;
22. font-size: 13px;
23. line-height: 25px;
24. }
25. /*Gallery Styles*/
26.  
27. #gallery {
28. width: 720px;
29. height: 370px;
30. margin: 0 auto;
31. padding: 10px;
32. background: #383131;
33. }
34.  
35. /*List Styles*/
36. ul {
37. list-style-type: none;
38. position: absolute;
39. width: 720px;
40. }
41. #gallery ul li {
42. float: left;
43. margin: 10px;
44. background: white;
45. height: 100px;
46. width: 100px;
47. }
48.  
49. #gallery ul li:hover {
50. border: 3px solid white;
51. margin: 7px;
52. }
53.  
54. #gallery ul li img{
55. height: 100px;
56. width: 100px;
57. }
58.  
59. </style>

---

Code block  TABEL IV – Kelengkapan STEP 4  - snippet program memanggil fungsi                       

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $(".zoom").click(function(evt) {
4. evt.stopPropagation();
5. $(this).zoomTo();
6. });
7. $(window).click(function(evt) {
8. evt.stopPropagation();
9. $("body").zoomTo();
10. });
11. $("body").zoomTo();
12. });
13. </script>

---

SITEMAP

PETA WEBSITE DESIGN

THANK YOU for your continued liking 'n sharing. If you haven't liked this post yet, you may do that by hitting the buttons just BELOW. Please drop your comment and questions ……

Anda sedang membaca JQuery Zoomooz : Zoom Effect on Gallery - website files

Posted in: Animation,CSS-series,HTML-series,Javascript,jQuery,Script-code,Toko-Online,Website-engineering