Featured Content Slider - placing 'next' and 'previous' links elsewhere on the page [Archive]

View Full Version : Featured Content Slider - placing 'next' and 'previous' links elsewhere on the page

singletrack

08-26-2009, 04:31 AM

1) Script Title: Featured Content Slider

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

3) Describe problem: I'm looking to tweak the DD script so the 'next' and previous' links are images placed elsewhere on the page. I have hidden the text labels for "next" and "previous" by following the DD instructions which works as expected. However, I want to call the next and previous slide by clicking on two images either side of the slilder. Below is a screen grab of my intended outcome. If you can assist I would be very grateful. Many thanks.

(visual: http://www.flickr.com/photos/41870113@N06/3858343624/)

Here is my code:

<div id="portfoliocontainer">
<div id="portfolio_arrows">
<a href="#"><img src="../images/arrow_l.jpg" alt="left arrow" width="76" height="76" /></a>
</div>
<div id="portfolio_middle">


<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider1', 3)">Go to 3rd slide</a></p>
</div>
<div class="contentdiv">
Content 2 Here.
</div>
<div class="contentdiv">
Content 3 Here.
</div>
</div>
<div id="paginate-slider1" class="pagination"></div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [false, 5000], //[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>
</div>
<div id="portfolio_arrows">
<a href="#"><img src="../images/arrow_r.jpg" alt="right arrow" width="76" height="76" /></a>
</div>
</div>

ddadmin

08-27-2009, 01:50 AM

Instead of hiding the pagination DIV altogether, you can instead just define the "next" and "prev" links, then set them to CSS position:absolute. With a little JavaScript, alter their position so they show up next to the content box. Here's a full example:

<!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>

<body>

<br />
<h2>Example 2, Pagination links from markup</h2>




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

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
Content 3 Here.
</div>

</div>

<div id="paginate-slider2">
<a id="fcprev" href="#" class="prev" style="position:absolute; z-index:1000">Prev</a>
<a id="fcnext" href="#" class="next" style="position:absolute; z-index:1000">Next</a>
</div>

<script type="text/javascript">

var fcprev=document.getElementById('fcprev')
var fcnext=document.getElementById('fcnext')

var fcgetoffset=function(what, offsettype){
return (what.offsetParent)? what[offsettype]+fcgetoffset(what.offsetParent, offsettype) : what[offsettype]
}

var offx=fcgetoffset(document.getElementById('slider2'), "offsetLeft")
var offy=fcgetoffset(document.getElementById('slider2'), "offsetTop")

fcprev.style.left=offx+"px"
fcprev.style.top=offy+100+"px"

fcnext.style.left=offx+400+"px"
fcnext.style.top=offy+100+"px"

</script>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider2", //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: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 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>

The part in red are significant- note how I've given the two pagination links a unique ID, and accessed them inside the script to follow. Inside that script, "slider2" also needs to be changed to reflect the ID of your FCS. The code:

fcnext.style.left=offx+400+"px"
fcnext.style.top=offy+100+"px"

controls where the pagination links should be positioned relative to the top left corner of the FCS.

singletrack

08-27-2009, 07:06 AM

thanks for the quick reply. This seems to do the trick, although now I'm missing the pagination in the bottom right of the FCS. My request was to leave the pagination; 1, 2, 3, etc, and simply "move" the PREVIOUS and NEXT links elsewhere on the page. This you have done (many thanks!) but in the process you have removed the page numbers which I want to retain.

ddadmin

08-28-2009, 05:55 AM

You can still have the pagination link in their default location beneath the slider. Just leave them in, ie:

<div id="paginate-slider2">
<a id="fcprev" href="#" class="prev" style="position:absolute; z-index:1000">Prev</a>
<a id="fcnext" href="#" class="next" style="position:absolute; z-index:1000">Next</a>
<a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a>
</div>

singletrack

08-28-2009, 06:28 AM

thanks again DDAdmin - too kind!! Really appreciate you helping me out. By the way... great scripts!! Best.