Results 1 to 5 of 5

Thread: Step Carousel - beginner structure/php question

  1. #1
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Step Carousel - beginner structure/php question

    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
    Last edited by neil123; 10-28-2010 at 03:51 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

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

    Code:
    <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 . . .
    Last edited by jscheuer1; 10-28-2010 at 09:27 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    neil123 (10-29-2010)

  5. #4
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

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

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

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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:

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

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

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

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

    Code:
    contenttype: ['ajax','MainPanel/Main.html'],
    then your modification should be unnecessary.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •