View Full Version : Carousel and Wordpress

11-07-2012, 01:56 PM
1) Script Title: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem:


I'm trying to get this script working on a wordpress site. I've tried pointing to the js. file on site and on the DD page but had no luck;

<script src="http://www.dynamicdrive.com/dynamicindex14/bgcarousel.js" type="text/javascript">

Unfor I'm building the site locally so I cant point you a link. Is there anything else I need to do other than setting the above when using on a wordpress site?

Tim Harper

11-07-2012, 02:28 PM
Unfortunately, we cant offer help without a working link - this is because there will be other scripts and css at play that can influence your individual setup.

Also, we need to see how you've attempted to install the DD scripts/HMTL/CSS - you might have put something in the wrong order or incorrect place but we have no idea of knowing this without a fully working example to troubleshoot from.

11-07-2012, 03:02 PM
If you don't have your site live, try to reproduce the problem using a tool like jsfiddle (http://jsfiddle.net). Look at the output source code for the page in question, and copy the smallest logical portions until you have the same problem.

If the problem is on the PHP side of WP, however, you're going to have better luck at a WP-oriented forum (or hiring a WP developer).

11-08-2012, 10:40 AM
Thanks for the advice guys, I'll leave it till last so and check back when the site is uploaded unless I can fix it before then.

11-08-2012, 07:53 PM
Have you tried downloaded the js file and using a local link to it rather than a url to dynamic drive?

11-26-2012, 02:38 PM
1) Script Title: Background Image Carousel

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/bgcarousel.htm

3) Describe problem:

I've just installed the above in the header of the home page at the below link but can't seem to get it working. It worked fine when I had the site in satic form and I thought when transfering over to Wordpress I just needed to make sure the script was pointed too but I tried and no such luck. Is there anything else that needs to be done when it comes to using this script on a Wordpress site?


11-27-2012, 01:17 PM
Thanks for the reply Bernie, I tried directing locally but no luck unfor. The site is live now if anyone can spare a minute see if they can see what I'm doing wrong: http://aruralexperience.com/

11-27-2012, 02:19 PM
You've just got a little mixed up with your javascript tags;

<script src="http://www.dynamicdrive.com/dynamicindex14/bgcarousel.js" type="text/javascript">
* Background Image Carousel- ?Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex14/bgcarousel.js">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['http://www.aruralexperience.dev/wp-content/uploads/2012/10/test-slide-1.jpg', '<h2>Autumn Day</h2>The sun peaks through the trees, a knife that cuts through the chill, crisp air.'], //["image_path", "optional description"]
['test-slide-2.jpg', '<h2>Wind Chime</h2>The bellweather of the sky, the chime speaks of impending turmoil.'],
['test-slide-3.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
['test-slide-1.jpg', 'Alone and Lonliness- Peace and Inner Struggle'] //<--no trailing comma after very last image element!
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)

You have the external js file referenced twice - once in its external script tag with the DD copyright notice, which is fine, but then you link to it again in an in-page script tag.

Just remove the bit in red and you should be fine.

11-28-2012, 08:43 AM
You cannot hotlink to the bgcarousel.js script on DD. You have to either host your own copy on that site or some other that will let you link to it, or put the entire script on the page. There could also be other problems, but that much has to be fixed first.

11-28-2012, 09:18 AM
We covered this yesterday - here's the answer: http://www.dynamicdrive.com/forums/showthread.php?72032-Wordpress-and-DD&p=287135#post287135

I didnt spot that you'd hotlinked to the script on DD, so yes, do what John says and host the script yourself/get somebody to host if for you, and also apply the fix advised in my linked post above.

Also, please do not create multiple posts for the same problem as it gets confusing for those who are helping you.

11-28-2012, 11:00 AM
Great! that sorted it. Thank you both for your help, I'll make sure to not double post in future.

11-28-2012, 03:54 PM
There's one other small issue I'll add at the end of this post.

Good. I missed that part of it Beverleyh. But I was noticing that there seemed to be no init, and there wasn't.

And I've now merged the threads so we can keep them straight.

By way of further explanation, you can hotlink to the script on DD. And if that script is in your cache from having recently visited the demo page of that script, it will work. But as soon as you either clear your cache, or it gets cleared or the cache limit requires that script be dropped from the cache, it will stop working. Needless to say, visitors to your page will probably not have the script cached. And since unless it is cached, DD blocks the hotlink, you can see the problem there.

The one other small issue is that you don't have the loading image. You don't have to have it. But it adds a nice touch for your users visiting for the first time, a visual representation that content is loading.

You can get it from the demo page or right here (right click and 'Save As'):


It goes in the same folder as your page.