Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: How can I change the setting for lightbox image slideshow?

  1. #1
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How can I change the setting for lightbox image slideshow?

    I have set up a photos slideshow follow the instruction:
    http://www.dynamicdrive.com/dynamici...m#.Ukn8VNJ9vTo

    Now I want to edit some settings:

    1, disable the fading when changing photo
    2, make the photo repeatable, it mean when it showing the last photo, click on next, it will go back to first photo.
    3, when loading the photo, keep the frame stay instead of hiding.

    I have check the lightbox.css and lightbox.js, and couldn't find the setting

    anyone can help please?

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    275
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    Part 1 and 3:
    change this:
    Code:
    var fileLoadingImage = "images/loading.gif";		
    var fileBottomNavCloseImage = "images/closelabel.gif";
    
    var animate = true;	// toggles resizing animations
    var resizeSpeed = 7;	// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
    var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable
    to this:
    Code:
    var fileLoadingImage = "images/loading.gif";		
    var fileBottomNavCloseImage = "images/closelabel.gif";
    
    var animate = false;	// toggles resizing animations
    var resizeSpeed = 7;	// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
    var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable
    
    var loop = true; //Added this to allow you to loop pictures. FYI this is for part 2 not 1 or 3 [false: doesnt loop - true: loops]
    Part 2:
    Change this:

    Starting at line 518:
    Code:
    updateNav: function() {
    
    		Element.show('hoverNav');				
    
    		// if not first image in set, display prev image button
    		if(activeImage != 0){
    			Element.show('prevLink');
    			document.getElementById('prevLink').onclick = function() {
    				myLightbox.changeImage(activeImage - 1); return false;
    			}
    		}
    
    		// if not last image in set, display next image button
    		if(activeImage != (imageArray.length - 1)){
    			Element.show('nextLink');
    			document.getElementById('nextLink').onclick = function() {
    				myLightbox.changeImage(activeImage + 1); return false;
    			}
    		}
    		
    		this.enableKeyboardNav();
    	},
    to this:
    Code:
    updateNav: function() {
    
    		Element.show('hoverNav');				
    
    		// if not first image in set, display prev image button
    		if(activeImage != 0){
    			Element.show('prevLink');
    			document.getElementById('prevLink').onclick = function() {
    				myLightbox.changeImage(activeImage - 1); return false;
    			}
    		}else{
    			if(loop){
    				Element.show('prevLink');
    					document.getElementById('prevLink').onclick = function() {
    					myLightbox.changeImage(imageArray.length - 1); return false;
    				}
    			}
    		}
    
    		// if not last image in set, display next image button
    		if(activeImage != (imageArray.length - 1)){
    			Element.show('nextLink');
    			document.getElementById('nextLink').onclick = function() {
    				myLightbox.changeImage(activeImage + 1); return false;
    			}
    		}else{
    			if(loop){
    				Element.show('nextLink');
    					document.getElementById('nextLink').onclick = function() {
    					myLightbox.changeImage(0); return false;
    				}
    			}
    		}
    		
    		this.enableKeyboardNav();
    	},
    Also change this:

    Starting at line 583:
    Code:
    if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
    			myLightbox.end();
    		} else if((key == 'p') || (keycode == 37)){	// display previous image
    			if(activeImage != 0){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage - 1);
    			}
    		} else if((key == 'n') || (keycode == 39)){	// display next image
    			if(activeImage != (imageArray.length - 1)){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage + 1);
    			}
    		}
    to this:
    Code:
    if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
    			myLightbox.end();
    		} else if((key == 'p') || (keycode == 37)){	// display previous image
    			if(activeImage != 0){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage - 1);
    			}else{
    				if(loop){
    				      myLightbox.disableKeyboardNav();
    				      myLightbox.changeImage(imageArray.length - 1);
                                    }
    			}
    		} else if((key == 'n') || (keycode == 39)){	// display next image
    			if(activeImage != (imageArray.length - 1)){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage + 1);
    			}else{
    				if(loop){
                                           myLightbox.disableKeyboardNav();
    			               myLightbox.changeImage(0);
                                    }
    			}
    		}
    Enjoy - this is all in lightbox.js
    PS: Red is what i added - Blue is what i changed.
    Last edited by Deadweight; 10-01-2013 at 05:03 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot for your advice. it does change the photo repeatable now,
    but part 1 and 3 still not fixed.
    change var animate = true; to false only stop re sizing. but it still got fading when changing the photo
    and the frame(the bottom frame - photo number and close icon) still hiding when changing the photo

    Very appreciate for your help!

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    275
    Thanks
    3
    Thanked 17 Times in 17 Posts

    Default

    Do you have an example of this?
    Because for mine i see the photo number and close icon just fine.

    Try changing: var resizeSpeed = 7; [change this to 10 if it isnt already at 10].

    If you have some place to show your code or something that would be more helpful.

    Thanks
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #5
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Crazykld69,
    Thanks again for you reply,

    my one can see the photo number and close icon fine too,
    just when I click on next to change photo and it will hiding for a second, then will show again after next photo load.
    what I want is keep the number of photo and close icon show all the time when changing photo.

    another question is how can I disable the fading when changing photo
    see the example here: http://www.realestate.co.nz/2119917
    click on "view full size photo" then you will see the photos show.
    I want set up exactly same as this

    many thanks for your help!!
    Last edited by jscheuer1; 10-02-2013 at 03:20 AM. Reason: Format

  6. #6
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to disable fading effect on Lightbox image viewer 2.03a

    1) Lightbox image viewer 2.03a

    2) http://www.dynamicdrive.com/dynamici...m#.UkotN9J9vTp

    3) Describe problem: I want to disable the fading effect when change photo, I try to find the fadingduration from the lightbox.js and css, but can't find anything that I can edit. Help please!

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,885
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    When you say "fading effect", do you mean the dark overlay on the background?

    If so, look for #overlay in the CSS and try changing the background-color to transparent.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    If you set animate to false, that should take care of it.

    Code:
    var fileLoadingImage = "images/loading.gif";		
    var fileBottomNavCloseImage = "images/closelabel.gif";
    
    var animate = false;	// toggles resizing animations
    var resizeSpeed = 7;	// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
    var borderSize = 10;	//if you adj . . .
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  9. #9
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John and Beverleyh

    Thanks for reply, here is the example I have set up: http://www.xuanyinwen.com/index1.html
    which is exactly like the example of http://www.dynamicdrive.com/dynamici...m#.UkotN9J9vTp
    changing the animate = false won't stop it fading when change photo

    the one I want to set up is like this: http://www.realestate.co.nz/2119917
    you need to click on the view full size photo on the bottom right corner of the photo then it will show image viewer.
    for this one, when you click on the next photo, you will see the photo will change straight away instead of got the fading effect.

    any idea where I can edit please? many thanks!
    Last edited by jscheuer1; 10-03-2013 at 08:55 PM. Reason: Format

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    There's no way for us to know that because you have (in the xuanyinwen.com/js/lightbox.js file, around line #68):

    Code:
    // -----------------------------------------------------------------------------------
    //
    //	Configuration
    //
    var fileLoadingImage = "images/loading.gif";
    var fileBottomNavCloseImage = "images/closelabel.gif";
    var animate = true; // toggles resizing animations
    var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)
    var borderSize = 10; //if you adjust the pad . . .
    Trust me, with that set to false, there will be no fading or animation. It will happen actually, but it will be so fast, it will be like nothing happened.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

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

Similar Threads

  1. Resolved why does slideshow image change causes smooth scroll to jump??
    By somethingaboutsunshine in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-09-2012, 03:24 AM
  2. Replies: 2
    Last Post: 01-19-2010, 02:53 AM
  3. Setting z-order of image slideshow in "Carousel II" script
    By LCharlier in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-29-2007, 05:51 AM
  4. Setting a time change interval?
    By asclepius in forum JavaScript
    Replies: 1
    Last Post: 12-04-2007, 07:50 AM
  5. Drop-in Slideshow Script II (hyperlinked) and Lightbox image viewer 2.0
    By malsyriani@yahoo.com in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-25-2006, 04:42 AM

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
  •