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:
    April 18, 2010 at 3:02 AM

  2. Nanti bikin loading jadi tambah berat gak sob?

     
  3. Hery Prasetyo Says:
    April 18, 2010 at 3:10 AM

  4. Rock@ kan namanya gallery foto sob..jadi ya tergantung banyak g nya fotonya...

     
  5. Rizkyzone Says:
    April 18, 2010 at 5:25 AM

  6. wahhhhhhhh panjang bgt scriptnya sob, blog q dah berat bgt'e

     
  7. Aryadevi Says:
    April 18, 2010 at 6:43 AM

  8. top posting!...simpan

     
  9. Beben Koben Says:
    April 18, 2010 at 7:26 AM

  10. mantap mantaaapppp....goood i like jQuery or mootools..LoL

     
  11. BeDa Says:
    April 18, 2010 at 7:41 AM

  12. Bagus juga. Ada blog test-nya juga. Bisa ditiru.

    Syukran infonya. Salam ukhuwah

     
  13. Dheny Gnasher Says:
    April 18, 2010 at 7:43 AM

  14. Keren mas!!!

     
  15. Beben Koben Says:
    April 18, 2010 at 8:56 AM

  16. banyak atuh...w3school ada jg, kalo gak ke smashingmagazine....HTML5?
    tp blon support semua sob...?

     
  17. Iklan baris gratis tanpa daftar Says:
    April 18, 2010 at 9:49 AM

  18. bolej juga shob tutorialnya, terimakasih atas pencerahannya

     
  19. Anas Says:
    April 18, 2010 at 10:45 AM

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

     
  21. Anas Says:
    April 18, 2010 at 10:48 AM

  22. Makasi mas.. Mungkin bagi teman-teman blogger yang lain tidak ada salahnya untuk mencoba. dan ini sangat menarik..

     
  23. BRI Jakarta Veteran Says:
    April 18, 2010 at 12:28 PM

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

     
  25. Reni Says:
    April 18, 2010 at 12:55 PM

  26. Bagus juga... bisa dipertimbangkan utk dicoba niy hehehe

     
  27. deny Says:
    April 18, 2010 at 1:57 PM

  28. kerend inih kang bisa di coba nnih........

     
  29. rumah blogger Says:
    April 18, 2010 at 2:49 PM

  30. langsung sedooott...thanx sob atas ilmunya

     
  31. sabirinnet Says:
    April 18, 2010 at 2:50 PM

  32. mantap dan patut untuk dicoba. murah ilmu murah rejeki, amin

     
  33. akhatam Says:
    April 18, 2010 at 4:58 PM

  34. Wah mantep Hapia Triknya.. tapi gak berani sob pake Jquery.. Soalnya Berat banget...

     
  35. trik tips bisnis online Says:
    April 19, 2010 at 3:53 AM

  36. sepertinya kok ribet ya mas....

     
  37. Gieterror Says:
    April 19, 2010 at 3:59 AM

  38. ow.. ternyata beegitu ya sob caranya....

     
  39. Blogger Says:
    April 19, 2010 at 7:31 AM

  40. asalamualikum...
    wah demonya kren ya sob, mantep dah
    patut di coba biar lebih berasa! hehe
    thanks sharingnya
    Sukses Slalu!

     
  41. Imoel Says:
    April 20, 2010 at 11:09 AM

  42. wah, ternyata begitu doang ya sob..
    thank for your sharing

     
  43. arif Says:
    April 22, 2010 at 4:39 AM

  44. ijin copy gan, buat belajar, keren :D

     
  45. denie Says:
    April 24, 2010 at 9:48 AM

  46. halooo sooob gimana kabarnya

     
  47. jun Says:
    April 25, 2010 at 4:19 AM

  48. keren banget kak :D

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

     
  49. riz Says:
    April 25, 2010 at 8:16 AM

  50. ok asyk nch bwt yg suka pasang PICt..
    cocok plus tampilannya yg keren...
    nambah layak patutdicuba

     
  51. anno Says:
    April 25, 2010 at 3:04 PM

  52. yang buat wordpress nggak ada ya bro?

     
  53. flexter syariah Says:
    April 25, 2010 at 3:05 PM

  54. keren banget... cocok buat blogger narcis

     
  55. ArenaBetting.com dukung fair play FIFA world cup AFSEL 2010 Says:
    May 1, 2010 at 8:43 PM

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

     
  57. Administrator Says:
    May 13, 2010 at 9:16 AM

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

     
  59. Santri Al-Muaawanah Says:
    November 17, 2010 at 12:16 PM

  60. Terimakasih atas tutorialnya....saya coba...

     

Post a Comment