Step Carousel - beginner structure/php question

[neil123]

1) Script Title:
Step Carousel Viewer

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

3) Describe problem: I'm using step carousel viewer for for my homepage/gallery which consists of 5 panels and 5 paginated thumb images to navigate the gallery. I also have 3 additional pages on the site which currently load a new carousel populated with 1 panel corresponding to that page plus the paginated thumb images from the original gallery so as to link directly back to those sections of the original gallery. The problem is that I can't figure out the best way to link the thumbed images in the three additional pages directly to those corresponding sections as opposed to the gallery as a whole (which then by default starts with the first panel).

I currently have 3 ideas. 1) Redesign the 3 additional pages as panels in the original gallery and somehow set the carousel to only rotate through the first 5 panels. 2) The three extra sections link to other galleries on the same page as opposed to a new page with a new gallery. Then I could use href="javascript:stepcarousel.stepTo('originalGallery', x)" to link back to panel x in the original gallery. 3) Set which of the original gallerys panels is first displayed based on which of the paginated images are clicked. Judging from similar posts I gather this can be achieved using PHP but this is my first site and I've had to learn everything as I go and have virtually no knowledge of PHP. Is there an easy way to achieve this? Any suggestions are much appreciated.

The site can be found at www.luminousshade.com

Thanks,
Neil

[ddadmin]

You mentioned "3 additional pages on the site"- are those the three links at the bottom right of the homepage, such as http://www.luminousshade.com/Exhibitions.html? If so, what thumbnail should Exhibitions.html correspond to? I don't see the thumbnails of the Carousel insideExhibitions.html.

[jscheuer1]

What you're asking for is probably best accomplished via a query. Like if you were to go (or link) to:

luminousshade.com/index.html?panel=3

Like (on a file like your MainPanel/Main.html for the other Carousels that you haven't made yet):

<a href="index.html?panel=3>Text or <img> tag</a>

or:

<a href="?panel=3>Text or <img> tag</a>

The Carousel would go to the third panel (Accessories).

You can do that with PHP if your sever is PHP enabled. But chances are you would have to change the file to index.php. Since the Carousel depends upon javascript anyway, you may use javascript to grab the query (additions to your current code highlighted):

<script type="text/javascript">

stepcarousel.getQval = function(n){
	if(typeof n !== 'string'){
		return null;
	}
	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
	return (m = r.exec(m))? unescape(m[1]) : null;
}

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
	autostep: {enable:true, moveby:1, pause:5000},
	panelbehavior: {speed:1000, wraparound:true, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['', -5, 80], rightnav: ['', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['ajax','MainPanel/Main.html'],
	oninit:function(){
		jQuery('#mygallery a[rel*=facebox]').facebox(),
		this.$toclinks=jQuery('.toclinks') //get all links with "toclinks" class
		var panel;
		if((panel = stepcarousel.getQval('panel'))){
			stepcarousel.stepTo(this.galleryid, panel);
		}
	},

	onslide:function(){ //function that swaps the paginated BG/margin onslide
		for (var i=0; i<statusC; i++){//for all panels
				var j = i+1;
				if (i==sta . . .

[neil123]

I can't decide what's more impressive, your solution or that you were able to decipher my question.

I changed the file to index.php, added the highlighted code, changed the links and it worked perfectly except for when entering into a section of the gallery (by clicking on the 'Architectural' panel, triggering "stepcarousel.loadcontent('mygallery', 'Architectural/Architectural.html')" for example) after having visited one of the 3 additional sections. In such a case the url was still set to "index.php?panel4" and when the new content is loaded the gallery would stepto panel4 instead of persisting and staying on the panel which was clicked.

I managed to solve this using javascript. I added the following if statement to only execute your stepto method when Main.html is the ajax url.

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
	autostep: {enable:true, moveby:1, pause:5000},
	panelbehavior: {speed:1000, wraparound:true, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: false, moveby: 1, leftnav: ['', -5, 80], rightnav: ['', -20, 80]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['ajax','MainPanel/Main.html'],
	oninit:function(){
		jQuery('#mygallery a[rel*=facebox]').facebox();
		this.$toclinks=jQuery('.toclinks'); //get all links with "toclinks" class
		if (this.contenttype[1] == "MainPanel/Main.html"){
		var panel;
		if((panel = stepcarousel.getQval('panel'))){
			stepcarousel.stepTo(this.galleryid, panel);
		}
		}
	},

	onslide:function(){ //function that swaps the paginated BG/margin onslide
		for (var i=0; i<statusC; i++){//for all panels

Thank you John.



To ddadmin: The three additional sections are the three links at the bottom left. They don't correspond to thumbnails of the main gallery carousel but to unique pages, each with their own carousel. Within these 3 pages (The Artist, Exhibitions and Contact) are the thumbnails for the original gallery which now link back to the index page with a little extra PHP magic.

<table border="0" cellpadding="0" cellspacing="0" width="500">
  <tr>
   <td><a href="index.php" onclick="" id="one" class="toclinks one" ></a></td>
   <td><a href="index.php?panel=2" id="two" class="toclinks two" ></a></td>   
   <td><a href="index.php?panel=3" id="three" class="toclinks three"></a></td>   
   <td><a href="index.php?panel=4" id="four" class="toclinks four"></a></td>   
   <td><a href="index.php?panel=5" id="five" class="toclinks five"></a></td>
  </tr>
</table>

I'd just like to add here that the DD scripts and step carousel in particular are truly amazing. Step Carousel is so intuitive and well documented I used it both for my site and to learn javascript. THANKS to everyone involved and keep up the good work!

Neil

[jscheuer1]

Great! I still don't fully understand. But I think I've got it, and I'll take your word for it. I know my method is sound. The fact that it works says I got the syntax and the broad concept right.

I think you misunderstood me though. My solution doesn't require PHP or the .php extension for the index or any of the files involved. Though it obviously works with it.

If your server does have PHP available and active, you could skip:

stepcarousel.getQval = function(n){
	if(typeof n !== 'string'){
		return null;
	}
	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
	return (m = r.exec(m))? unescape(m[1]) : null;
}

And use instead the highlighted at the very beginning of what must now be called index.php:

<?php
$panel = isset($_GET['panel'])? $_GET['panel'] : "''";
?>
<!DOCTYPE html>
<html>
<head>
 . . .

And replace:

		var panel;
		if((panel = stepcarousel.getQval('panel'))){
			stepcarousel.stepTo(this.galleryid, panel);
		}

with:

		var panel = <?php echo $panel; ?>;
		if(panel){
			stepcarousel.stepTo(this.galleryid, panel);
		}

Your addition should still have the same effect. However, due to your addition's very nature, if my modifications are only added to inits that use:

contenttype: ['ajax','MainPanel/Main.html'],

then your modification should be unnecessary.