<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css">
/* This css file serves as a template for styling your kwicks. Feel free to modify, but please make note of the comments - some of them are important. */
.kwicksWrapper
{
width: 994px;
margin: 0 auto;
}
.kwicks
{
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0 auto;
padding: 0;
}
.kwicks li
{
/* these are required, but the values are up to you (must be pixel) */
width: 188px;
height: 350px; /*do not change these */
display: block;
overflow: hidden;
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li
{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 0px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li
{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 0px; /*Set to same as spacing option. */
}
#kwick_1
{
background-color: transparent;
}
#kwick_2
{
background-color: transparent;
}
#kwick_3
{
background-color: transparent;
}
#kwick_4
{
background-color: transparent;
}
#kwick_5
{
background-color: transparent;
}
.kwicks.horizontal #kwick_4
{
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4
{
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks li a
{
display: block;
height: 350px;
}
.kwicks li .kwicksCaption
{
display: none;
width: 100%;
padding: 10px;
background: #fff;
color: #fff;
font-family: NazaninBold,Times new roman,Arial,Tahoma;
font-size: 15px;
font-weight: bold;
text-align: right;
position: absolute;
bottom: 0;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: .780;
opacity: .70;
}
.kwicks li.active .kwicksCaption
{
display: block;
}
</style>
<script src="http://www.saramad.ir/ThumbSlider/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.saramad.ir/ThumbSlider/jquery.kwicks-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('.kwicks').kwicks({
max: 677,
min: 88,
sticky: false,
spacing: 0,
duration: 800
});
});
</script>
<div class="kwicksWrapper">
<ul class="kwicks horizontal">
<li id="kwick_1"><a href="http://46.36.112.145/Pages/default.aspx" target="_blank">
<img src="http://www.saramad.ir/Content/media/image/2012/08/62062_orig.jpg?t=634813606676807915"></a>
<div class="kwicksCaption">
<span>ثبت نام ششمین نمایشگاه بین المللی رسانه های دیجیتال</span>
</div>
</li>
<li id="kwick_2"><a href="http://www.saramad.ir/idea-fa.html" target="_blank">
<img src="http://www.saramad.ir/Content/media/image/2012/08/62059_orig.jpg?t=634813606077454862"></a>
<div class="kwicksCaption">
<span>در بانک ایده های سرآمد حامی ایده های جدید شما هستیم</span>
</div>
</li>
<li id="kwick_3"><a href="http://www.saramad.ir/eshop-fa.html" target="_blank">
<img src="http://www.saramad.ir/Content/media/image/2012/08/62060_orig.jpg"></a>
<div class="kwicksCaption">
<span>فروشگاه سرآمد درگاهی مطمئن برای تامین نیازهای نرم افزاری شماست.</span>
</div>
</li>
<li id="kwick_4"><a href="http://www.saramad.ir//fastlogin-fa.html" target="_blank">
<img src="http://www.saramad.ir/Content/media/image/2012/08/62063_orig.jpg"></a>
<div class="kwicksCaption">
<span>با پیوستن به باشگاه دیجیتال عضوی از خانواده سرآمد شوید و از امکانات متنوع آن بهره
مند گردید.</span>
</div>
</li>
<li id="kwick_5"><a href="http://www.saramad.ir/festinalregistration-fa.html" target="_blank">
<img src="http://www.saramad.ir/Content/media/image/2012/08/62061_orig.jpg"></a>
<div class="kwicksCaption">
<span>جشنواره های رسانه های دیجیتال محفلی مناسب برای پیدایش ایده های نو در بستر رسانه
های دیجیتال.</span>
</div>
</li>
</ul>
</div>