PDA

View Full Version : Step Carousel Viewer and current item?



student101
07-19-2008, 09:32 AM
Step Carousel Viewer

http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

I have used this wonderful script to create dynamically loaded menu of images, these images are linked to bigger images with id's used as filters.
pagename.php?id=<id from db>
How do I keep the current state after clicking the carousel item.
I have 16 menu item (images) - each one has a different link
I click on item number 19 (which has been scrolled into view) - the page refreshes and I loose the item that I scrolled to previously.

Is there something that could be used to remember the previously clicked item?

Cheers

jscheuer1
07-19-2008, 09:48 AM
You could just add in some boiler plate cookie code (this one's from http://www.quirksmode.org/js/cookies.html):


function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

Then in the setup:


stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
statusvars: ['statusA', 'statusB', 'statusC'], // Register 3 "status" variables
onslide:function(){
createCookie('mygallery',statusB);
},
oninit:function(){
if(readCookie('mygallery'))
stepcarousel.stepTo('mygallery', readCookie('mygallery'));
},
contenttype: ['inline'] // content type
})

student101
07-19-2008, 09:57 AM
WOW cool, but it scrolls 8 items as soon as the page loads, or when I click the first item.

jscheuer1
07-19-2008, 10:02 AM
Well it will scroll to the item that was displaying. I don't know what you mean about:


or when I click the first item

Please post a link to the page on your site that contains the problematic code so we can check it out.

student101
07-19-2008, 10:05 AM
It's not online - it's on my PC.
When I change the stepTo to stepBy it sort of works, sort of.
Or changin statusB to statusA or statusC as well.

I will try to drop it online now.

jscheuer1
07-19-2008, 10:15 AM
Using stepBy() will move the viewer that number of 'slides'. Starting from the first slide (as it would be when reloading) it should amount to the same thing as stepTo(). However, in local testing it messes up for me. Only stepTo() works here.

student101
07-19-2008, 10:17 AM
Here is what I got:

http://www.kleyn.co.za/home_2.php?catid=1
If you clicked on any of the links on the left you have to click on To 1st Panel to see all the cars

I hope the site loads for you.

jscheuer1
07-19-2008, 10:26 AM
Well what do you want to have happen? I thought you wanted that on page load/reload that the scroller would scroll to the state that it was last scrolled to. If you want something different to happen, please be specific.

student101
07-19-2008, 10:30 AM
The item clicked should stay clicked.
If you click item 13 then it just scrolls uncontrollably to the next 8 items.

In that example I only loaded 8 items, let me load the same amount so there will be 16 of them.

Currently even with the 8 items it still scrolls on it's own, even if you click the third item.

student101
07-19-2008, 10:47 AM
Well what do you want to have happen? I thought you wanted that on page load/reload that the scroller would scroll to the state that it was last scrolled to. If you want something different to happen, please be specific.

Cool now there are more, yet it still scrolls on it's own, it may be a bit confusing as some of the images are the same.

jscheuer1
07-19-2008, 10:49 AM
One thing I don't understand is why you have so many panels showing, it kind of defeats the purpose. Also, if you want it to remember the item clicked, rather than the item that had previousy been scrolled to, we would need to use a different approach.

Since you are already using PHP and setting something like:


&img=image8.jpg&id=8

in the URL

You could probably skip the cookie code and just do something like (I'm not real good at PHP):


stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
oninit:function(){
<?php
if ( $_GET['id'] ) {
echo "stepcarousel.stepTo('mygallery'," . $_GET['id'] . ");";
}
?>
return;
},
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

student101
07-19-2008, 10:59 AM
Why didn't I thunk of that!

http://www.kleyn.co.za/home_4.php?catid=1

It sort of works as long you stay below 10
Is there a limit to how many you can have?
My id's run up till 30 ++ so when I click it, it just scrolls?

Almost as if it knows there are only x amount (like 16 if there are only 16)



Well, you are a genius!!! It will have to stay below 10 for this menu to work.

Thank you

jscheuer1
07-19-2008, 12:42 PM
There's virtually no limit to how many panels you may have. But I wasn't talking about the catid, I was talking about the id, as in (from your source code):


<a href="?catid=1&amp;img=image5.jpg&amp;id=5">

Which would produce a URL like:


http://www.kleyn.co.za/home_2.php?catid=1&img=image5.jpg&id=5

Which would resolve this:


oninit:function(){
<?php
if ( $_GET['id'] ) {
echo "stepcarousel.stepTo('mygallery'," . $_GET['id'] . ");";
}
?>
return;
},

to this:


oninit:function(){
stepcarousel.stepTo('mygallery',5);return;
},


Which would scroll the viewer to the image that was clicked.

student101
07-19-2008, 01:00 PM
I know, id as in GET['id'] comes from the database and is the actual id(key) of the db value.
The "catid" only filters the db to show the menu on the top.

I would need to make a new field called "menuid" and use that as the filter.

http://www.kleyn.co.za/home_4.php?catid=1&img=image5.jpg&id=5

<?php
if ( $_GET['menuid'] ) {
echo "stepcarousel.stepTo('mygallery'," . $_GET['menuid'] . ");";
}
?>

jscheuer1
07-19-2008, 01:08 PM
You can set it up however you like. A query value may be used by the page for more than one thing though. The only important thing is that whatever query value you use, it should be set (in the URL) to the number of the panel that was clicked. It looked to me as though the id value fulfilled that requirement, but you know more about your setup than I do.

student101
07-19-2008, 01:13 PM
No, it works right the way it does, except this small part.
If I have 25 images in the filter then I can use

http://www.kleyn.co.za/home_4.php?catid=1&img=image5.jpg&id=25
I only have 16 images in the filter so 25 wont work, but this would (if I had the correct id setup for it, cause each id would need an image to show)
http://www.kleyn.co.za/home_4.php?catid=1&img=image5.jpg&id=16
I need to change or add a few things, nothing major;(Now that I see the light...)

Thank you again!