Previous and Next buttons

[dee_em]

1) Script Title: Lightbox Image Viewer 2.03

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: More than a problem this is a question.
Is there any way to have the "Previous" and "Next" buttons visible all the time as opposed to only appear on hover?

Thanks!

[jscheuer1]

http://www.dynamicdrive.com/forums/s...ad.php?t=25596

[dee_em]

Dude, you seriously rock ...!

It worked perfectly, thanks!

[dee_em]

You know what it would a big improvement from a usability standpoint?
If we could have a "grayed-out" version of the "prev" and "next" buttons that would be displayed on the first and the last image of a series (as opposed to not showing any button at all like it's doing now.
I took a stab at it, created the two new images, tweaked the CSS and the javascript, but I'm really bad at the latter so it did not work.
I think it needs the "if" statement that currently regulates the button not showing up in the first and last image to be completed by an "if else" or "else" alone, but again, this is beyond my programming skills, so I gave up.

Do you feel like give it a shot? I think it would really improve the overall experience ...

[dub713]

that last option of having a grayed out button would be good, but what i'd like to see is a way to keep the next/prev looping. i don't want to have to get to the end of 10 images, and have to click prev 9 times to get back to image 1.

is there a way to have it loop from the last image back to the first, and the first to the last?

[jscheuer1]

is there a way to have it loop from the last image back to the first, and the first to the last?

Yes. Find the function:

	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();
	},

Modify it like so:

	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 != 0? activeImage - 1 : 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 != imageArray.length - 1? activeImage + 1 : 0); return false;
			}
		//}
		
		this.enableKeyboardNav();
	},

[dub713]

Yes. Find the function:

Thanks John!

since that seemed to be an easy one, what about this issue...


we want to use lightbox/litebox/lytebox with a product gallery. main image on a page displayed at all times, thumbs beneath. on thumbnail mouseover, the main image would change to show the different colors that are shown by the differerent thumbnails. then upon click of thumbnail, that activates the lightbox, showing all the images in that group (all of the detailed images of the thumbs)

so, it's a normal lightbox done by gallery, but with rollovers changing an active image on the page. you can do the rollovers, and onclick opens a popup, so why not have the rollovers, and onclick activates the lightbox?

i've posted in several boards now, and i can't see how it's not possible. any thoughts?

[jscheuer1]

a normal lightbox done by gallery, but with rollovers changing an active image on the page. you can do the rollovers, and onclick opens a popup, so why not have the rollovers, and onclick activates the lightbox?

i've posted in several boards now, and i can't see how it's not possible. any thoughts?

Well, it would depend upon the script for the rollovers. What are you using for that. I ask because some of these will remove the onclick event from am element while adding the rollover to it. If that's the case, that's most likely your reason. It could also be some other script conflict, like an onload conflict or conflicting variables, etc.

In theory though, an onmouseover and an onclick event should both be able to coexist on a single element.

Please post a link to the page on your site that contains the problematic code so we can check it out.

[dee_em]

Is there any way to change the position of the "previous" and "next" buttons?
I've tried several things in the CSS file but all I can do is modify the distance from the top, not from the left.

Any helper out there?

[fatimawdesigns]

I have been looking for this script modification that allows starting the image set from the beginning ALL MORNING. Thanks so much jscheuer1!