View Full Version : Featured Content Slider

09-25-2008, 04:19 PM
1) Script Title: Featured Content Slider

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

3) Describe problem:

I used some of two of the different sliders and joined them for one, in a way. I will give you a link to what I did.

But I want the rectangles to be able to be clicked on to go to the different news articles. Like instead of having 1,2,3...I want to use images to go to the pages. Do you know how I can go about doing that?

Here is the link to my page, and what I have done with the code.


Thanks for the help!

09-25-2008, 06:06 PM
The pagination links do not have to follow the standard "1, 2, 3" format, and can be any arbitrary HTML actually. Just set the "toc" parameter to "markup" in your configuration code. See the "toc: markup" section here: http://www.dynamicdrive.com/dynamicindex17/contentslider_suppliment.htm

09-26-2008, 12:02 AM
My question is "how does it know which toc to go to when the class toc someclass is not defined in the style about in css?

I am trying to incorporate that part of it into my page so the rectangles click to correct image or text.

09-26-2008, 12:34 AM
Here is what I have so far. I don't know how to get them to link like tables of contents. I have the images there. I am not sure if I am labeling something correctly or what. Please help me out.



09-26-2008, 08:18 AM
The navigational buttons for the Slider needs to be added inside the DIV with id #paginate-slider1, so within this DIV on your page:

<div class="pagination p1" id="paginate-slider1"></div>

The script parses any links inside this DIV with a class of "toc" and turns them into pagination links.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

09-26-2008, 11:46 AM
Thanks so much. I'll give that a try.

Oh I added statement about who I got it from late last night when I was searching on here and realized that I had to have that in the code.

09-26-2008, 01:55 PM
Here is what I have so far


It works fine and everything. But I have one question, I can't seem to find where it says to have a yellow box over them when on each page. Could you help me out with that?

MY last question is, I was to have a darker rectangle show which page they are on, is there a way to do that?


09-26-2008, 01:56 PM

Here is the correct address. My bad.

09-26-2008, 08:49 PM
But I have one question, I can't seem to find where it says to have a yellow box over them when on each page. Could you help me out with that?

Sure. The following CSS as part of the script is what styles the selected pagination link, so just edit that:

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;

MY last question is, I was to have a darker rectangle show which page they are on, is there a way to do that?

Hmm can you clarify? Do you mean a dark rectangle around the actual content shown when a pagination link is clicked on?

09-27-2008, 04:25 AM
To clarify my last question.

I basically have two different images I want to use for my table of contents. I have a light color of red rectangle that is up now for all the table of content links. But it my mouse is hovered over the light colored rectangle, I want a dark red rectangle to show up. So basically the whole image would change. Do you know if it is possible to do that?


09-27-2008, 07:20 AM
Your link appears broken for me right now.

09-29-2008, 06:56 PM
I have it pretty much done, but I have one question to fix something. If you look at my code, you will unserstand what I am talking about. But the table of contents images don't work on the last three news articles. It only works on the first one. What is wrong with it? What do I need to do to fix it?

Here is the link:


09-29-2008, 07:43 PM
Looking at your page's source, you have multiple pagination DIVs on the page, or this chunk of HTML:

<div id="paginate-slider1" class="pagination"><a href="#" class="toc"><img src="../images/rectangle2.png" /></a> <a href="#" class="toc whitepapers"><img src="../images/rectangle2.png" /></a> <a href="#" class="toc scientia"><img src="../images/rectangle3.png" /></a> <a href="#" class="toc blog"><img src="../images/rectangle1.png" /></a></div>

You should only have *1* instance of the above, not 3 or 4. Please see the script page again for the required convention for the HTML of the script.

09-29-2008, 09:07 PM
yes, I did that because I wanted to get the image to become a image become the dark red rectangle when the page moves basically. Is there any way I can do that?