SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Customizing the couloir slideshow

    I know it's an oldie but I think it still looks and functions great, alas: I can't find reference anywhere to anyone who has managed to add custom navigation links to go straight to a particular image. eg, instead of just nextPhoto() and previousPhoto() I would just like to have something like gotoPhoto(#4) as another link option. Seems like a simple addition, but for the life of me can't figure out why nobody ever included it.

    Can anyone help?

    Link to original couloir slideshow script: http://www.couloir.org/js_slideshow/

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    customizing ss script

    The slideshow.js file has these functions
    Code:
    	nextPhoto: function(){
    		// Figure out which photo is next
    		(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
    		this.initSwap();
    	},
    	prevPhoto: function(){
    		// Figure out which photo is previous
    		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
    		this.initSwap();
    photoArray.length - 1 gets the images 1-5 into the array key index numbers 0-4. The nextPhoto function goes to the next image unless it's the last image in which case it goes to the first. Similarly, the prevPhoto function goes to the previous image unless it's the first image in which case it goes to the last.
    You could probably write your own function something like
    Code:
    	specificPhoto: function(specific_image){
    		// go to specified photo
    		photoId = specific_image;
    		this.initSwap();
    and just put links calling the function like
    HTML Code:
    <a href="#" onclick="specificPhoto(3);" onkeypress="specificPhoto(3);">Photo 4</a>

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, if only it were that simple

    What you proposed makes perfect sense, and I've already tried something very similar, but it seems that adding anything new breaks the chain of functions that have been set up, either that or we are ignoring something important.

    This particular addition gave me the error 'specificPhoto not defined' in firebug, and for some reason it points to line 1 of my html, eg, the doctype, which is odd.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    not defined

    "not defined" error. Did you just copy-paste and forget the closing "}," ?
    I didn't write the script for you, I was just giving an idea of how you could do it.

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Man, I appreciate you're help and am fine with taking suggestions and going with them. But I'm running out of time and thought I might run into someone who already tweaked this script, instead of reinventing the wheel - especially considering it's from 2004/5.

    No I did not forget the closing brace, but the initSwap function that's called iterates on through other functions that apparantly are not written to handle an object being passed between them. My knowledge of OOP js like this isn't so great, otherwise I would have figured it out by now!

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,445
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    modifying script

    I didn't mean any offense, just meant to cover basics as it is common in the forums that they are over-looked and are the problem. You are right, you would think someone must have done this already. And you are right, there is no sense in unnecessarily "reinventing the wheel". Hopefully someone that has already modified the script will read this thread and help out.

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working, but I had to monkey around with the .js file a bit.

    Hopefully you can figure out where the lines go by the other pieces of code I left around them. Changed lines are in Bold.

    modifying slideshow.js:
    First off, the variable that represents the slideshow object has to be made global:
    Code:
    // --- version date: 11/28/05 --------------------------------------------------------
    
    var myPhoto;
    
    // get current photo id from URL
    var thisURL = document.location.href;
    Then remove the var keywords from the onload function:
    Code:
    function init() {
    	myPhoto = new Slideshow(photoId);
    	myPhoto.initSwap();
    	soundManagerInit();
    }
    Then add in the code that Mittineague suggested:
    Code:
    	prevPhoto: function(){
    		// Figure out which photo is previous
    		(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
    		this.initSwap();
    	},
    	specificPhoto: function(specific_image){
    		// go to specified photo
    		photoId = specific_image;
    		this.initSwap();
    	},
    	initSwap: function() {
    That should be OK for the js file. I noticed some stuff with behaviours but I didn't get into that.

    Then call the function from your html page something like:
    Code:
    <button onclick="myPhoto.specificPhoto(2);">Go to photo #2</button>
    That got it working for me (tested in ie6 and ff1.5)

    Good luck

  8. #8
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Awesome

    Thanks guys, the code in the version I have is slightly different but that was enough information to fix it, many thanks, you really saved my bacon


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
  •