Get thickbox to advance on click

ashtonpeek / 2010-09-02 18:42:11   

In the thickbox javascript file there should be some way to change the image to advance on click

I don't know javascript....

I've read in the forum to:

change line 138
this: a href='' id='TB_ImageOff'
to this: a href='' id='TB_next'
but that edit broke the actual "next" link

and someone suggested:

changing lines 138 to 158

this:

*******************

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+img_caption+"</div><div id='TB_secondLine'>" + prev.html + "<span class='TB_bg'> | " + imageCount + "<span><span class='TB_bg'> | <a href='#' id='TB_closeWindowButton' title='return'>Return</a> | <span>" + next.html + "</div>");



$("#TB_closeWindowButton").click(TB_remove);



function buildClickHandler(image) {

return function() {

$("#TB_window").remove();

$("body").append("<div id='TB_window'></div>");

TB_show(image.caption, image.url, rel);

return false;

};

}

var goPrev = buildClickHandler(prev);

var goNext = buildClickHandler(next);

if ( prev.html ) {

$("#TB_prev").click(goPrev);

}



if ( next.html ) {

$("#TB_next").click(goNext);

}

*******************


to this:


###################

$("#TB_window").append("<a href='' id='TB_imgNext' title='Next'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+img_caption+"</div><div id='TB_secondLine'>" + prev.html + "<span class='TB_bg'> | " + imageCount + "<span><span class='TB_bg'> | <a href='#' id='TB_closeWindowButton' title='return'>Close</a> | <span>" + next.html + "</div>");


$("#TB_closeWindowButton").click(TB_remove);

function buildClickHandler(image) {

return function() {

$("#TB_window").remove();

$("body").append("");

TB_show(image.caption, image.url, rel);

return false;

};

}

var goPrev = buildClickHandler(prev);

var goNext = buildClickHandler(next);

if ( prev.html ) {

$("#TB_prev").click(goPrev);

}


if ( next.html ) {

$("#TB_next").click(goNext);

}


if ( next.html ) {

$("#TB_imgNext").click(goNext);

}

###################


that didn't work either... the image didn't show up when you clicked on the thumbnail... blank page....

does anyone see a problem with that script or know how to change it to do the image advance on click??

just using the regular standard thickbox plugin that came with indexhibit... my site is http://ashtonpeek.com/ not that it matters because everyone has this plugin... or should..

ashtonpeek / 2010-09-03 17:59:23   

Seriously no one answers??? Some has had to do this before...

Vaska A / 2010-09-03 19:05:24   

Searched the forum already? Or, go to the site of the creator of that script for the full rundown on how all the parts work. We don't know the answer to everything around here...and we didn't create the core script that makes that format possible. Just do a Google on 'Thickbox' and you'll find the place to be looking for deeper info...

ashtonpeek / 2010-09-05 20:19:01   

YES I've searched the form for it the only two revelant posts were included... and who wrote thickbox the script came with indexhibit... its not on this site.. and yeah I can work a google search too... what I can't do is read javascript... can you?? what's wrong with that code???

Despiracy / 2010-10-05 02:31:13   

Think you need to keep this line intact (line 145 i think):

  1. $("body").append("<div id='TB_window'></div>");

otherwise it doesn't work for me.

7 / 2010-10-05 12:08:11   

sheesh

abarem / 2011-01-01 13:53:01   

does anyone have an answer for this? ashtonpeek, i noticed your site now works.... please tell me how you did it!
thanks!
alisa

baamkelly / 2011-02-09 18:52:13   
  1. On line 138, replace id='TB_ImageOff' with id='TB_next'.
mksh / 2011-02-11 09:32:21   

^^
That works

purincess / 2011-02-12 15:13:07   

To get click-to-advance feature (without 'Next' button being broken), look for jquery.thickbox.js under /ndxz-studio/site/js. I used Dreamweaver to open the .js file.

1. Around line 157 of thickbox.js you'll see:
$("#TB_next").click(goNext);

2. Right underneath that, put
$("#TB_nextPIC").click(goNext);
(essentially creating a separate jquery call)

It will look like this:
if ( next.html ) {        
                $("#TB_next").click(goNext);
                $("#TB_nextPIC").click(goNext);
            }

3. Then back at line 138, replace id='TB_ImageOff' with id='TB_nextPIC'

4. Save the jquery.thickbox.js and put the file back where it was, replacing the old file.

Voila!
Example: http://purincess.com/experiments/tap-tap-animation/

Referenced from http://wordpress.org/support/topic/plugin-nextgen-gallery-thickbox-click-image-for-next-rather-than-close

This thread has been closed, thank you.