I have found the issue with thickbox and any other ajax controlled functions. Basically what happens is if using ajax paging or the flag module and you click those links. The 'Drupal.behaviors' is re-intialized which calls tb_init(). This is a good thing as it should so the new content will get the appropriate click handlers to open in thickbox...etc. Well that being said, the tb_init() function needs some checking through it. As I said before when the tb_init() function is re-initialized, then that appends another div id (TB_load) and the rest to the body of the page again. So now when you open thickbox, it duplicates and scrolls to the bottom. To duplicate this simply go to a views ajax paging, or a place where you can flag a page then press on a thickbox link in that same page.

The work around that I did was this:

function tb_init(domChunk) {
  $(domChunk).click(function() {
    var t = this.title || this.name || null;
    var a = this.href || this.alt;
    var g = this.rel || false;
    tb_remove(); //added to remove the div elements to prevent duplication
    tb_show(t,a,g);
    this.blur();
    return false;
  });
}

Note the tb_remove() function being called before the tb_show... The proper way to do this is to do the checking in the tb_show() function and only append the id's to the body IF they are not present.

-Later

CommentFileSizeAuthor
#1 thickbox_behavior.patch1.68 KBdrewish

Comments

drewish’s picture

drewish commented
Title: Thickbox / Ajax Views / Flag Ajax...etc » Thickbox should properly use Drupal.behaviors
Status: Active » Needs review
StatusFileSize
new thickbox_behavior.patch1.68 KB

i think a better approach is to properly use Drupal.behaviors

drewish’s picture

drewish commented

The D6 upgrade notes have some good reference material on behaviours: http://drupal.org/node/114774#javascript-behaviors

frjo’s picture

frjo commented
Assigned: Unassigned » frjo

Committed to 6-dev for testing. When I run this the Thickbox works but the preloading of the next image does not unfortunately.

If I remove the ":not(.initThickbox-processed)').addClass('initThickbox-processed')" part preloading works again.

Tips for a nice and clean solution to this?

drewish’s picture

drewish commented

i'm not sure what you mean by part preloading... how would i test that? without doing that you end re-processing links and get the double divs that iLLin was talking about.

frjo’s picture

frjo commented

Thickbox can put two or more images in a gallery and you can navigate between them with the prev/next links in the thickbox.

By preloading the next image it will appear immediately when the user click "next". No waiting for the image to load and no loading_animation.gif.

The preloading code is on line 98-111 in thickbox.js v 1.8.2.9.

P.S. Line 21 "imgLoader = new Image(); // preload image" has nothing to do with this, I believe it can be deleted. A leftover from the original thickbox.js that I have missed to remove.

drewish’s picture

drewish commented

i don't really have time to dig into it right now but i'm guessing the code put into needs to be smarter about checking for processesed and non-processed elements.

an.droid’s picture

an.droid commented

Here is how I solved this problem (it's based on code from drewish):

// Initialize Thickbox.
Drupal.behaviors.initThickbox = function (context) {
  var domChunk = $('a, area, input', context).filter('.thickbox:not(.initThickbox-processed)');
  $(domChunk).addClass('initThickbox-processed'); 
  tb_init(domChunk); // pass where to apply thickbox
  imgLoader = new Image(); // preload image
};

But in this case I still need to call Drupal.behaviors.initThickbox(); in my jQuery module.
And since I'm using clones of the currently proccessed elements (carousel plugin) I need to manually remove class .initThickbox-processed from links before calling Drupal.behaviors.

frjo’s picture

frjo commented
Status: Needs review » Fixed

Committed to 6-dev, found the problem with preloading.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.