Hi Fredrik,

I have long wanted to add a nice intuitive Navigation to Thickbox. My Idea is as in the attached image. I thought I could do it just by using CSS, but I couldn't. Comes down I don't understand Jquery enough to pull this off. Certainly I would love to do this as a joint Work with you. But maybe you don't like my solution, so I'd have to do it for my own (maybe even better would be an extra option to enable this in Thickbox options, what do you think?)

I thought this had to be done somewhere around line 122

	TB_WIDTH = imageWidth + 30;
			TB_HEIGHT = imageHeight + 60;
			$("#TB_window").append("<a href='' id='TB_ImageOff' title='" + settings.next_close + "'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='" + settings.close + "'>" + settings.close + "</a> " + settings.esc_key + "</div>");

in the thickbox.js file. But as I said, I don't understand enough how the html is constructed. I understand it is built out of little entities like TB_NextHTML or TB_PrevHTML.

Or would it be even right to do this in the .module file?

Maybe your advice can only be "learn jquery and javascript", but maybe it can be a bit more hintful.

And hopefully, you like my solution and may give me a hand.

CommentFileSizeAuthor
thickbox-navigation.jpg63.14 KBeigentor
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

frjo CreditAttribution: frjo commented

Would not a simple CSS fix like this be close enough?

#TB_closeWindowButton, #TB_prev, #TB_next {
font-size: 18px;
}

Have you noticed that you can click anywhere in the image to go to the next image, on the last image a click on it will close the Thickbox.

eigentor’s picture

eigentor CreditAttribution: eigentor commented

You're right. I haven't thought about hacking it a tiny little bit and changing the text shown in the .module file.

Still - eye-candy and a better navigation is important especially in a everyday-use thing like an image gallery. I noticed you can step forward by just clicking the image.

Still many users will find out only by chance and be frustrated not finding the forward and especially backward button, for these are really small by default. We gotta compete the i-Phone.

But I guess this is rather up to the maintainer of the jquery plugin, you only maintain the port into drupal, and normally don't touch these things?

dezen’s picture

dezen CreditAttribution: dezen commented

I would say, this is due to thickbox different concept, well, it would make sense to improve the usabilty as written above. Such a new interface just may not let the thickbox look like the original Lightbox, as there is no need for just another clone. The task is not that easy, I must admit. Anyway drupal´s module lets you navigate through the gallery by klicking the picture in contrast to the original thickbox.

Pomliane’s picture

Pomliane CreditAttribution: Pomliane commented
Status: Active » Closed (won't fix)

This version of Thickbox is not supported anymore. The issue is closed for this reason.
Please upgrade to a supported version and feel free to reopen the issue on the new version if applicable.

This issue has been automagically closed by a script.