Download MP3

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. Rock@ kan namanya gallery foto sob..jadi ya tergantung banyak g nya fotonya...

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

     
  6. Aryadevi Says:
  7. top posting!...simpan

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

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

    Syukran infonya. Salam ukhuwah

     
  12. Keren mas!!!

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

     
  15. bolej juga shob tutorialnya, terimakasih atas pencerahannya

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

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

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

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

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

     
  25. langsung sedooott...thanx sob atas ilmunya

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

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

     
  30. sepertinya kok ribet ya mas....

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

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

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

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

     
  39. denie Says:
  40. halooo sooob gimana kabarnya

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

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

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

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

     
  47. keren banget... cocok buat blogger narcis

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

     
  49. wahh keren ini ka..
    dicoba iy..hehehe

     
  50. Terimakasih atas tutorialnya....saya coba...

     

Post a Comment