bakalimbir: HTML Kodlarıyla Jquery Resim Galerisi

17 Mart 2013 Pazar

HTML Kodlarıyla Jquery Resim Galerisi

HTML kodlarıyla Resim Galerisi.
Siteme Resim Galerisi Nasıl Eklerim?
HTML Kodu Jquery Resim Galerisi Yapımı.
Blogger, WordPress Resim Galerisi Ekle.
İleri geri butonlu resim galerisi yapımı.

Jquery bir javascript kütüphanesidir. Hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltması sebebiyle birçok sitede, eklentilerde kullanılır. Resim galerileri pek çok sitenin vazgeçilmez öğelerinden biridir. Resimlerinizi ne kadar etkili ve başaralı sunarsanız bu size o kadar artı olarak dönecektir. Bu yazıda HTML kodlarıyla Jquery resim galerisi oluşturacaz. İstediğiniz kadar resmi ekleyebilir, ileri ve geri butonlarıyla yönlendirebilirsiniz. Blogger, WordPress veya websitenizde kullanabileceğiniz uygulaması basit ve güzel bir resim galerisi.

<style type='text/css'>
#broder{width:580px;height:440px;background:#333;border:3px solid #666;position:relative;margin:30px auto 20px;}
#slide{width:480px;height:360px;overflow:hidden;position:absolute;left:49px;top:29px;background:#fff;border:0px solid #698639;border-color:#698639 #e0ebcb #e0ebcb #698639;}
#slide a{width:480px;height:360px;text-decoration:none;display:block;position:absolute;left:480px;}
#slide a img{display:block;border:0;}
#title{width:131px;height:132px;position:absolute;left:5px;top:-30px;}
#previous{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bMvmWEddobw0UB_eAptbCBKWTC1cuKNZXMGjD4a8lKp6SQLP76MUR0_cxg9rpnz_SOvRlkis4LQy9_-LchukGrHcPadGYgGvkAoCdnEMmrfyaRDwjVNBI_P4jLr-mCBXdjktzyMIkI0F/s1600/slide-left.png);position:absolute;left:5px;top:175px;cursor:pointer;}
#next{width:74px;height:74px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wuuM4v-VMtNOaXDvvwzukhaW-EHnCeYo9qZjt9169SAZ_K0pJ2wUvPnYCz8JPLonxZ0g0ZkSpVFWnDkUJue6hbLH9ZGFEakzPNU-q0uG51EzMupSm2dV3zRvIkNH_M13Uu3XuK1f884u/s1600/slide-right.png);position:absolute;left:510px;top:175px;cursor:pointer;}
#buttons{position:absolute;left:50px;top:405px;}
#buttons div{width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNrN_oUhkNQ0DWsZaYmyDP_uZl8RacwCKvqTDQ0dfbqGA5Xoq_Dme4hzVsIya09LEoffggiazgq5qKLq4qdrFhJOIU7_1OX6nVhI1UrIaRsZj1xwva83i3mhpz8SlBT1eBNUHFjI9veHru/s1600/slide-button.gif);float:left;margin-right:5px;display:inline;}
#buttons div b{display:block;width:20px;height:20px;line-height:19px;font-family:arial, sans-serif;font-size:11px;color:#16a;text-align:center;cursor:pointer;}
img#loading{position:absolute;left:240px;top:170px;}
#previous b,#next b{display:none;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/jquery-slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
current = 1;
button = 1;
images = 8;
width = 480;
$('#p1').animate({"left": "0px"}, 400, "swing");
$('#b1').css("backgroundPosition", "left bottom")
$('#b1 b').css("color","#fff");
$("#next").click(function() {
button = current;
current++
if (current == (images+1) ) {current = 1}
animateLeft(current,button)});
$("#previous").click(function() {
button = current;
current--
if (current == 0 ) {current = images}
animateRight(current,button)});
$("#buttons div").click(function() {
button=current;
clickButton = $(this).attr('id');
current = parseInt(clickButton.slice(1));
if (current > button) {animateLeft(current,button)}
if (current < button) {animateRight(current,button)}});
$("#buttons div b").mouseover(function() {
if (($(this).css("color")) == "#16a" || ($(this).css("color")) == "rgb(17, 102, 170)") {$(this).css("color","#000");}});
$("#buttons div b").mouseout(function() {
if (($(this).css("color")) == "#000" || ($(this).css("color")) == "rgb(0, 0, 0)") {$(this).css("color","#16a");}});
function animateLeft(current,button) {
$('#p'+current).css("left",width +"px");
$('#p'+current).animate({"left": "0px"}, 400, "swing");
$('#p'+button).animate({"left": -width+"px"}, 400, "swing");
setbutton()}
function animateRight(current,button) {
$('#p'+current).css("left",-width+"px");
$('#p'+current).animate({"left": "0px"}, 400, "swing");
$('#p'+button).animate({"left": width+"px"}, 400, "swing");
setbutton()}
function setbutton () {
$('#b'+button).css("backgroundPosition", "left top")
$('#b'+button+' b').css("color","#16a");
$('#b'+current).css("backgroundPosition", "left bottom")
$('#b'+current+' b').css("color","#fff");}});
</script>
<div id="broder">
<div id="slide">
<img alt="loading" id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif" />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" id="p1"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWRtMOXUShttegTqj3JNgYIg6zF3P_akrCIjpjYQzFsWZl5esiMUVpOr4crV1XkekTGSaWbn5ev6bG65js9GAhuBOJ3gzFF0LxYBACZOB1Wg9U61KyfuhyvURMdwkU1eKrfylfxit6VGq/s1600/ol.jpg" width="480" alt="Meftun Apart Front" title="Meftun Apart Front"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" id="p2"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCxvYpDupuhvACPqUOhshjWPA_YbNeabqeiAxkjfMKb4_X_E8JQ3MWlCzlfYRey6JMYhyphenhyphenDsdNOUkqrTrYj67xtROx30wQcsaNZ5-LFywVWGWK0_PdryGa72aKZmN7tfuxIjUoRBbSGJM3/s1600/havuz.jpg" width="480" alt="Meftun Apart Havuz" title="Meftun Apart havuz"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" id="p3"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVeFIu3vF0hEqI2q6eU1h_2aMhjoC-sAIPLrKpgWK5xlmtjEHjoJPG8u6ZWCIgtUiL8FbXqJd-aRahoRpRjt4eH1ThEJr0yhcokopgoZT8bOBo1k0C-95Th0NcI6twb6jpnsq-t_42nq5A/s1600/salon.jpg" width="480" alt="Meftun Apart Salon" title="Meftun Apart Salon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" id="p4"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSbt-gUpE5GI8TaNO9zYur8LjKcgcQElm4UQhy_7sboWtl7bMbn3RfMWAqlex93GrgqxlCr9sQS1MB_MlT1J2FA1c3iWmh314YaryDv01qYGQGFNTZXqGcrBN7jIpL9iDUIpDkQ7sqLWNX/s1600/balkon.jpg" width="480" alt="Meftun Apart Balkon" title="Meftun Apart Balkon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" id="p5"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0KKiv0EnGhbnEZcVH1znYjKrf6FKBVMTfCkS5F6KA8zvloohI8I7neFZr7cz1EfEBVfjH7U3hETKUwh7G9Tq9TvcsBEhUPnqyqyDDtckmSsRwAVWm-_2IcPNMMMkjWeBLtD9EDFbsLLX/s1600/meftun_aparts9b.jpg" width="480" alt="Meftun Apart Açık mutfak" title="Meftun Apart Açık Mutfak"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" id="p6"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOfrOMLfZ55DW3sxkzVbJseG88HmYairzGbOcTcHl4UBkA8aa6QZd0rsenZ6NiGcSlr1Z38arxjNA5UceXEU1opa2_4tEBrUWU_qe2Hc-dmUbpC_bB2t7k_b7A_UJu5d1EwiqnDU_no0_l/s1600/meftun_aparts10b.jpg" width="480" alt="Meftun Apart Yatak odası-1" title="Meftun Apart Yatak odası-1"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" id="p7"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3itzFlULdcB-P0jBT6hXL9SmxOzl5akvv6OtS_LhVaLjWPaAbXafI461rqbBbvOTQ8kmswchVpHOVs9F68pC5N2DXnVnZ5RCQCCxiXDMF_NBykOCnWQvV4f_VTdzPTXC_qD3ibZ1eVx2/s1600/5.JPG" width="480" alt="Meftun Apart Yatak odası-2" title="Meftun Apart Yatak odası-2"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" id="p8"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMHCK9saukfIwJdLZCF-UJU2W3sc2Imi08JbFPGvWWPj4eOwIOtSL2GhidNQj23_DKr1sXK3bzsVTdJT-J-91ETm9NBN_96Bo8cX92EZP3Hx9Ppz8RsPcBF54LE54K9DOIyA2kjuO2Kdg/s1600/7.JPG" width="480" alt="Meftun Apart WC&Banyo" title="Meftun Apart WC&Banyo"/></a>
</div>
<div id="previous">
<b>Önceki</b></div>
<div id="next">
<b>Sonraki</b></div>
<div id="buttons">
<div id="b1">
<b>1</b></div>
<div id="b2">
<b>2</b></div>
<div id="b3">
<b>3</b></div>
<div id="b4">
<b>4</b></div>
<div id="b5">
<b>5</b></div>
<div id="b6">
<b>6</b></div>
<div id="b7">
<b>7</b></div>
<div id="b8">
<b>8</b></div>
</div>
</div>

Script kodları arasındaki Mavi renkle belirttiğim alanları kendinize göre düzenleyin.
images = 8; Kaç tane resim kullanıyorsanız, (Örnekte 8 adet resim kullanılmıştır.)
width = 480; Kullandığınız resimlerin genişliği

Ve son olarak Kırmızı renkle belirttigim alanları kendinize göre düzenleyin.
width:580px;height:440px; (width: Genişlik, height: Yükseklik)
width:480px;height:360px; (width: Genişlik, height: Yükseklik)
<a href="Resim Linkiniz" id="p1"><img height="360" src="Resim Linkiniz" width="480" alt="Resmin Adı" title="resmin üstüne gelince çıkacak yazı"/></a>

Örnek Resim Galerisi Önizleme: