PDA

View Full Version : Featured Content Slider - Resume autoplay variation



wbowman
04-12-2011, 11:27 AM
1) Script Title: Featured Content Slider v2.4


2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

3) Describe problem:

This is a great little script, but one small item of functionality I dont seem to be able to code is the resuming of the autoplay on mouseout. :)

This is not a replication of the requests already on the forum, as this situation is slightly different.

I have used the thumbnail paginate menu, and mouseover functionality to change the main images.

On the thumbnails and main images I have attached links (main image using a transparent gif as the link)

The thumbnails are overlaid on the main images using z-index and absolute positioning.

All works fine, apart from the fact that when you mouseover the thumbnail, the autoplay is stopped, not paused.

I'd like the thumbnail to still change the main image on mouseover, but on mouseout (from containing DIV) the autoplay resumes.

I'm hoping it's a minor change to the contentslider.js file

I'm a bit of a rookie with js, but have some knowledge of code. Can someone explain how I'd go about this?

Thanks in anticipation ;)

WB

Code as follows:
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

#slider4{
border-color: none;
height: 280px;
position:absolute;
top:0px;
left: 0px;
z-index:1;
}

#paginate-slider4{
background-color: none;
border-color: none;
position:absolute;
top:0px;
left: 308px;
width: 86px;
height: 279px;
z-index:10;
}

#paginate-slider4 a img{
width: 80px;
height: 60px;
border: none;
margin-top: 5px;
}

#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: none;
}

</style>
<body>

<div id="slider4" class="sliderwrapper">

<div class="contentdiv" style="background: url(horses.jpg) center left no-repeat"><a href="#"><img src="http://a80.g.akamai.net/f/80/71/6h/www.interflora.co.uk/kernel/client/images/transparent.gif" height="500px" width="332px" border="0px"/></a>
</div>

<div class="contentdiv" style="background: url(pine.jpg) center left no-repeat"><a href="#"><img src="http://a80.g.akamai.net/f/80/71/6h/www.interflora.co.uk/kernel/client/images/transparent.gif" height="500px" width="332px" border="0px"/></a>
</div>

<div class="contentdiv" style="background: url(ocean.jpg) center left no-repeat"><a href="#"><img src="http://a80.g.akamai.net/f/80/71/6h/www.interflora.co.uk/kernel/client/images/transparent.gif" height="500px" width="332px" border="0px"/></a>
</div>

<div class="contentdiv" style="background: url(sushi2.jpg) center left no-repeat"><a href="#"><img src="http://a80.g.akamai.net/f/80/71/6h/www.interflora.co.uk/kernel/client/images/transparent.gif" height="500px" width="332px" border="0px"/></a></div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img src="horses_thumb.jpg" /></a> <a href="#" class="toc someclass"><img src="pine_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="ocean_thumb.jpg" /></a> <a href="#" class="toc someotheclass"><img src="sushi2_thumb.jpg" /></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>
[CODE]