How can I change the setting for lightbox image slideshow?

[xuanyinwen]

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?

[Deadweight]

Part 1 and 3:
change this:

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:

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:

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:

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:

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:

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.

[xuanyinwen]

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!

[Deadweight]

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

[xuanyinwen]

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!!

[xuanyinwen]

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!

[Beverleyh]

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.

[jscheuer1]

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

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.

[xuanyinwen]

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!

[jscheuer1]

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

// -----------------------------------------------------------------------------------
//
//	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.