Membuat Foto Gallery Dengan JQuery

Diposkan oleh Hery Prasetyo Saturday, April 17, 2010
بسم الله الرحمن الرحيم

Membuat Foto Gallery Dengan JQuery. sebenarnya tutorial ini belum terlalu sempurna, tapi HAPIA Mesir anggap sudah cukup untuk membuat foto gallery dengan thumbnail. memanfaatkan JQuery untuk mempercantik tampilan, sehingga gallery ini tampil terlihat acak dan bisa di Drop kekanan, kekiri, atas dan kebawah.

Membuat Foto Gallery Dengan JQuery
Untuk melihat contoh silahkan klik tombol demo berikut :

Membuat Foto Gallery Dengan JQuery
Cara Membuat Foto Gallery Dengan JQuery ada sebagai berikut :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Cari code <head> dan letakkan script berikut dibawahnya :

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/g-script.txt' type='text/javascript'/>

- Cari code ]]></b:skin> dan copy paste code CSS berikut diatasnya :

#gallery{
/* The pics container */
width:500px;
height:580px;
position:relative;
}

.pic, .pic a{
/* Each picture and the hyperlink inside it */
width:100px;
height:100px;
overflow:hidden;
}

.pic{
/* Styles specific to the pic class */
position:absolute;
border:5px solid #EEEEEE;
border-bottom:18px solid #eeeeee;

/* CSS3 Box Shadow */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
}

.pic a{
/* Specific styles for the hyperlinks */
text-indent:-999px;
display:block;
/* Setting display to block enables advanced styling for links */
}

label, input{
/* The modal dialog URL field */
display:block;
padding:3px;
}

label{
font-size:10px;
}

fieldset{
border:0;
margin-top:10px;
}

- Simpan Template.

Berikutnya adalah code untuk foto-foto yang akan anda buat gallery bisa anda letakkan dipostingan. ikuti cara dibawah ini :

- Buat postingan yang akan anda jadikan foto gallery anda.
- Copy paste code berikut untuk membuat gallery didalamnya :

<div id="gallery">
<div style="cursor: -moz-zoom-in;top: 102px; left: 261px; background: url(&quot;http://LINK-FOTO-1.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(5deg);" class="pic ui-draggable" id="pic-1"><a onclick="window.open('LINK-FOTO-1.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO</a></div>
<div style="cursor: -moz-zoom-in;top: 163px; left: 66px; background: url(&quot;http://LINK-FOTO-2.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-1deg);" class="pic ui-draggable" id="pic-2"><a onclick="window.open('http://LINK-FOTO-2.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 2</a></div>
<div style="cursor: -moz-zoom-in;top: 223px; left: 14px; background: url(&quot;http://LINK-FOTO-3.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(29deg);" class="pic ui-draggable" id="pic-3"><a onclick="window.open('http://LINK-FOTO-3.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 3</a>
</div>
<div style="cursor: -moz-zoom-in;top: 387px; left: 312px; background: url(&quot;http://LINK-FOTO-4.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-2deg);" class="pic ui-draggable" id="pic-4"><a onclick="window.open('http://LINK-FOTO-4.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 4</a>
</div>
<div style="cursor: -moz-zoom-in;top: 285px; left: 387px; background: url(&quot;http://LINK-FOTO-5.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(6deg);" class="pic ui-draggable" id="pic-5"><a onclick="window.open('http://LINK-FOTO-5.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 5</a>
</div>
<div style="cursor: -moz-zoom-in;top: 400px; left: 19px; background: url(&quot;http://LINK-FOTO-6.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(26deg);" class="pic ui-draggable" id="pic-6"><a onclick="window.open('http://LINK-FOTO-6.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 6</a>
</div>
<div style="cursor: -moz-zoom-in;top: 298px; left: 110px; background: url(&quot;http://LINK-FOTO-7.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(33deg);" class="pic ui-draggable" id="pic-7"><a onclick="window.open('http://LINK-FOTO-7.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 7</a>
</div>
<div style="cursor: -moz-zoom-in;top: 57px; left: 133px; background: url(&quot;http://LINK-FOTO-8.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-15deg);" class="pic ui-draggable" id="pic-8"><a onclick="window.open('http://LINK-FOTO-8.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 8</a>
</div>
<div style="cursor: -moz-zoom-in;top: 10px; left: 201px; background: url(&quot;http://LINK-FOTO-9.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(35deg);" class="pic ui-draggable" id="pic-9"><a onclick="window.open('http://LINK-FOTO-9.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 9</a>
</div>
<div style="cursor: -moz-zoom-in;top: 419px; left: 170px; background: url(&quot;http://LINK-FOTO-10.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-16deg);" class="pic ui-draggable" id="pic-10"><a onclick="window.open('http://LINK-FOTO-10.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 10</a>
</div>
<div style="cursor: -moz-zoom-in;top: 174px; left: 228px; background: url(&quot;http://LINK-FOTO-11.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(5deg);" class="pic ui-draggable" id="pic-11"><a onclick="window.open('http://LINK-FOTO-11.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 11</a>
</div>
<div style="cursor: -moz-zoom-in;top: 338px; left: 318px; background: url(&quot;http://LINK-FOTO-12.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(38deg);" class="pic ui-draggable" id="pic-12"><a onclick="window.open('http://LINK-FOTO-12.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 12</a>
</div>
<div style="cursor: -moz-zoom-in;top: 253px; left: 157px; background: url(&quot;http://LINK-FOTO-13.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-18deg);" class="pic ui-draggable" id="pic-13"><a onclick="window.open('http://LINK-FOTO-13.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 13</a>
</div>
<div style="cursor: -moz-zoom-in;top: 87px; left: 373px; background: url(&quot;http://LINK-FOTO-14.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-21deg);" class="pic ui-draggable" id="pic-14"><a onclick="window.open('http://LINK-FOTO-14.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 14</a>
</div>
<div style="cursor: -moz-zoom-in;top: 78px; left: 60px; background: url(&quot;http://LINK-FOTO-15.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-4deg);" class="pic ui-draggable" id="pic-15"><a onclick="window.open('http://LINK-FOTO-15.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 15</a>
</div>
<div style="cursor: -moz-zoom-in;top: 277px; left: 204px; background: url(&quot;http://LINK-FOTO-16.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(37deg);" class="pic ui-draggable" id="pic-16"><a onclick="window.open('http://LINK-FOTO-16.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 16</a>
</div>
</div>

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

30 Responses to Membuat Foto Gallery Dengan JQuery

  1. Rock Says:
  2. Nanti bikin loading jadi tambah berat gak sob?

     
  3. HAPIA Mesir Says:
  4. Rock@ kan namanya gallery foto sob..jadi ya tergantung banyak g nya fotonya...

     
  5. Rizky2009 Says:
  6. wahhhhhhhh panjang bgt scriptnya sob, blog q dah berat bgt'e

     
  7. aryadevi Says:
  8. top posting!...simpan

     
  9. Beben Says:
  10. mantap mantaaapppp....goood i like jQuery or mootools..LoL

     
  11. BeDa Says:
  12. Bagus juga. Ada blog test-nya juga. Bisa ditiru.

    Syukran infonya. Salam ukhuwah

     
  13. Keren mas!!!

     
  14. Beben Says:
  15. banyak atuh...w3school ada jg, kalo gak ke smashingmagazine....HTML5?
    tp blon support semua sob...?

     
  16. bolej juga shob tutorialnya, terimakasih atas pencerahannya

     
  17. Anas Says:
  18. Duh, Anas harus mikir-mikir untuk makai jquery soalnya pasti berpengaruh pada akses website. Webku udah lama banget..

     
  19. Anas Says:
  20. Makasi mas.. Mungkin bagi teman-teman blogger yang lain tidak ada salahnya untuk mencoba. dan ini sangat menarik..

     
  21. tutorialnya mantab, btw kira2 seberapa besar pengaruhnya sewaktu loading blog, sahabat ... ? Salam

     
  22. Reni Says:
  23. Bagus juga... bisa dipertimbangkan utk dicoba niy hehehe

     
  24. deny Says:
  25. kerend inih kang bisa di coba nnih........

     
  26. langsung sedooott...thanx sob atas ilmunya

     
  27. sabirinnet Says:
  28. mantap dan patut untuk dicoba. murah ilmu murah rejeki, amin

     
  29. akhatam Says:
  30. Wah mantep Hapia Triknya.. tapi gak berani sob pake Jquery.. Soalnya Berat banget...

     
  31. sepertinya kok ribet ya mas....

     
  32. Gieterror Says:
  33. ow.. ternyata beegitu ya sob caranya....

     
  34. Bunglon Blog Says:
  35. asalamualikum...
    wah demonya kren ya sob, mantep dah
    patut di coba biar lebih berasa! hehe
    thanks sharingnya
    Sukses Slalu!

     
  36. Imoel Says:
  37. wah, ternyata begitu doang ya sob..
    thank for your sharing

     
  38. arif Says:
  39. ijin copy gan, buat belajar, keren :D

     
  40. denie Says:
  41. halooo sooob gimana kabarnya

     
  42. jun Says:
  43. keren banget kak :D

    ini dia yang mungkin saia cari, saia soalnya mau bkin blog khusus untuk hasil jepertan saia :D

     
  44. riz Says:
  45. ok asyk nch bwt yg suka pasang PICt..
    cocok plus tampilannya yg keren...
    nambah layak patutdicuba

     
  46. anno Says:
  47. yang buat wordpress nggak ada ya bro?

     
  48. keren banget... cocok buat blogger narcis

     
  49. sip sip, mantab tutorialnya. bisa dicoba utk blog satunya nih

     
  50. RiszPanic Says:
  51. wahh keren ini ka..
    dicoba iy..hehehe

     
  52. Terimakasih atas tutorialnya....saya coba...

     

Post a Comment