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?

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.

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!

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

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

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!

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.

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.

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!

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.

Hi John
Thanks for that,

I have edit my js like what you said animate = false;
see my example again: http://www.xuanyinwen.com/index1.html
the fading effect still noticeable for me even it going fast.

is there any way I can make it like the example I gave: http://www.realestate.co.nz/2119917
and keep the number of photo and close icon showing when changing photo

thanks!

Possibly. I looked through that script very thoroughly though and saw no other place where it was doing any animation like that, though it's obvious that it is.

The site you keep linking to that you say that you like uses SlimBox:

http://www.digitalia.be/software/slimbox2

But I'm not sure it's that same version (might be, or might be close enough), and they use it with options to stop the animations, the default with it is to animate, just like it is with Lightbox. To get rid of the animations, consult this section:

http://www.digitalia.be/software/slimbox2#usage

under SETUP. The imageFadeDuration is the one you're talking about right now, but there are a number of others you would want to disable as well to get it like the page you linked to.

In many ways it's really a better script than Lightbox, especially the version we've been talking about. It's more stable and requires much less code. It has an option for looping too, which I think is also important to you as well.

Like, inside the slimbox2.js file, you would make the AUTOLOAD CODE BLOCK look like so:

Code:

---

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
        jQuery(function($) {
                $("a[rel^='lightbox']").slimbox({/* Put custom options here */
                                imageFadeDuration: 1,
                                loop: true,
                                overlayFadeDuration: 1,
                                resizeDuration: 1,
                                captionAnimationDuration: 1
                        }, null, function(el) {
                        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                });
        });
}

---

Hi John

so which one you suggest to use if I want to set up something same as the one I like?

SlimBox or others?

cheers
Wayne

I'd go with SlimBox. I tried it out with the settings from my last post:

" . . . inside the slimbox2.js file, you would make the AUTOLOAD CODE BLOCK look like so:

Code:

---

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
        jQuery(function($) {
                $("a[rel^='lightbox']").slimbox({/* Put custom options here */
                                imageFadeDuration: 1,
                                loop: true,
                                overlayFadeDuration: 1,
                                resizeDuration: 1,
                                captionAnimationDuration: 1
                        }, null, function(el) {
                        return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
                });
        });
}

---

And it worked just like the one you say you like.

Hi John

Thanks a lot!!! I love you!!!


Regards

Wayne