PDA

View Full Version : Featured Content Slider v2.4 - one slider with several paginate-slider



beathead
08-04-2008, 07:22 PM
1) Script Title: Featured Content Slider v2.4

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

3) Describe problem:

Hello,

I need one slider with three paginate-slider: one with images, one with text-links and one for 'prev' and 'next'. I have spent a lot of time, but I didnīt find a solution. Is this possible?

Thanks in advance!

beathead

ddadmin
08-05-2008, 05:41 AM
Hmm I don't see an easy way to modify the script for this unfortunately- that is, have the script recognize and parse more than one pagination DIV to be associated with a Featured Content instance. You can, however, manually get to where you want in a way by defining arbitrary links anywhere on the page that jumps to specific slides. For example, you may have arbitrary text links that jump to a particular slide within a particular featured content slider using the function featuredcontentslider.jumpTo("sliderID", pagenumber):


<a href="javascript:featuredcontentslider.jumpTo('mysliderid', 0)">Page 1</a> | <a href="javascript:featuredcontentslider.jumpTo('mysliderid', 1)">Page 2</a> | <a href="javascript:featuredcontentslider.jumpTo('mysliderid', 2)">Page 3</a>

There's no way to do the same for the "prev" and "next" functions though.

beathead
08-05-2008, 07:24 AM
Re:Hmm ;)

Yes, I made this yesterday, but then the 'a.selected' doesnīt work.
I try it with the 'onChange event handler', but... :(


<div id="paginate-slider-2" class="pagination">
<a href="javascript:featuredcontentslider.jumpTo('slider', 1)" class="toc"><img src="images/projekte/projekt-1_0.jpg" /></a>
<a href="javascript:featuredcontentslider.jumpTo('slider', 2)" class="toc"><img src="images/projekte/projekt-2_0.jpg" /></a>
<a href="javascript:featuredcontentslider.jumpTo('slider', 3)" class="toc"><img src="images/projekte/projekt-3_0.jpg" /></a>
</div>

<div id="paginate-slider-3" class="pagination">
<a href="javascript:featuredcontentslider.jumpTo('slider', 1)" class="toc">1</a><br />
<a href="javascript:featuredcontentslider.jumpTo('slider', 2)" class="toc">2</a><br />
<a href="javascript:featuredcontentslider.jumpTo('slider', 3)" class="toc">3</a><br />

</div>
<div id="mainContent">
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

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

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

<div class="contentdiv">
Content 2 Here. <br />

</div>

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

</div>
<div id="paginate-slider" class="pagination">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider", //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: ["Zurück", "Weiter"], //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>
</div>

Any idea?

ThanX

beathead

ddadmin
08-05-2008, 08:24 AM
The ".selected" link won't work in those links you manually created unfortunately. That's part of what I meant by "there's no easy way to modify the script for this", as that's one of the features that's more complex to add if you have multiple pagination DIVs on the page.

beathead
08-05-2008, 09:05 AM
Do you know another script with this features?