2 3

hiby

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>

 





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: Pharme492, 02.02.2013, 16:27 (UTC):
Hello! dcebgcg interesting dcebgcg site! I'm really like it! Very, very dcebgcg good!

Yorumu gönderen: Pharmc659, 02.02.2013, 16:27 (UTC):
Hello! gdkabdd interesting gdkabdd site! I'm really like it! Very, very gdkabdd good!



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol