Featured Content Slider - external data

**sol07** · 07-24-2007, 08:40 AM

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem:

I would like to know if it is possible to extract the data to be displayed from a single external file, which has multiple "articles", for example:

Code:

<div id="slider1" class="contentslide">

<div class="contentdiv" rel="external.htm">

</div>

and in the external.htm, there would be 6 articles to be rotated. I tried the above, but it simply displayed all 6 at the same time which is not what I want. I do not want to have to create an external file for each article.

So, how do I separate each article in external.htm so that they are displayed separately, in rotation?

Thanks
_________________

**ddadmin** · 07-25-2007, 10:06 AM

Ok, try the below modified contentslider.js file. Then, use the 5th parameter to define your single external file that contains all the DIV contents:

Code:

ContentSlider("slider1", "", "", "", "master.htm")

Inside "master.htm", you'd have something like:

Code:

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

<div class="contentdiv">
Content 2
</div>

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

The most important thing to take note when using this feature is to empty the default DIV tags that are contained inside your Slider on your page:

Code:

<div id="slider1" class="contentslide">

</div>

In other words, remove the DIVs inside the above DIV that now reside in your external file instead.

**sol07** · 07-25-2007, 11:41 AM

Thank you for your suggestion. I have tried it but no luck. Here's what I have:

the master.htm (my file is actually called contentnews.php - presumably there's no problem with linking to a PHP file?)

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>contentnews</title>
</head>
<body>

<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/tech_images/net2.gif" alt="" width="140" height="100" />
<br />
<strong>will this work</strong></a></div>
Hoping to get this data from this external file to display in the main page...  <a href="#" target="_new"> [read more]</a>
</div>


<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/tech_images/filing_230x126.jpg" alt="" width="140" height="100" /><br />
<strong>Lots of news today</strong></a></div>
yes there is a lot of news to display today, if it will display at all...<a href="#" target="_new"> [read more]</a>
</div>


<div class="contentdiv">
<div align="center">
<a href="#" target="_new">
<img src="images/wmm_1.jpg" alt="" width="140" height="100" /><br />
<strong>Worth his salt</strong></a></div>
ddadmin is a very generous dude to help others' with their coding issues...<br />
  <a href="#" target="_new"> [read more]</a>
</div>
  

</body>
</html>

And for the code on the main page

Code:

<link rel="stylesheet" type="text/css" href="styles/contentslider.css" />
<script type="text/javascript" src="scripts/contentslider.js">
/***********************************************
* Featured Content Slider- &#169; 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>



<h3>Latest News:</h3>

<!--content ticker courtesy of www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm-->

<div id="slider1" class="contentslide">
</div>


<script type="text/javascript">
//Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
//Auto rotate slider every 5 seconds
ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")
</script>

And finally, I used your JS file, just as you said, without any mods.

Should the script on the main page be in the master.htm file?

What am I missing here?

TIA

**ddadmin** · 07-25-2007, 11:43 AM

Code:

ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")

Shouldn't it be "contentnews.php" instead of "contentnews.htm"?

Should the script on the main page be in the master.htm file?

Nope.

**sol07** · 07-26-2007, 05:42 AM

[QUOTE=ddadmin;102063]

Code:

ContentSlider("slider1", 5000, "", "", "", "contentnews.htm")

Shouldn't it be "contentnews.php" instead of "contentnews.htm"?

Well, yes it should, and it is in my file. This is a mistake in the example code.

Any other observations?

TIA

**ddadmin** · 07-26-2007, 08:26 AM

The modification I posted does work for me. I guess a URL to your problem page would be helpful at this point.

**sol07** · 07-26-2007, 10:18 AM

Thanks for your help so far....

OK, here are the files:

www.thesallyconnection.com/testpage.php
www.thesallyconnection.com/contentnews.php
www.thesallyconnection.com/contentslider5.js

As you can see, it's still not working, but it is displaying the Next button!

Thanks again for helping

Thanks again.
Sol

**ddadmin** · 07-27-2007, 02:32 AM

Ok, three errors I see on your page testpage.php:

1) You didn't actually empty out the Featured Content DIV container completely as I've mentioned before:

Code:

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

The line in red shouldn't be there.

2) When calling the script, you should use the 5th paramater to specify the external file to fetch, not the 6th. So the correct call should be:

Code:

ContentSlider("slider1", 5000, "", "", "contentnews.php")

3) Finally, inside contentnews.php, remove the <head><body> tags etc, so all that the page contains are the DIV content tags. It probably doesn't matter if you don't, but better to do it anyway.

**sol07** · 07-27-2007, 03:04 AM

Thanks ddadmin

Some simple changes there. The pagination stuff wasn't actually there originally, I was just trying different things to get it to work. ;-)

Anyways, I have implemented your changes and yes, the content does now display, except it is still displaying all at once, rather than one at a time. Also, we've lost the buttons!

Arggg!

Have I missed something else?

**ddadmin** · 07-27-2007, 03:16 AM

Actually, you did.

The pagination DIV should still exist, just outside your Featured Content DIV:

Code:

<div id="slider1" class="contentslide">
</div>

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

That should fix the other problem when fixed.

Thread: Featured Content Slider - external data

Thread Tools

Search Thread

Featured Content Slider - external data

Bookmarks

Bookmarks

Posting Permissions