PDA

View Full Version : 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/dynamicindex4/stepcarousel.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 :



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/showthread.php?t=31669&highlight=Carousel+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 :


<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 :



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 :


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


<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

<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">
<!--includes goes here -->
</div><!--end content-->
</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:


<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:


<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

<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).

n0xx0rz
05-30-2011, 03:36 PM
Nope, still not working
downgrade to :
1.5.2
1.4.4
1.4.1

Still nothing

jscheuer1
05-30-2011, 03:45 PM
I'm out of ideas then for now. If you could put up a live demo of the problem somewhere, I could troubleshoot that.