Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Gallery Photo Thumbnail With jQuery

Gallery Photo Thumbnail Helm
Membuat Gallery Photo Thumbnail With jQuery – masih seperti tema pada postingan sebelumnya yakni modifikasi gambar pada posting blog, dan tema kali ini adalah tentang gallery photo. Untuk membuat gallery photo pada posting blog terdapat bermacam cara dan berbagai efek yang dapat mengcustom gambar atau photo tersebut. Jika pada saat akan mengupload photo ke blog dan terdapat banyak photo yang akan di upload kedalam satu halaman posting agar photo-photo tersebut memiliki style layout yang minimalis maka perlu sedikit melakukan customisasi pada gambar hanya dengan menambahkan kode yang simple untuk memperoleh hasil maksimal yang akan menghias halaman blog dengan mengatur photo tersebut supaya dapat bervariasi. Untuk melakukan hal ini tidaklah rumit seperti jika sudah anda bayangkan sebelumnya. Langkah singkat dan efisien untuk membuat gallery photo di blog dengan ukuran gambar yang sudah kita atur sebelumnya maka hanyak akan terdapat satu gambar berukuran besar dan disertai beberapa thumbnail yang mengelilingi photo tersebut dimana nantinya jika pada thumbnail tersebut di klik maka akan tampil gambar yang berukuran besar pada kolom utama yang terdapat dibagian tengah antara baris photo thumbnail atas dan bawah. Jika ingin melihat hasil yang akan kita bahas pada tutorial ini bisa langsung dilihat pada demo. Sedangakan selanjutnya untuk memasang ke blog, berikut adalah tutorial cara Membuat Gallery Photo Thumbnail With jQuery.

1. Login ke akun blogger.
2. Lalu copy kode dibawah ini.
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2").append('<em></em>')
$(".thumbs a").click(function(){  
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");      
$("#largeImg").attr({ src: largePath, alt: largeAlt });      
$("h2 em").html(" (" + largeAlt + ")"); return false;
});  
});
</script>
<style type="text/css">
#largeImg { border: solid 2px #52e052;
width: 530px; height: 350px; }
.thumbs img { border: solid 2px #52e052;
width: 100px; height: 100px; }
.thumbs img:hover { border-color: #FF9900; }
</style>

<h2>Gallery</h2>
<p class="thumbs">
<a href="https://lh4.googleusercontent.com/-Oj97dwpPy3k/Uc3YmS8qwaI/AAAAAAAAE-I/R2-6ufQDfRI/w550-h350-no/Helm+%252812%2529.jpg" title="Helm-Type 2"><img src="https://lh5.googleusercontent.com/-KWFUUQO48Ms/Uc3Yrjs9lDI/AAAAAAAAE_k/fiCf1-xUw-E/w174-h195-no/Thumb-Helm+%252812%2529.jpg" /></a>
<a href="https://lh4.googleusercontent.com/-zIuAIrtyUEs/Uc3Ym8gsTOI/AAAAAAAAE-Q/mZxZpXjw96s/w550-h350-no/Helm+%25282%2529.jpg" title="Helm-Type 3"><img src="https://lh4.googleusercontent.com/--A37c7XaGHY/Uc3YsTNd-JI/AAAAAAAAE_4/NACkHXMk8ws/w174-h195-no/Thumb-Helm+%25282%2529.jpg" /></a>
<a href="https://lh5.googleusercontent.com/-UjWQqGjwi7g/Uc3YnnhWWLI/AAAAAAAAE-Y/IGCgj3BC6zY/w550-h350-no/Helm+%25283%2529.jpg" title="Helm-Type 4"><img src="https://lh4.googleusercontent.com/-veGQ8AK5dqk/Uc3YssawILI/AAAAAAAAFAU/mcdVJlyE0Z8/w174-h195-no/Thumb-Helm+%25283%2529.jpg" /></a>
<a href="https://lh5.googleusercontent.com/-r7zzMexPQCE/Uc3Yobej1oI/AAAAAAAAE-k/kM-2RHDimik/w550-h350-no/Helm+%25284%2529.jpg" title="Helm-Type 5"><img src="https://lh5.googleusercontent.com/-U6wdO1rp40o/Uc3YtEAXkOI/AAAAAAAAFAI/bPQemTU7YUo/w174-h195-no/Thumb-Helm+%25284%2529.jpg" /></a>
<a href="https://lh3.googleusercontent.com/-bn3ePcTBgSs/Uc3Yo3WXS8I/AAAAAAAAE-0/YGfS0gAZ8j0/w550-h350-no/Helm+%25285%2529.jpg" title="Helm-Type 6"><img src="https://lh5.googleusercontent.com/-htlpi4AifV0/Uc3YtQu2dRI/AAAAAAAAFAM/qjDPsuBVpUg/w174-h195-no/Thumb-Helm+%25285%2529.jpg" /></a>
</p>
<p><img id="largeImg" src="https://lh4.googleusercontent.com/-YZE99QLjCpc/Uc3YmSiAz2I/AAAAAAAAE-E/KMR27d7PEMc/w550-h350-no/Helm+%252813%2529.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="https://lh5.googleusercontent.com/-oB9OvG950Y0/Uc3Ype3bUYI/AAAAAAAAE-4/-17IQs572gs/w550-h350-no/Helm+%25287%2529.jpg" title="Helm-Type 7"><img src="https://lh3.googleusercontent.com/-gMjJLiEzwMg/Uc3YuE61JOI/AAAAAAAAFAg/uAdIC1ikXX4/w174-h195-no/Thumb-Helm+%25287%2529.jpg" /></a>
<a href="https://lh5.googleusercontent.com/-lrLY7xeuVLQ/Uc3Yp9AlkPI/AAAAAAAAE_E/WWUdi99IUKA/w550-h350-no/Helm+%25288%2529.jpg" title="Helm-Type 8"><img src="https://lh3.googleusercontent.com/-eEVhQwYoNy4/Uc3YuXLUXKI/AAAAAAAAFAk/ImFvnLUsMJw/w174-h195-no/Thumb-Helm+%25288%2529.jpg" /></a>
<a href="https://lh4.googleusercontent.com/-HEHZbJKWAbQ/Uc3YrD3fqzI/AAAAAAAAE_o/I0EGvf92nAo/w550-h350-no/Helm+%25289%2529.jpg" title="Helm-Type 9"><img src="https://lh3.googleusercontent.com/-GWP_HcJQf6Y/Uc3Yu0eiPUI/AAAAAAAAFAw/aKZz6CILKLk/w174-h195-no/Thumb-Helm+%25289%2529.jpg" /></a>
<a href="https://lh5.googleusercontent.com/-kiXa-DYsPpQ/Uc3YlZqfysI/AAAAAAAAE94/wr7iJ8CWJ64/w550-h350-no/Helm+%252810%2529.jpg" title="Helm-Type 10"><img src="https://lh4.googleusercontent.com/-B0fwIL9S-tA/Uc3Yq9cf0jI/AAAAAAAAE_Q/lSABM46PpUY/w174-h195-no/Thumb-Helm+%252810%2529.jpg" /></a>
<a href="https://lh4.googleusercontent.com/-S954bmjVOoU/Uc3YlIgPNmI/AAAAAAAAE9s/6y27kV6mE7U/w550-h350-no/Helm+%25281%2529.jpg" title="Helm-Type 11"><img src="https://lh4.googleusercontent.com/-UjLfa9_6EtM/Uc3YqfhJuTI/AAAAAAAAE_I/mVkARFt6fq4/w174-h195-no/Thumb-Helm+%25281%2529.jpg" /></a>
</p>
Keterangan:
Ganti URL gambar dengan yang di inginkan.

3. Selanjutnya paste kode tersebut kedalam area posting mode HTML, lalu klik Publikasikan.

DEMO:
Klik gambar yang kecil.

Helm Keren Helm Keren Helm Keren Helm Keren Helm Keren

Helm Keren

Helm Keren Helm Keren Helm Keren Helm Keren Helm Keren

Berlangganan artikel via email

25 Response to "Membuat Gallery Photo Thumbnail With jQuery"

gak ngerti gue gan bahasa jquerynya ribett..... tetep nulis ya gan..

Balas

Ini yang saya cari Mas Andes, soalnya saya sering posting spesifikasi produk, dengan galery ini bisa bagus. Terima kasih sharenya Mas Andes.

Balas

wah saya lihat ini gambar yang mantap dan keren sobat, lihat helm dengan rambut dan telinga sepertinya ini cocok sekali untuk pengendara motor...hehe.

Balas

jumlah gambarnya bisa kita kurangin atau kita tambahkan ya mas... :)

oh ya mas..untuk url gb nya ...lewat Photobucket ndak ngaruh bikin berat jg kan...
thx nih mas buat tutor kerennya :)

Balas

gak ngaruh mas, yang ngaruh original size gambar.
sebaiknya size gambar maksimal 70 kb, sebelum upload gambar bisa dilihat dulu sizenya :)

Balas

mantap mas bisa jadi kayak gini,,
eh btw itu helm nya gaul2 yah,,hahaa

Balas

wah bakaln keren neh kalau ada yang thumb-thumb gitu sob ..sip lah mantapzzz
saya suka sob

Balas

waw keren banget... siip dah izin nyimak dan langsung praktek heheheh

Balas

Hi! My best wishes for you. I am here today. Have a nice day! http://fotisbazakas.blogspot.gr

Balas

ini adalah cara yang paling saya suka.. langsung kopi paste ke postingan kan?? gak ada yang masuk ke edit templet

betewe helm apa wig ini??..
kalo pek helm ini bakal tetep ditelen sama polise haha.

Balas

helmnya itu unik dan seger , apalagi yg warna semangka

Balas
avatar
Anonymous

Wah Keren nih mas

Balas

wah keren banget nih ms andes

Balas

wah..jquery lagi...mantab bener tutorialnya...walau tak terlalu paham..saya coba untuk belajar dech :-)

Balas

aku pake ini kok <p dan </p nya jadi div .. jadi gak bisa muncul.

Balas

wah keren ya mas, jadi fotonya gak banyak makan ruangan..

Balas

kalo jadi div dirubah lagi ke <p> miz, itu masukinnya di posting yang HTML bukan compose. kalo udah di HTML jangan dirubah lagi ke compose. umpama biar lebih mudah kalo mau masukin tulisan dulu ya di compose. ntar pas udah selesai baru pindah ke HTML terus masukin tuh gambar. kalo udah tiinggal di preview aja dulu kalo mau liat gambarnya udah pas ato belum

Balas

asyik juga ya bisa posting banyak foto dengan tutorial dari mas Andes Membuat Gallery Photo Thumbnail With jQuery, semuanya jadi simple dan tetap menarik... makasih mas andes :)

Balas

hhuuhh tetep gak bisa.. begitu dik pencet gak muncul.

Balas

haha yo musti ditelen lah wong gak aa kaaca nya

Balas

keren neh mas andes,ada ada aja helm nya

Balas
avatar
Anonymous

Pusing sekali ni mas, tapi saya baca lagi deh supaya bisa membuat gallery photo :)

Balas
This comment has been removed by the author.
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Gallery Photo Thumbnail With jQuery" ini bermanfaat, share ke jejaring sosial.
Konversi Kode