SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    couloir.org's Slideshow. Previous Button?

    Hello there.

    Before I even begin - I do not know Javascript. I'm eager to learn, but finding the time is a problem at the moment.

    What I suppose I'm asking is if anyone would be able to have a look at the Fading and Resizing slideshow from Couloir.org and help me by creating a "Previous Image" link (or should I say the javascript code required to do this)?

    I'm wanting to use this type of slideshow for a project, but without the "back" functionality it's a bit lacking.

    I know I'm probably being cheeky, but would anyone be able to help? It would be most appreciated. Obviously if this is a lot of work, I don't expect you to do it, but I thought I'd ask?

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, easy peasy. I cloned the nextPhoto function. If the user is viewing the first photo it won't do anything.

    Add this to the script:

    Code:
    	prevPhoto = function(){		
    	
    		if(photoId - 2 >= 0) {
    			
    			photoId -= 2;
    		
    			// Hide photo container temporarily
    			API.PhotoContainer.hide();
    			API.PhotoContainer.setOpacity(0);
    					
    			// Get dimensions of photo
    			var wNew = photoWidthArray[photoId];
    			var hNew = photoHeightArray[photoId];
    			
    			// Start tween on a delay
    			setTimeout('API.Container.tweenTo(easeInQuad, [API.Container.getWidth()-borderSize, API.Container.getHeight()-borderSize], ['+wNew+','+hNew+'], 7)',500);
    			
    			// Set source, width, and height of new photo
    			document.getElementById('Photo').src = photoDir + photoArray[photoId];
    			document.getElementById('Photo').width = wNew;
    			document.getElementById('Photo').height = hNew;
    			document.getElementById('NextLink').href = "#" + (photoId+1);
    			document.getElementById('PrevLink').href = "#" + (photoId+1);
    			document.getElementById('Caption').innerHTML = captionArray[photoId];
    			document.getElementById('Counter').innerHTML = (photoId+1)+' of '+photoNum;
    			
    			// Advance counter to next photo
    			advancePhoto();
    		}
    	}
    Then somewhere on your page:
    <div align="left" onclick="prevPhoto();"><a id="PrevLink" href="#">Back</a></div>

    (ugly back button, feel free to modify it somewhat)

    Oh, and I modified nextPhoto with the following line, don't know if it's absolutely necessary:
    document.getElementById('PrevLink').href = "#" + (photoId+1);

    (see prevPhoto for where it should go)

  3. #3
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Jim,

    Thanks for that - I was hoping it would be somthing easy

    However, like the couloir.org example - I have 6 images in my project. Having included your code, the previous button won't work once I get to my 6th (and final) image. Is this an easy problem to fix, or would this be more tricky?

    Thanks again for your help so far - it's great!

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's the revised function, works for all photos and from photo1 if you hit back it goes to photo6.
    Code:
    	prevPhoto = function(){		
    		
    			if(photoId == 1) {
    				photoId = photoArray.length - 1;
    			} else if (photoId == 0) {
    				photoId = photoArray.length - 2;
    			} else {
    				photoId -= 2;
    			}
    		
    			// Hide photo container temporarily
    			API.PhotoContainer.hide();
    			API.PhotoContainer.setOpacity(0);
    					
    			// Get dimensions of photo
    			var wNew = photoWidthArray[photoId];
    			var hNew = photoHeightArray[photoId];
    			
    			// Start tween on a delay
    			setTimeout('API.Container.tweenTo(easeInQuad, [API.Container.getWidth()-borderSize, API.Container.getHeight()-borderSize], ['+wNew+','+hNew+'], 7)',500);
    			
    			// Set source, width, and height of new photo
    			document.getElementById('Photo').src = photoDir + photoArray[photoId];
    			document.getElementById('Photo').width = wNew;
    			document.getElementById('Photo').height = hNew;
    			document.getElementById('NextLink').href = "#" + (photoId+1);
    			document.getElementById('PrevLink').href = "#" + (photoId+1);
    			document.getElementById('Caption').innerHTML = captionArray[photoId];
    			document.getElementById('Counter').innerHTML = (photoId+1)+' of '+photoNum;
    			
    			// Advance counter to next photo
    			advancePhoto();
    	}

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant! Thank you so much - I'll now be able to use this for my project!

    I was hoping it would be something as simple as cloning the previous function - but obviously I have no experience to call on.

    If I was going to be really pedantic - I'd ask if there is any way to disable the previous button when on the first image, but if that's a problem then don't worry, you've already done so much

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, change
    if(photoId == 1) {
    photoId = photoArray.length - 1;

    to
    if(photoId == 1) {
    return;

  7. #7
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jim, what can I say? You're a life saver!

    Thanks so much for helping with this - your work is really appreciated. Now if I can only find the time to start learning Javascript myself...

    Thanks again.

  8. #8
    SitePoint Member
    Join Date
    Dec 2004
    Location
    brooklyn
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Share the wealth

    Willigogs,

    Would you mind posting your complete code? (Being that I'm even less savvy than you)

    That'd be a great help!

    Zeet

  9. #9
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again.

    Jim Fraser managed to help me out last month in configuring the couloir.org slideshow for my own needs (code posted below).

    I now need this changing VERY slightly, so that once you reach the last slide in a presentation (e.g. - slide 8 of 8) the 'next' button doesn't take you back to the first slide.

    As mentioned previously, I have very little Javascript knowledge so would be very appreciative if anyone could offer some help?

    Thanks in advance

    Code:
    <SCRIPT src="api.js" type=text/JavaScript charset=utf-8></SCRIPT>
    <SCRIPT type=text/JavaScript charset=utf-8>
    	// <![CDATA[
    	
    	// -----------------------------------------------------------------------------------
    	// 
    	// This page coded by Scott Upton
    	// http://www.uptonic.com | http://www.couloir.org
    	// You are free to use this code, but please leave this message intact if you do
    	//
    	// Associated API copyright 2002, Travis Beckham (www.squidfingers.com)
    	//
    	// -----------------------------------------------------------------------------------
    	// --- version date: 12/13/04 ------------------------------------------------------
    	
    	//var photoId = 0;
    	var photoDir = "images/";
    	var borderSize = 20
    	
    	// get current photo id from URL
    	var thisURL = document.location.href;
    	var splitURL = thisURL.split("#");
    	var photoId = splitURL[1] - 1;
    	
    	// if no id in query string then set i=1
    	photoId = (!photoId)? 0:photoId;
    	
    	// List of photos in this gallery
    	photoArray = new Array("24.gif","24a.gif","25a.gif","26.gif","28.gif","30.gif","32.gif","33.gif");
    	
    	var photoNum = photoArray.length;
    	
    	// Pixel width of each photo in this gallery
    	photoWidthArray = new Array("800","800","800","600","559","560","600","800");
    	
    	// Pixel height of each photo in this gallery
    	photoHeightArray = new Array("255","369","299","343","316","317","342","342");
    	
    	// Captions for photos
    	captionArray = new Array("one","two","three","four","five","six","seven","eight");
    	
    	// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
    	API = new Detect();
    	
    	// CREATE INSTANCES & LOAD
    	loadAPI = function(){
    		// Instantiate HTMLobj
    		API.Container = new HTMLobj('Container');
    		API.PhotoContainer = new HTMLobj('PhotoContainer');
    		API.Photo = new HTMLobj('Photo');
    		
    		nextPhoto();
    	}
    	onload = loadAPI;
    	
    	// Fade in photo when it is loaded from the server
    	// Called by the image.onload event
    	initFade = function(){
    		// Be certain the tween is complete before fading, too
    		var fade_timer = setInterval('startFade()', 1000);
    		
    		// Fade photo in when ready and clear listener
    		startFade = function(){
    			if(API.Container._tweenRunning == false){
    				clearInterval(fade_timer);
    				API.PhotoContainer.fadeIn(0,15,30);
    			} else {
    				return;
    			}
    		}
    	}
    	
    	// Advance Photo ID by one
    	advancePhoto = function(){
    		// Cycle through to end, then repeat
    		if(photoId == (photoArray.length - 1)){
    			photoId = 0;
    		} else {
    			photoId++;
    		}
    		return photoId;
    	}
    	
    	// Function to load subsequent photos in gallery
    	nextPhoto = function(){		
    		// Hide photo container temporarily
    		API.PhotoContainer.hide();
    		API.PhotoContainer.setOpacity(0);
    				
    		// Get dimensions of photo
    		var wNew = photoWidthArray[photoId];
    		var hNew = photoHeightArray[photoId];
    		
    		// Start tween on a delay
    		setTimeout('API.Container.tweenTo(easeInQuad, [API.Container.getWidth()-borderSize, API.Container.getHeight()-borderSize], ['+wNew+','+hNew+'], 7)',500);
    		
    		// Set source, width, and height of new photo
    		document.getElementById('Photo').src = photoDir + photoArray[photoId];
    		document.getElementById('Photo').width = wNew;
    		document.getElementById('Photo').height = hNew;
    		document.getElementById('NextLink').href = "#" + (photoId+1);
    		document.getElementById('PrevLink').href = "#" + (photoId+1);
    		document.getElementById('Caption').innerHTML = captionArray[photoId];
    		document.getElementById('Counter').innerHTML = (photoId+1)+' of '+photoNum;
    		
    		// Advance counter to next photo
    		advancePhoto();
    	}
    	
    	prevPhoto = function(){		
    		
    			if(photoId == 1) {
    			return;
    			} else if (photoId == 0) {
    				photoId = photoArray.length - 2;
    			} else {
    				photoId -= 2;
    			}
    		
    			// Hide photo container temporarily
    			API.PhotoContainer.hide();
    			API.PhotoContainer.setOpacity(0);
    					
    			// Get dimensions of photo
    			var wNew = photoWidthArray[photoId];
    			var hNew = photoHeightArray[photoId];
    			
    			// Start tween on a delay
    			setTimeout('API.Container.tweenTo(easeInQuad, [API.Container.getWidth()-borderSize, API.Container.getHeight()-borderSize], ['+wNew+','+hNew+'], 7)',500);
    			
    			// Set source, width, and height of new photo
    			document.getElementById('Photo').src = photoDir + photoArray[photoId];
    			document.getElementById('Photo').width = wNew;
    			document.getElementById('Photo').height = hNew;
    			document.getElementById('NextLink').href = "#" + (photoId+1);
    			document.getElementById('PrevLink').href = "#" + (photoId+1);
    			document.getElementById('Caption').innerHTML = captionArray[photoId];
    			document.getElementById('Counter').innerHTML = (photoId+1)+' of '+photoNum;
    			
    			// Advance counter to next photo
    			advancePhoto();
    	}

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    if(photoId == (photoArray.length - 1)){
    photoId = 0;
    return;
    } else {

  11. #11
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou jorigami!

    I hoped it would be something as easy as this

  12. #12
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again!

    I must apologise to everyone that I keep coming back here and asking for little tweaks to a script that isn't mine and that I simply don't understand - but I cheekily just need one more fix and then hopefully I can leave you all alone!?

    Jorigami managed to help me out by making the slideshow stop once it reaches the last slide, but I think this may have had an unexpected concsquence? Now, once you reach the last slide, if you hit the "previous" button it jumps back 2 slides instead of just 1 (e.g. you get to slide 6 of 6 - hit "previous" and it takes you to slide 4).

    Again, sorry to keep bothering everyone with this, but if someone could be kind enough to offer some help, I promise I'll start learning Javascript so I can do this myself in future!

    Thanks everyone.

  13. #13
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    Finland
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    prevPhoto = function(){
    
    if(photoId == 1) {
    return;
    } else if (photoId == 0) {
    photoId = photoArray.length - 2;
    } else {
    photoId -= 2;
    }
    
    
    if(photoId == 0) { return ; }
    photoId --;
    This will allow back-button to go all the way back to the first picture, but not to wrap to the last one. Is that what you wanted?

  14. #14
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Jorigami for your reply.

    I haven't got access to the related project at the moment, but will probably have chance to look at it over this weekend. I'll try out the code and let you know how it goes!

    Thanks again


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
  •