Jquery Galeri Önizleme

Daha önce bir çalışmam da kullanmış olduğum resim galerisi için ön izleme sistemini elimden geldiğince kırparak, sade bir halde sunmaya karar verdim. Şu anda olabildiğince sade olup,  üzerinde de rahatça oynayabileceğiniz halde. resim ismindeki kucuk gecen yerleri buyuk olarak değiştiriyor. Yani kucukresim.php?id=6 gibi bir linki buyukresim.php?id=6 haline getiriyor.


Bunu yapabilmeniz için bir js bir de css dosyası oluşturdum. Css deyip geçmeyin, bunların olmaması durumunda eklentiniz bi işe yaramayacaktır.

CSS kodu
  1. img.gallery { border: 0; }
  2. #onizleme{
  3.  background-color: #FFFFFF;
  4.  border:3px solid #dddddd;
  5.  padding-top:10px;
  6.  padding-bottom:10px;
  7.  margin:0;
  8.  width:270px;
  9.  height:auto;
  10.  text-align:center;
  11.  position:absolute;
  12.  z-index:9999;
  13. }
  14. #onizleme img { border:3px solid #dddddd; width:200px;}
  15. .onizlemeloading {height:150px;}
  16. .onizbaslik{
  17. font-size:14px;font-weight:bold;color:#000000;
  18. }

JAVASCRIPT kodu
  1. $(document).ready(function(){
  2.  $("img.gallery").mouseover(function(e){
  3.   var resim_src=$(this).attr('src').replace(/kucuk/, "buyuk");
  4.   var son_src=resim_src;
  5.   var resimyukle = new Image();
  6.   var pos = $(this).position();
  7.   var link = $(this).parent().attr('href');
  8.   var baslik = ($(this).attr('alt') != "") ? '<p class="onizbaslik">' + $(this).attr('alt') + '': ' ';
  9.   var resim='<img id="onizlenen" class="onizlemeloading" src="loading.gif">';
  10.   resim = (link != undefined) ? '<a href="' + link + '">'+ resim +'</a>' : resim;
  11.   $("#onizleme").remove();
  12.   $("body").append('<div id="onizleme" onmouseout="$(this).remove()">' + resim + baslik + '</div>');
  13.   $("#onizleme")
  14.    .css("top",(pos.top - 45) + "px")
  15.    .css("left",(pos.left - 42) + "px");
  16.  
  17.   resimyukle.onload = function() {
  18.    $("#onizlenen").removeClass('onizlemeloading').attr('src', resim_src);
  19.   };
  20.   
  21.   resimyukle.src=resim_src;
  22.   
  23.  });
  24. });

Bu da javascript dosyası. bunları sayfanızdan çağırdıktan sonra, <img class="gallery"... şeklinde yüklediğiniz her resim ön izlemeli hale gelecektir.

ÖRNEK UYGULAMA İÇİN TIKLAYIN

DOSYALARI İNDİRMEK İÇİN TIKLAYIN

Okunma: 487 , Oy Sayısı: 4 , Puan: 5.00

Etiketler

jquery galeri ,

Henüz bu yazıya yapılmış bir yorum yok



Yorumunuz