Step Carousel Viewer 1.9 (multiple config)

**n0xx0rz** · 05-26-2011, 12:31 PM

1) Script Title: Step Carousel Viewer

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

3) Describe problem:
Hi all.
I have a problem with Step Carousel.

I have 2 Viewer's on let's say page1.php and page2.php and index.php where i include those pages.

In index.php :
i created .js file with config :

Code:

stepcarousel.setup({
	galleryid: 'biografia', //id of carousel DIV
	beltclass: 'biografia_belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'biografia_panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

stepcarousel.setup(
{
	galleryid: 'start', //id of carousel DIV
	beltclass: 'start_belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'start_panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']

})

And the problem is:

When those two Carousel's are on the same page everything working fine, but when one is on page1.php and second on page2.php, Step Carousel is loading only first config (galleryid: 'biografia') and second doesnt work at all.

After of few hours of searching the only thing ive found was :
http://www.dynamicdrive.com/forums/s...arousel+Viewer
But it doesnt work at all... or maybe im doing something wrong.

My question is:
What i shoud do, to load all config files for Step Carousel ?

I even started to mix :
galleryid: 'start','biografia'
beltclass: 'start_belt','biografia_belt'
panelclass: 'start_panel','biografia_panel'
But this doesnt work too.

If u want i can paste the code of the site but cant give u the adress.
Any help will be appreciated.

**jscheuer1** · 05-26-2011, 01:26 PM

First thing I'd try is setting persist:false for both of them.

What I think you might need (if you want to use persist:true) is, unless the set of two viewers have identical content - like viewer 1 content on page 1 is the same as viewer 1 content on page 2 and viewer 2 content on page 1 is the same as viewer 2 content on page 2 - unless you have that situation, you need 4 viewers each with their own initialization and unique ids. One set of two on page 1 another set of 2 on page 2.

**n0xx0rz** · 05-26-2011, 01:35 PM

First of all - thanks for reply John
Second - no i dont need persist at all - just changed to flase.
I can't make this same content for those two viewer's (big styling difference).

For now i have only 2 viewer's one on page1.php and second on page2.php - every1 with different id's and css styling.

Any ideas how to make Carousel to load two (and more) config files ?

**jscheuer1** · 05-26-2011, 04:54 PM

So you're using AJAX to import the other gallery? That was never resolved in that other thread. What have you tried so far? What's your AJAX code look like?

If you're not importing via AJAX, then just use different styles based upon the id and class.

Or if you're trying to get them to look the same, use the same styles for both id's and classes.

But I'm confused. Is this about style or about AJAX?

**n0xx0rz** · 05-30-2011, 01:47 PM

ok so my <head> index.php look like this :

Code:

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/stepcarousel.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_start.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_biografia.js"></script>

in stepcarouselSetup_start.js is :

Code:

stepcarousel.setup(
{
	galleryid: 'start', //id of carousel DIV
	beltclass: 'start_belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'start_panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:false},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']

})

in stepcarouselSetup_biografia.js is :

Code:

stepcarousel.setup({
	galleryid: 'biografia', //id of carousel DIV
	beltclass: 'biografia_belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'biografia_panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:300},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:false},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

in <body>
menu with start page and biografia page

in start.php

Code:

<div id="start" class="stepcarousel">
<div class="start_belt">

<div class="start_panel">
//here was content for panel but it was in polish language so u dont need to read this
</div><!--end panel-->

</div><!--end belt-->
</div><!--end start.stepcarousel-->	


<!--controls for carousel-->
<div id="start_strzala_l"> 
<a href="javascript:stepcarousel.stepBy('start', -1)"><img src="img/strzala_l.png" alt="" /></a>
</div><!--end strzala_l-->
<div id="start_strzala_r">
<a href="javascript:stepcarousel.stepBy('start', 1)"><img src="img/strzala_r.png" alt="" /></a>
</div>
<div id="start-paginate">
<img src="img/btn_off.png" data-over="img/btn_hover.png" data-select="img/btn_on.png" data-moveby="1" alt=""/>
</div>

and in biografia.php

Code:

<div id="biografia" class="stepcarousel">
<div class="biografia_belt">

<div class="biografia_panel">
<img src="img/biografia_slajd.jpg">
</div><!--end panel-->

<div class="biografia_panel">
<img src="img/biografia_slajd.jpg">
</div><!--end panel-->

<div class="biografia_panel">
<img src="img/biografia_slajd.jpg">
</div><!--end panel-->


</div><!--end belt-->
</div><!--end biografia.stepcarousel-->	

<!--corousel controls-->
<div id="biografia_strzala_l">
<a href="javascript:stepcarousel.stepBy('biografia', -1)"><img src="img/biografia_l.png" alt="" /></a>
</div><!--end biografia_strzala_l-->
<div id="biografia_strzala_r">
<a href="javascript:stepcarousel.stepBy('biografia', 1)"><img src="img/biografia_r.png" alt="" /></a>
</div><!--end biografia_strzala_r-->

<div id="biografia-paginate">
<img src="img/btn_off.png" data-over="img/btn_hover.png" data-select="img/btn_on.png" data-moveby="1" alt=""/>
</div>

and the problem is :
site is loading only one cofnig : stepcarouselSetup_start.js, dont know why second is skipped.

What am i doing wrong, and how i shoud fix it to carousel would load how many configs i want ?

I hope everything is clear.
Thanks for help

**jscheuer1** · 05-30-2011, 02:07 PM

It's not clear to me where the start.php and the biografia.php pages are. And more importantly, where you want them to work. Are they being imported to index.php? If so, how? Are they PHP includes? Are you using AJAX to fetch them? Or are they separate pages that you just want to have working on their own?

In any case, the demo page for this script has three carousels on it, so it's definitely possible to have more than one, and that includes three configs.

To have much of a real chance of working this out, I may need a link to the pages. One thing I think I'm getting is that you might be running a config on a page for a carousel that isn't on that page. If you're doing that, it might be causing the problem. Are you doing that?

**n0xx0rz** · 05-30-2011, 02:30 PM

-im including start.php and biografia from index.php:

<body>
<div id="content">

</div>
</body>

No im not using ajax, they are separate pages.

You are right - in demo page everything is working fine, when i put those two viewers on the same page everything is working great.

Sorry but im still coding this portal and its only on my lan server, until i finish it will be offline.

One thing I think I'm getting is that you might be running a config on a page for a carousel that isn't on that page.

in index.php in <head> section is :
<script type="text/javascript" src="js/stepcarouselSetup_start.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_biografia.js"></script>

Im loading two config files, but only one (always first in order) is loaded, second one never.

**jscheuer1** · 05-30-2011, 02:59 PM

OK, things may be getting clearer. We have to look at this as one page, index.php.

The rest of it's just behind the scenes PHP stuff.

On index we have these two external scripts each to initialize one of two carousels. The respective carousel markups for these two carousels are on the index page, they got there via includes, so are like they are on index.

Now you're saying that whichever of these external scripts comes first in the head runs, the other is skipped?

That sounds like what you're saying. But you could also mean that you are switching the order of the includes for the markup, or switching them and the external tags.

Let's assume for now that you mean it's simply the order of the external script tags in the head that decides which one runs.

If so, it means that they each work and that there's probably something about how the external tags appear in the head that's messing it up.

Are the external script tags hard coded, or are they also on an include? If they're included, are they on one or two includes?

One thing to do is to load up the page in the browser. Use the browser's 'View source' to see what's being served. Then the external script tags might look differently than you have in your post there. If so, they can be adjusted. If they look just like what you have in your post, then it must be something else and it would require troubleshooting the live page.

For example, if they look like so:

Code:

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/stepcarousel.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_start.js">
<script type="text/javascript" src="js/stepcarouselSetup_biografia.js"></script>

with a missing </script> tag on the highlighted line, only the first one will actually be imported and only the first one will run.

**n0xx0rz** · 05-30-2011, 03:18 PM

In source:

Code:

<script type="text/javascript" src="js/stepcarousel.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_start.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_biografia.js"></script>

So everything's normal...

Now you're saying that whichever of these external scripts comes first in the head runs, the other is skipped?

-thats exacly what i mean.

If so, it means that they each work

First and second config works proper - tested

Are the external script tags hard coded, or are they also on an include? If they're included, are they on one or two includes?

No, they are hard coded in index.php but i tested adding whole config to start.php and biografia.php files and still nothing... also ive deleted

Code:

<script type="text/javascript" src="js/stepcarouselSetup_start.js"></script>
<script type="text/javascript" src="js/stepcarouselSetup_biografia.js"></script>

from index.php and added stepcarouselSetup_start.js config to start.php and biografia.js to biografia.php and still not working.

**jscheuer1** · 05-30-2011, 03:28 PM

OK, I see. At least I think I see the situation. The only other thing I can think of at the moment is the version of jQuery you are using, 1.6.1. There have been problems with each of the .1 versions since at least 1.3.1.

Try downgrading to version 1.5.2, or even to 1.4.4 (each the latest in their series and presumably the most bug free).

Thread: Step Carousel Viewer 1.9 (multiple config)

Thread Tools

Search Thread

Step Carousel Viewer 1.9 (multiple config)

Bookmarks

Bookmarks

Posting Permissions