Membuat Gallery Photo Thumbnail With jQuery

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmpEzPtzZHq9LTbgkLebtJ_3lBCJjPJsDSzMc0DAiXTgQZdh6K1jO0IXEpfnPn8EJNAIEK4L0lNqSEZUvtykOKsXe1Stk62Qds3xQ_F2R8z-EwdKaza5C_iOrI91bGW6HyaNxdfq-ZinSW/w550-h350-no/Helm+%252812%2529.jpg" title="Helm-Type 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuYxPy_rYsN0AK2daqssOiF-HWmTstw2228XEHyjPDcurg-KidPgy4zI3vMt3IfRs0DRFf5OLBkbDTXnsvNwBGMEUguHZrS7tDTfT52qOWhYcZ2dEcFXNF97ljpoYNzPxruJo3ZjqNCh2/w174-h195-no/Thumb-Helm+%252812%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGCf9PlG7okeEjnhWZVmqal5VUFStmMDG2AlXBiUJCYxTqWx647r6S1EHvX0uIqpTIhUnfzzNRn9Ub8aXrpdIO2UOovTQ6u7gitFeTiTitMwVzqUOuOos0hHkFvzyZn_zhRpqDb3QGaBs/w550-h350-no/Helm+%25282%2529.jpg" title="Helm-Type 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5eU35xx37qP6hlcIM6rKg_DiiYUM-cyJbEf6ZSQde_c5AgpQxigvVKPu1WICaGtWopQy2tpNA8dMp573NNbvKD2wrWacoqLf-g9xbyfF0xR1iYCVbGEdtFzeXENdEZtlrqhEPpXDohYH/w174-h195-no/Thumb-Helm+%25282%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfE7bGPVlaz9AGwudOowMvLv7MQA5Ztk4gepAFl9MjfCc3t5VRNkVbwQvxnu2Abs7eyesby2lZGkakyu70Gk4Sk9UvpDbLIl_Ou22BhtidsbwK9znjTRShB62e2fM4ZSg2AbKqmg_lBTQF/w550-h350-no/Helm+%25283%2529.jpg" title="Helm-Type 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgeWwaTD8F5fuDZmT98OsXn50YW3SNnxGxW1HHGEapXn9Ed7MfydcfWvPVDodDVu9w0WOz0A_ZT6lo22dRw6GD7zEMkZqgtavqEFtwN9PHhGJoeYJbyi2RhZwPgk4tclvc05LJKLC2adh/w174-h195-no/Thumb-Helm+%25283%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOWqqL0Y0mfITs9Be8M9co5lkp9tr0_aGl2-ft1XWF6v9GDzGGOcK__MeWja3V7DpZJ-t3fwjF5B2LpXcJf3kdsq3Fm_OOUOo9jfVuz3Uv29WmPvYUMCJZvKfkc2NDHB4C3GQjn8LHCq7N/w550-h350-no/Helm+%25284%2529.jpg" title="Helm-Type 5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyWbu3vVSf0I0AqRImCpCHPwJIl2CAoeR3GoVAoKswXtBAYPi1cj90jKJAWz7M7YBuemMAnIKBegK6JjrK8QDyV9GQBAiiJDz5SP0irRma7LfTrsLP8uO_JeT_CNqnMWFoXbKfxH4snaa/w174-h195-no/Thumb-Helm+%25284%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrtLZz2r4suK_SgUT-4HVfDh0nRgR1LaXklXdFj1apga2LGoxERegUFSkc14fnARQXap_RS26376scsmp94f0bul1YeBuBtHFWuotz6rqLPgVv7-322ZOzMH3bSYykoJ87v5Xe1-VWYr-/w550-h350-no/Helm+%25285%2529.jpg" title="Helm-Type 6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuPbOof8DbmPxsZAAZtrtWC18KzzeheYsKHCcoriIY3Igk1Fon6kmTFE61GIuZTwm_-O2KbaWDqwF2-aqmPRk3CB9yvT_614USNjeSCqSq1Fzqtk19fCPhsi-dtJ3Z-wakGitwq1npDH5/w174-h195-no/Thumb-Helm+%25285%2529.jpg" /></a>
</p>
<p><img id="largeImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7aMplE26iXNhq-P5cUJz2GU5PiPyrpz7ufLGNw5OAMilQqQrxRl2i5HasYp_tWXT7yr3uAe7wbwxyYoaF8hyphenhyphenZOcO0nulx-QxPqPCxvFomIPwSTohAc_22iEVOGAVENpJ32AU2CGF_ypfH/w550-h350-no/Helm+%252813%2529.jpg" alt="Large image" /></p>
<p class="thumbs">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnrgG4Sstds_0Ub7E0U6CShJWL4QX2k0m7iYx96hExs8x_OqZPXDgq7Le3-5mcOnTtyx2hb0eTis5BJxcuWxiyPBco2sNDtuuFSSye4sqDxgf_Ru0l9fvlhskFcL94zkSYUToeg26maQS/w550-h350-no/Helm+%25287%2529.jpg" title="Helm-Type 7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9UBWx3lU1uu6wbGeeNlR078QHOu3iM76N0REPczu961j6ODAjHWZy1DcWQ40fHpfNW74O6pMqT77VT7nJvLH4WRS2k9VhN0zcSmlor7vXDBxcnwKCX_gauAf6uhxvOu0ibeU4TJO5hNyf/w174-h195-no/Thumb-Helm+%25287%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSRbcKE-oBOnKsy6PSlOQ0Fo2FvTgDVqfDTConH08nzqITc4xSH9d-n1qOVeQAXeCtlWDHJzXK25-dcyW7qng0P8xPgVy1oq4liSuqaKUBdGh_ktzRP5WdGXYSTmwGvDmss_q4slpK2ZI/w550-h350-no/Helm+%25288%2529.jpg" title="Helm-Type 8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qO7YtNhyjSn0OV-u4mN2WCu_LNSHMIZ_saPn1xhb5GTge356yUKGKRF9v_zE5VCaXjTbqcQmreai3km3A676wA5sI3Q78qUGvM_iTyHtzmNBQ5epveV83ZOiuPo3sxTnE3NG-aunoP6t/w174-h195-no/Thumb-Helm+%25288%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfhvWovnx-LOfnIkL7uARFqzgStQQrCxdftxN3wmyPP-Aa7u-22R1Exs_wJhFwOP6nzj_zcWRgtavkiJcdenWdOJ6vSc3xsjPmezYRWz9EwjqAEnYxqxhAc0tUfMinXAkTmw8Gd9Fk3zC/w550-h350-no/Helm+%25289%2529.jpg" title="Helm-Type 9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3rXXD8C82uuc_mDHJO1M0iuig6kNPOQoPVu8wY6TzRoeOBmbnOP5rhTimHRFfUSDAGaiA89U51yXnsBVSzvRiclNCvRg-CKEUlzy8ctbxg_WRIJSzVcuF5dRxx8Ntvavl40uSP_a0ea3/w174-h195-no/Thumb-Helm+%25289%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhl1Gxu_WydPVjRwcv30pk31AeujhU27G9twaJagH-OOy80YjRC3990oY14uadYXWrRQjXtH43IQgP4Z1vdVJNlHvtUsm9qgtvMCP3_mYJa50EKuyvMGCP8iKjHwUW73sq4tJq1cp9JTdH/w550-h350-no/Helm+%252810%2529.jpg" title="Helm-Type 10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj08Y-377ABl_LIPd208qd1Cb8pwhoA8h4J_MzyzIWAi8MCxSMvIBRuZYP1mf8DRcFchiLZrWqJDmrSSpD9DCcm7AR0cu_SRm1mo6VWTB6k8slywKzAp5a4jkzb5fYCVqOEFoyCPnJaz6Yk/w174-h195-no/Thumb-Helm+%252810%2529.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIAxAAbud-3en-qg5SQma0Pau8ae8NexPd9CZX9bTUmFhe5ShnWbCd3PNneSOtjDMCxkxnHiftHwzm7ei_bV7OjVdeDOoj4P49vLjAqxxuFJE98KYDeoyS2eWiuI9CIMT5mAXBtQtGZbT9/w550-h350-no/Helm+%25281%2529.jpg" title="Helm-Type 11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxklBg0R4Weyq1cVji5KDooj_aKZ4qfAiBBrkztpEM6FRAe-CFVkrnyw6ILPEVf7YfYYns5s3OxXFCLa-W58B3NPn5HxYmIVn6JbMWXbohfozcuAcsTagWHKkaqNgfdROX2f5-0aCxv_l/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.