HTML Kodlarıyla Jquery Resim Galerisi

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. Jquery Hız, performans, kullanım kolaylığı ve kodları inanılmaz şekilde kısaltması sebebiyle birçok sitede, eklentilerde kullanılır. Bu yazımda 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.

● 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ı.

Blogger'a ekleme

Eger uygulamayı blogunuza gadget olarak eklemek istiyorsanız;

Blogger kontrol panelinize giriş yapın.

Yerleşim › Gadget Ekle › HTML/JavaScript yolunu takip edin.

Ve aşağıdaki kodları isteğinize göre ayarlayarak, kopyalayıp yapıştırın.

Kaydet diyip çıkın.

Ayrıca paylaştığınız yazılarınızda, makalelerinizde çoklu resimlerinizi, bu resim galerisiyle, yazı içine yerleştirerek sergileyebilirsiniz.

<!--HTML Kodlarıyla Jquery Resim Galerisi by www.MeftunMede.com-->
<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/AVvXsEiwkYrFg7YlD1zR7A-rLz9u46fXDTPp6DasUVfTWKhtWWWcSKwzUCg9e92OIDmSwpJOm551Up_GTrPB-96BnDWTErS2JHmvL6GKw10argpQGGcFKiNkvbSMMB6Rx9XoEX7wtr3LkvtBqt99/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/AVvXsEjxAtEWbdwChxkLVD_U7SG36u71Nn_PQ7vbhhn2i0ahecRRUWDWPEQzqTqVQB9GeA8J5UfXmyGYInIBfOC6u8851BGlqQdhRG6E6otjdk9RDZY-U5QC67-z7u251ViTSoisP2QXirV_s8K5/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/AVvXsEgZ97EZhFJ7-Ji-YHFpeBh58zKbLo0RwHkJgjSAXLlvauBHxYJYXvmg3mp2sXFFZXjICSkUq2v3TalWCvcvx5EnFsJIo1s5FyP-LTiStmRc63jMOOgQIUXd7IKtHdqDrcpfmJhFOAcP_F4b/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="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
current = 1;
button = 1;
images = 8; // Slaytda gösterilecek resim sayısı
width = 480; // Slaytdaki resimlerin genişlik değeri (px)
$('#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/AVvXsEjCkRvnHYuekrxxn1K1Ncc-Sb1wTA9yUuuR5ujwlPUBWy_lg4zVLa8RgmCnhbYZymr-TLqVUWSTSH2kk8vfUeypkLf8IpVY17YAD3EuFwtRJ8xxaSERZW97hKVMb0lpSXxcs1f-C4DMyw1V/s1600/loading.gif" />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia12S5QD6pw4HGrf6YTVxsWQXoumsVDPXu1Z0PwoNpH5P_wu_e2SSbx2waa76nvb_rRu_MvqQ2bdtLUnZbQExJ5mIT0b4YQ4H915htLDdmRQ0YLFDgIMGv14kyCl7UVKn5IfokWdmZAPQq/s1600/ol.jpg" id="p1"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia12S5QD6pw4HGrf6YTVxsWQXoumsVDPXu1Z0PwoNpH5P_wu_e2SSbx2waa76nvb_rRu_MvqQ2bdtLUnZbQExJ5mIT0b4YQ4H915htLDdmRQ0YLFDgIMGv14kyCl7UVKn5IfokWdmZAPQq/s1600/ol.jpg" width="480" alt="Meftun Apart Front" title="Meftun Apart Front"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9y0vqkDgvRE-334FkFsHIaFlWKpa84d6VXP2QsqeAyBixB2tNpiyEdFoeNTvmsokmF4IbtmRL6nVh-ri5KKQ4MTybDbQE5HUmNtaWllkLTL6srePjc3PtxhONJlT019WQrVmLbySL5Qp/s1600/havuz.jpg" id="p2"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9y0vqkDgvRE-334FkFsHIaFlWKpa84d6VXP2QsqeAyBixB2tNpiyEdFoeNTvmsokmF4IbtmRL6nVh-ri5KKQ4MTybDbQE5HUmNtaWllkLTL6srePjc3PtxhONJlT019WQrVmLbySL5Qp/s1600/havuz.jpg" width="480" alt="Meftun Apart Havuz" title="Meftun Apart havuz"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mb3JcyFx-DVQp2ci1MCXkRUy5hJSJcAk8OM_33Jq8CpPTsiLXW052235JUTCmtTHxtLVvxWts9wuLtghMFC-HhdMdB_NqY65JvpiKzYZQhPz1woBcZIY48JBQOprtiu02IGt7kcAH2-B/s1600/salon.jpg" id="p3"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mb3JcyFx-DVQp2ci1MCXkRUy5hJSJcAk8OM_33Jq8CpPTsiLXW052235JUTCmtTHxtLVvxWts9wuLtghMFC-HhdMdB_NqY65JvpiKzYZQhPz1woBcZIY48JBQOprtiu02IGt7kcAH2-B/s1600/salon.jpg" width="480" alt="Meftun Apart Salon" title="Meftun Apart Salon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUiyARB_vN7OXtB6qCTCZB1VcdFDXrsPQvUHTsVop2zCalxJzAqqIXO0j2_0iAJ7eH1bzkqMRen0Le_7mec_6P5tS24UxIm0SSM-5rrPD7vct70OnIoOo_PDFUG9wTRmwca9NRIgW2QWl/s1600/balkon.jpg" id="p4"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUiyARB_vN7OXtB6qCTCZB1VcdFDXrsPQvUHTsVop2zCalxJzAqqIXO0j2_0iAJ7eH1bzkqMRen0Le_7mec_6P5tS24UxIm0SSM-5rrPD7vct70OnIoOo_PDFUG9wTRmwca9NRIgW2QWl/s1600/balkon.jpg" width="480" alt="Meftun Apart Balkon" title="Meftun Apart Balkon"/></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGBPJ7Ebybz-yTajwdon1WvuFBFKXQiFh-SEM6O1xLKFi0J9mgJi1mvkB7lJPQq8UTh6ZXEJd74W7N4I9cNKHYPbqqPoCO2IdzlrI4SuVRIuGvPYomlVCwHF_tub-px50JFTJoUOwpJCY/s1600/meftun_aparts9b.jpg" id="p5"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGBPJ7Ebybz-yTajwdon1WvuFBFKXQiFh-SEM6O1xLKFi0J9mgJi1mvkB7lJPQq8UTh6ZXEJd74W7N4I9cNKHYPbqqPoCO2IdzlrI4SuVRIuGvPYomlVCwHF_tub-px50JFTJoUOwpJCY/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/AVvXsEiCqiDUSucWfYjEsbPC0ReYjMSK8sUE8AtO37tba5Sf4qUjEwtLjhH9SAT1VWeBmOTAhbVhad83XVSOrQaw_HX1N-Mx90Xhb-LDGAlhD-_Pxo-Qb7bHzOD4zYt-55TciiB0hHTVRVIxqr5e/s1600/meftun_aparts10b.jpg" id="p6"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCqiDUSucWfYjEsbPC0ReYjMSK8sUE8AtO37tba5Sf4qUjEwtLjhH9SAT1VWeBmOTAhbVhad83XVSOrQaw_HX1N-Mx90Xhb-LDGAlhD-_Pxo-Qb7bHzOD4zYt-55TciiB0hHTVRVIxqr5e/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/AVvXsEhn5nKyV_K6s3gLSgRuNqILbxSWwHRWen3B5VT_0OaAz57GTf2nKe1vjQKoUXvlqp2Os1j_L5J6mpULZylcQIC6VntXVzJRlJ3HYgvu0WgCSjk-5apB9vd8H7EVQR5VXuHKP2xhq9OfIpr0/s1600/5.JPG" id="p7"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn5nKyV_K6s3gLSgRuNqILbxSWwHRWen3B5VT_0OaAz57GTf2nKe1vjQKoUXvlqp2Os1j_L5J6mpULZylcQIC6VntXVzJRlJ3HYgvu0WgCSjk-5apB9vd8H7EVQR5VXuHKP2xhq9OfIpr0/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/AVvXsEg2KlwNY1bhxaN5pxk7z-gLRe7t7Trq18hgvOXoH6RiObao18-C5MZ0qU0Ssp3MYUbPaEdBQyoMH7SE8nSNrv1wEOM-NtBTZ6w4EISy0GplMRnPnQuvWTf_MoU2UG00oWYjjbNeEfqpxkSg/s1600/7.JPG" id="p8"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KlwNY1bhxaN5pxk7z-gLRe7t7Trq18hgvOXoH6RiObao18-C5MZ0qU0Ssp3MYUbPaEdBQyoMH7SE8nSNrv1wEOM-NtBTZ6w4EISy0GplMRnPnQuvWTf_MoU2UG00oWYjjbNeEfqpxkSg/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>
<!--HTML Kodlarıyla Jquery Resim Galerisi by www.MeftunMede.com-->

Özelleştirme

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:

Önceki

Sonraki

1

2

3

4

5

6

7

8

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.Kolay gelsin...