Jquery ile resim önizlemesi

jQuery ile yapılmış resim galerisi. resimlerin üzerine gelindiğinde ortaya çıkan bir popup. bu basit kod ile resim galerisi yapılabilir veya webmaster sitelerinde tasarımların resimlerini hoş bi şekilde gösterebilirsiniz.Sitenize gelen ziyaretçilerin memnun olabileceği bi kod.Aslında bu kodla İcon resim gibi sitelere yararlı olacağını düşünüyorum bedava-sitemin böyle yeniliklere ihtiyacı var Umarım işinize yarar

Canlı örnek için buraya tıklayın

Tasarımın ÜSTÜ
  <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="http://hibycocuk.com/Files/jqrsmpopup.js" type="text/javascript"></script>
 
Css eklene bilir isterseniz tasarım üstünede ekleye bilirsiniz.
 <style>
body{margin:0 auto;padding:0 auto;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
h1{font-size:180%;font-weight:normal;color:#333;}
h2{clear:both;font-size:160%;font-weight:normal;color:#666;margin:0;padding:.5em 0;}
a{text-decoration:none;color:#f30;}
p{clear:both;margin:0;padding:.5em 0;}
img{border:none;}
ul,li{margin:0;padding:0;}
li{list-style:none;float:left;display:inline;margin-right:10px;}
#ortala {width:960px;margin:0 auto;padding:0 auto;display:block;}
#onizleme{position:absolute;border:2px solid #333;background:#ccc;padding:5px;display:none;color:#333;-moz-border-radius:5px;border-radius:5px;}
.altlink{clear:both;margin-top:250px;}
</style>


 HTML Kısmı
 <div id="ortala">
    <h1>jQuery ile Resim Önizlemesi</h1>
    <h2>Resim Galerisi (alt başlık olmadan)</h2>
    <ul>
<li><a href="1.jpg" rel="popupacil"><img src="1s.jpg" alt="önizleme" /></a></li>
<li><a href="2.jpg" rel="popupacil"><img src="2s.jpg" alt="önizleme" /></a></li>
<li><a href="3.jpg" rel="popupacil"><img src="3s.jpg" alt="önizleme" /></a></li>
<li><a href="4.jpg" rel="popupacil"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>
     <h2>Resim Galerisi (alt başlıklar ile)</h2>
    <ul>
<li><a href="1.jpg" rel="popupacil" title="Güzel bir resim"><img src="1s.jpg" alt="önizleme" /></a></li>
<li><a href="2.jpg" rel="popupacil" title="Daha Güzel bir resim"><img src="2s.jpg" alt="önizleme" /></a></li>
<li><a href="3.jpg" rel="popupacil" title="Alt başlıklar görünüyor"><img src="3s.jpg" alt="önizleme" /></a></li>
<li><a href="4.jpg" rel="popupacil" title="Demek ki sorun yok"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>
<div class="altlink"><a href="Link" title="Açıklama">Ana sayfaya Dön </a></div>
</div>