How to use a single Step Carousel across site with different folders

[sannesm]

First off - I am a newbie to js, so thanks for this site!

1) Script Title: Step Carousel Viewer v1.9


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

3) Describe problem: I would like to put a single stepcarousel in my dreamweaver template so that it will automatically populate across my site. Problem I am having seems to be with this piece of the code:

<p id="mygallery-paginate" style="width: 250px; text-align:center"> <img src="js/stepcarousel/opencircle.png" data-over="js/stepcarousel/graycircle.png" data-select="js/stepcarousel/closedcircle.png" data-moveby="1" /></p>

The problem is that the stepcarousel cannot find the nav images when the page is in a subfolder.

How to I fix the paths so that the script will find the images when the stepcarousel is in a subdirectory of the site? Right now, the only way it works as written is if I add a js/stepcarousel folder (with the navigation images) to the subfolder.

[jscheuer1]

If that works from the root folder, this will work from any folder:

<p id="mygallery-paginate" style="width: 250px; text-align:center"> <img src="/js/stepcarousel/opencircle.png" data-over="/js/stepcarousel/graycircle.png" data-select="/js/stepcarousel/closedcircle.png" data-moveby="1" /></p>

That's only on a live site of course, and it's called the network path. It will work in the root folder as well. It probably won't work at all on the local machine. You can always use the absolute path (http://www.whatever.com/js/stepcarousel/whatever.png) for either local or live. That points to its location on the live server. Replace the two watevers with your site specific and image specific names respectively.

[sannesm]

That's a little quirky... not being able to have it work on local computer.

I tried uploading the files to one of my live sites, and it does not work... could it be a problem with the syntax or allowable syntax of the data-over and data-select parameters?

<p id="mygallery-paginate" style="width: 250px; text-align:center"> <img src="../js/stepcarousel/opencircle.png" data-over="js/stepcarousel/graycircle.png" data-select="js/stepcarousel/closedcircle.png" data-moveby="1" /></p>

[bernie1227]

The first thing that I'd look for here would be if the images and the file are in the same directory or that the file is referencing the folder they are in correctly.

[jscheuer1]

That's a little quirky... not being able to have it work on local computer.

I tried uploading the files to one of my live sites, and it does not work... could it be a problem with the syntax or allowable syntax of the data-over and data-select parameters?

<p id="mygallery-paginate" style="width: 250px; text-align:center"> <img src="../js/stepcarousel/opencircle.png" data-over="js/stepcarousel/graycircle.png" data-select="js/stepcarousel/closedcircle.png" data-moveby="1" /></p>

That's not what I suggested. Reread what I typed please.

I suggested:

<p id="mygallery-paginate" style="width: 250px; text-align:center"> <img src="/js/stepcarousel/opencircle.png" data-over="/js/stepcarousel/graycircle.png" data-select="/js/stepcarousel/closedcircle.png" data-moveby="1" /></p>

If you want more help, please include a link to the live page.

As for it being quirky . . . Not really. The network path preceding slash means 'from the root folder of the current domain'. If it's used on the local machine it means basically the same thing, only in that case it means 'from the root folder of the current drive'.

[sannesm]

I ended up putting copies of the images (they are tiny) in each of the subfolders. Ugly, but it works... local and on testing server.

[sannesm]

@jscheuer1... I did put the extra / in front of the js when I put it up... but it still didn't work. I still wonder if it isn't something with the way that the script accepts the "data-over" and "data-select" variables.

That said, I really don't want to take up any more of your time. Thank you so much for helping earlier. I am ok with an ugly hack so I can work locally. Thanks again.

[jscheuer1]

@jscheuer1... I did put the extra / in front of the js when I put it up... but it still didn't work. I still wonder if it isn't something with the way that the script accepts the "data-over" and "data-select" variables.

Nope, nothing wrong with the way the script accepts that. I just checked. Perhaps there's a typo or some other reason. We cannot know for sure without a link to the live page. Once we see it live, it should be a snap to see what's causing the images not to be found.

That said, I really don't want to take up any more of your time. Thank you so much for helping earlier. I am ok with an ugly hack so I can work locally. Thanks again.

Well, alrighty then . . .

However, if you repeat the images in one or more additional folders in a live installation, it will be a waste of disk space and bandwidth and will cause the pages to take at least a little extra time to load.

[sannesm]

When we went live, I made the changes you suggested and everything was working great until now.

I have a new page, which uses a script from a 3rd party provider, and now the left and right nav buttons on the step carousel are in the middle of the 3rd party content. You can easily see the problem (use Chrome or IE) at

realestate-bigbear.com/tools/community-info.html

If using Firefox, the problem is worse in that the main community map does not load. I am not sure if this is related to the Step Carousel or not, but it does not happen in IE or Chrome.

Thanks for any help you might be able to provide,
MS