PDA

View Full Version : Content Slider Help



rescuefire
08-12-2008, 01:09 PM
1) Script Title: Featured Content Slider

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

3) Describe problem: I'm very embarrassed. I can't get this to work at all. I have no idea how to point it to what images I want. I want to use the auto display mode for numerous pictures. I can't even get it to work with the images provided on the script page :o I feel like I'm reading a foreign language when reading the directions.

I'm not sure what I'm asking for here. I really want to make this work but have no clue as to what I'm doing with it. It's unclear to me how to get this to simply be on a page, change pictures upon mouseover. Oh by the way, I can change colors of the frame around the content and change that mouseover option BUT there's nothing there to change. I have a blank box.

Nile
08-12-2008, 01:22 PM
Its very simple on what you need to do:
Download contentslider.css (http://www.dynamicdrive.com/dynamicindex17/contentslider.css).
Download contentslider.js (http://www.dynamicdrive.com/dynamicindex17/contentslider.js).
Downlaod loading.gif (http://www.dynamicdrive.com/dynamicindex17/loading.gif).
Now that you've got the files need, make a page called "test.html".

In it put this 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>
<h2>Example 1</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<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: ["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: [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>




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

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<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" class="pagination">

<a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>

</div>

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

Now that you have it stalled correctly, open test.html. Now you have a content slider. :)

rescuefire
08-12-2008, 01:45 PM
Yep I did exactly that and I end up with whats posted below. No images and no thumbnails. I have no idea how to get those thumbnails there or how to point the script or scripts to the correct images. All I can do is change the colors of the frame :(

Nile
08-12-2008, 02:03 PM
You've gotta put in your own images, please read the directions on the page.

rescuefire
08-12-2008, 02:42 PM
Yep of course I would put my own images in eventually :) but for the test page I put in the images that were on the script page, horses, ocean, pine and that sushi one.

I guess I'm not understanding the lines of code that need to be changed...OH WAIT....can it be that I'm using Firefox 3?

Nile
08-12-2008, 02:51 PM
No, it works perfectly in FireFox 3, please send me a link to your page. IF its not online please upload it online.