Right now it seems to work fine except I keep running into 2 errors. When .desc slides down and it goes to the next image the old .desc from image goes on top of .desc of image two. Second error is if you hove over it and then take your mouse off of it and hover over it again the .desc goes crazy and goes up and down a few times. I cant figure out how to fix these two things any help would be greatly apreciated.
#scrollWork {
padding: 50px 50px 100px 50px;
background: #020303;
position: relative;
width: 924px;
}
.desc {
width: 287px;
height:250px;
border: solid 3px #0e0f0e;
padding: 10px 0px 0px 10px;
background: #121010;
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 101;
filter:alpha(opacity=80);
opacity: 0.8;
}
.desc strong {
color:#262525;
font-size: 15px;
}
.desc p {
margin-left: 10px;
}
.desc a {
color:#FF02FE;
text-decoration: none;
}
.desc a:hover {
text-decoration: underline;
}
.window {
height:355px; width: 924px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
width: 924px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #9502ad;
border: 1px solid #6b2f74;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//slide up and down when hover over heading 2
$(".window").hover(function(){
// slide toggle effect set to slow you can set it to fast too.
$(".desc").eq( $('.paging a.active').attr("rel") - 1 ).slideToggle("slow");
return true;
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
<div id="scrollWork">
<div class="title">
<h2 class="titleWork">Work</h2>
<ul class="pagenav">
<li class="pagenavTitle">Navigate To:</li>
<li class="pagenavWork"><a title="work" href="#scrollWork">Work</a></li>
<li class="pagenavServices"><a title="services" href="#scrollServices">services</a></li>
<li class="pagenavAbout"><a title="about" href="#scrollAbout">about</a></li>
<li class="pagenavContact"><a title="contact" href="#scrollContact">contact</a></li>
</ul>
</div>
<div class="window">
<div class="image_reel">
<a href="#?w=700" rel="popupWork-1" class="poplight"><img src="image1.png" width="924" height="345" alt="ProZap Business Cards" /></a>
<a href="#?w=700" rel="popupWork-2" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 2" /></a>
<a href="#?w=700" rel="popupWork-3" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 3" /></a>
<a href="#?w=700" rel="popupWork-4" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 4" /></a>
<a href="#?w=700" rel="popupWork-5" class="poplight"><img src="image1.png" width="924" height="345" alt="Featured Design 5" /></a>
</div>
<div class="descriptions">
<div class="desc"><strong>Client</strong>
<p>Snap</p>
<strong>URL</strong>
<strong>Date</strong>
<p>December 2009</p>
<strong>Task</strong>
<p>Design</p>
<strong>Tools</strong>
<p>Photoshop, Illustrator</p>
</div>
<div class="desc"><strong>Client</strong>
<p>ProZap</p>
<strong>URL</strong>
<strong>Date</strong>
<p>January 2010</p>
<strong>Task</strong>
<p>Design</p>
<strong>Tools</strong>
<p>Photoshop, Illustrator</p>
</div>
<div class="desc"><strong>Client</strong>
<p>Vestax Spin</p>
<strong>URL</strong>
<strong>Date</strong>
<p>October 2009</p>
<strong>Task</strong>
<p>Design, IPB, Template Engine, SEO</p>
<strong>Tools</strong>
<p>Photoshop, IPB</p>
</div>
<div class="desc"><strong>Client</strong>
<p>Vestax Spin</p>
<strong>URL</strong>
<strong>Date</strong>
<p>Febuary 2010</p>
<strong>Task</strong>
<p>Design</p>
<strong>Tools</strong>
<p>Photoshop, Illustrator</p>
</div>
<div class="desc"><strong>Client</strong>
<p>Vestax Spin</p>
<strong>URL</strong>
<strong>Date</strong>
<p>January 2010</p>
<strong>Task</strong>
<p>Design, Front-end Development, WordPress Integration, SEO</p>
<strong>Tools</strong>
<p>Photoshop, Dreamweaver</p>
</div>
</div>
</div>
<div class="paging">
<a href="#" rel="1">Snap</a> |
<a href="#" rel="2">ProZap</a> |
<a href="#" rel="3">Movie Loons</a> |
<a href="#" rel="4">Creature Studios</a> |
<a href="#" rel="5">Project Named 5</a>
</div>