hamedsabzian
شنبه 22 خرداد 1389, 13:12 عصر
یک Plugin زیبای Jquery:
با کلیک بر روی عکس ها بزرگ نمایش داده می شن.
توی این مثال با استفاده از اون و یک Repeater عکسهامو نمایش میدم:
<!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="JGalery/js/jquery.js"></script>
<script type="text/javascript" src="JGalery/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="JGalery/css/jquery.lightbox-0.5.css" media="screen" />
<!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 5px;
width: 790px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 5px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
قسمت Repeater:
<div id="gallery">
<ul>
<asp:Repeater runat="server" ID="RI" DataSourceID="DSImageGalery">
<ItemTemplate>
<li>
<a href='<%# String.Format("MakeThumbnail.aspx?size=-1&file={0}",DataBinder.Eval(Container.DataItem,"ImageUrl")) %>'
title='<%# Eval("ImageName") %>'>
<img src='<%# String.Format("MakeThumbnail.aspx?size=120&file={0}",DataBinder.Eval(Container.DataItem,"ImageUrl")) %>' alt="" />
</a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
در این قسمت شما دو بار عکس رو میزارید. یه بار کوچیک و یه باز هم اندازه واقعی.