<html>
<head>
<style type="text/css">
body {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 13px;
}
a {
color: #555555;
text-decoration: none;
}
a:hover {
color: #000000;
}
.ei-slider {
height: 400px;
margin: 0 auto;
max-width: 1920px;
position: relative;
width: 100%;
}
.ei-slider-loading {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
color: #FFFFFF;
height: 100%;
left: 0;
line-height: 400px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 999;
}
.ei-slider-large {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.ei-slider-large li {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.ei-slider-large li img {
width: 100%;
}
.ei-title {
margin-right: 13%;
position: absolute;
right: 50%;
top: 30%;
}
.ei-title h2, .ei-title h3 {
text-align: right;
}
.ei-title h2 {
color: #B5B5B5;
font-family: 'Playfair Display',serif;
font-size: 40px;
font-style: italic;
line-height: 50px;
}
.ei-title h3 {
color: #000000;
font-family: 'Open Sans Condensed',sans-serif;
font-size: 70px;
line-height: 70px;
text-transform: uppercase;
}
.ei-slider-thumbs {
height: 13px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li {
float: left;
height: 100%;
position: relative;
}
.ei-slider-thumbs li.ei-slider-element {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
height: 100%;
left: 0;
position: absolute;
text-indent: -9000px;
top: 0;
z-index: 10;
}
.ei-slider-thumbs li a {
background: none repeat scroll 0 0 #666666;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 1px rgba(255, 255, 255, 0.5);
cursor: pointer;
display: block;
height: 100%;
text-indent: -9000px;
transition: background 0.2s ease 0s;
width: 100%;
}
.ei-slider-thumbs li a:hover {
background-color: #F0F0F0;
}
.ei-slider-thumbs li img {
bottom: 50px;
max-width: 100%;
opacity: 0;
position: absolute;
transition: all 0.4s ease 0s;
z-index: 999;
}
.ei-slider-thumbs li:hover img {
bottom: 13px;
opacity: 1;
}
.ei-title {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
bottom: 10px;
margin-right: 0;
padding: 5px 0;
position: absolute;
right: 0;
text-align: center;
top: auto;
width: 100%;
}
.ei-title h2, .ei-title h3 {
text-align: center;
}
.ei-title h2 {
font-size: 20px;
line-height: 24px;
}
.ei-title h3 {
font-size: 30px;
line-height: 40px;
}
ol, ul {
list-style: none outside none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
.islerimiz{
margin:0;
-webkit-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
-moz-box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
box-shadow:0 0 5px #CCC, 0 0 400px #fff inset;
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff')";
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=400,Direction=0,Color='#fff');
width:200px;
/*height:315px;*/
height:350px;
z-index:100000;
cursor:default;
overflow:hidden;
}
#acKapat{
z-index:10000000;
}
</style>
</head>
<body>
<div class="container">
<div id="acKapat">
<a href="#">
<img src="images/icon.png" height="20" width="20" alt="tanımPanelAcKapat"/>
</a>
</div>
<div class="islerimiz">
</div>
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="images/ISLER GORSELLER/1/isler_gorsel1.jpg" alt="image01" />
</li>
<li>
<img src="images/ISLER GORSELLER/2/isler_gorsel2.jpg" alt="image02" />
</li>
<li>
<img src="images/ISLER GORSELLER/3/isler_gorsel3.jpg" alt="image03"/>
</li>
<li>
<img src="images/ISLER GORSELLER/4/isler_gorsel4.jpg" alt="image04"/>
</li>
<li>
<img src="images/ISLER GORSELLER/5/isler_gorsel5.jpg" alt="image05"/>
</li>
<li>
<img src="images/ISLER GORSELLER/6/isler_gorsel6.jpg" alt="image06"/>
</li>
<li>
<img src="images/ISLER GORSELLER/7/isler_gorsel7.jpg" alt="image07"/>
</li>
<li>
<img src="images/ISLER GORSELLER/8/isler_gorsel8.jpg" alt="image08" />
</li>
<li>
<img src="images/ISLER GORSELLER/9/isler_gorsel9.jpg" alt="image09" />
</li>
<li>
<img src="images/ISLER GORSELLER/10/isler_gorsel10.jpg" alt="image10" />
</li>
</ul>
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li><a href="#" >Slide 1</a><img src="images/islergorsellerkucuk/isler_gorsel1.gif" alt="thumb01" /></li>
<li><a href="#" >Slide 2</a><img src="images/islergorsellerkucuk/isler_gorsel2.gif" alt="thumb02" /></li>
<li><a href="#" >Slide 3</a><img src="images/islergorsellerkucuk/isler_gorsel3.gif" alt="thumb03" /></li>
<li><a href="#" >Slide 4</a><img src="images/islergorsellerkucuk/isler_gorsel4.gif" alt="thumb04" /></li>
<li><a href="#" >Slide 5</a><img src="images/islergorsellerkucuk/isler_gorsel5.gif" alt="thumb05" /></li>
<li><a href="#" >Slide 6</a><img src="images/islergorsellerkucuk/isler_gorsel6.gif" alt="thumb06" /></li>
<li><a href="#">Slide 7</a><img src="images/islergorsellerkucuk/isler_gorsel7.gif" alt="thumb07" /></li>
<li><a href="#">Slide 8</a><img src="images/islergorsellerkucuk/isler_gorsel8.gif" alt="thumb07" /></li>
<li><a href="#">Slide 9</a><img src="images/islergorsellerkucuk/isler_gorsel9.gif" alt="thumb07" /></li>
<li><a href="#">Slide 10</a><img src="images/islergorsellerkucuk/isler_gorsel10.gif" alt="thumb07" /></li>
</ul>
</div>
</div>
</div><!-- ei-slider -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/blur.dev.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
easing : 'easeOutExpo',
titleeasing : 'easeOutExpo',
titlespeed : 1200
});
});
</script>
<script type="text/javascript">
var origWidth=$(".islerimiz").width();
$('#acKapat').click(function(e){
e.preventDefault();
/*$(this).parent('.islerimiz').animate({'width': 0, 'opacity': 0 }, 'slow', 'linear' ,function(){
window.location=$(this).find('a').attr('href');
});*/
width=$(".islerimiz").width();
if(origWidth==width)
$(".islerimiz").animate({'width': 0, 'opacity': 0 }, 'slow','swing');
else
$(".islerimiz").animate({ 'width': '200px','opacity':1 }, 'slow','swing');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.islerimiz').blurjs({
draggable: false,
overlay: 'rgba(255,255,255,0.1)',
});
});
</script>
</body>
</html>
i’m trying to do:
<div id="acKapat">
<a href="#">
<img src="images/icon.png" height="20" width="20" alt="tanımPanelAcKapat"/>
</a>
</div>
<div class="islerimiz">
</div>
appears on the img that slides but the blurred panel is staying at the top of images.how can i solve this problem?