Use Thickbox with jQuery >1.3

ABOUTQ / 2010-02-13 13:05:11   

Hi there,

I have just found a way to use Thickbox with jQuery 1.3.2 (or 1.4.1)

You have to edit jquery.thickbox.js like this :

At line 76, found :

  1. var imageGroup = $("a[@rel="+rel+"]").get();

And just remove the "@", you should have :

  1. var imageGroup = $("a[rel="+rel+"]").get();

Update the file on your ftp server, and it works ;)

It's useful for those who use hacks like
Create full-browser background img
Random full background the lost php

lemathieu A / 2010-02-13 13:38:14   

Great one.
Merci bien ;)

puppiepoppy / 2010-02-14 13:13:27   

I just wonder if anyone tried out this 'improvement'? If it's indeed works, then shouldn't someone make that a standard change in the new Horizontal Format?

Vaska A / 2010-02-14 13:15:29   

You mean horizontal template set? The horizontal exhibition format doesn't even use Jquery.

crazylynx / 2010-03-08 08:50:45   

AWESOME! Thanks, this is exactly what I was looking for. After installing the collumner theme my whole site went to shit because it was mostly using thickbox exhibit formats. This fixes it perfectly and easily.

rasmusflindt / 2010-03-20 18:56:14   

Hi,
After making this change to my website (http://flindtpedersen.com) it can no longer display the large photos in Internet Explorer. It can only display the thumbnails. It works well in Firefox, Camino, Safari and Opera.

Does any of you know how to fix this?

Kind regards
Rasmus

jesper / 2010-03-21 15:03:38   

Hi Rasmus.

I'm not sure of how to fix it exactly, without a major rewrite.

You can however replace your jquery.thickbox.js and jquery.thickbox.css with my completely rewritten version of Thickbox, found here

That should work in ie7/ie8, and looks almost identical to Thickbox, with a few variations.

Regards,

Jesper.

rasmusflindt / 2010-03-22 11:35:45   

Hi Jesper,

Thanks a lot. I'll give it a try and see if I can make it work.

Rasmus

Klara / 2010-03-30 17:44:51   

@Jesper: I was just about to add a video-clip that I wanted to show in Thickbox and I went to your page to find the code-example. But I can't manage to find it, when I click on Examples nothing happens.. How can I add the video that way?

Kind regards,
Klara

jesper / 2010-03-30 18:05:58   

Sorry Klara, it is fixed now.

Klara / 2010-03-30 21:24:28   

@Jesper: Great it works! Sorry to have to ask, but how am I suppose to put in the code?
I think the class-part is not working for me, somehow its not opening in thickbox but it takes over the whole screen?

http://klaranilsson.com/happy-object/

Is it also possible to make the wobblebox close by just clicking anywhere in the image?

Thanks for the great script!!

jesper / 2010-03-31 09:02:23   

@Klara: Looks like your code is a bit confused. You have two links, one with the proper class, but no href and one wit the right href but no class, as you can see below. The wobblebox should close by clicking outside the image, just like the thickbox does.

  1. <a class="thickbox utoob"><br>
  2. </a>

<a href="http://www.youtube.com/v/pWxV30eZliQ&hl=en_US&fs=1&" width="480" height="385"><br>
<img src="/files/happy.jpg" width="*" height="200"></a>

jesper / 2010-03-31 09:04:33   

hmm, everything should be in code format above, not just the first two lines. Looks like the <code> wrapper doesn't work spanning multiple lines.

Klara / 2010-03-31 09:22:59   

@Jesper: Thanks a lot, I understood what was wrong! I didn't change the exhibition-format to thickbox! It was too late last night.. now it works like a charm!

arsondpi / 2010-03-31 09:27:26   

(@ jesper - the code tag does not like empty lines....)

Klara / 2010-03-31 10:00:48   

I got an additional question, I would like the still-image to lie before the video and also work with thickbox, is that possibile?

www.klaranilsson.com/happy-object/

I tried out some coding in the text-area but its not completely there yet..

Klara / 2010-04-07 08:26:29   

Anyone who knows how I can insert an img-tag in the text-field and make it open with thickbox? I cant get the image on this page work, only the video?

www.klaranilsson.com/happy-object/

jesper / 2010-04-07 11:33:22   

Hello again.

Right now you have this code:

  1. <a class="thickbox" src="/files/gimgs/happy.jpg" width="800" height="*"><img src="/files/gimgs/happy.jpg" width="370" height="*"></a>

It should be this:

  1. <a class="thickbox" href="/files/gimgs/happy.jpg" ><img src="/files/gimgs/happy.jpg" width="370" height="*"></a>

Give that a try.

Regards Jesper.

Klara / 2010-04-07 12:11:37   

Works perfect! Thanks!

Kind regards,
Klara

rafguevara / 2010-04-28 13:25:17   

This is great! worked for centered theme I was using. Now I do have one issue. Spacing seems to be random between images when using thickbox

Example can be seen on my site
ARGuevara

Klara / 2010-04-30 22:19:18   

Hey again!
I've been adding the code as;
< a class="thickbox" href="/files/gimgs/happy.jpg" >< img src="/files/gimgs/happy.jpg" width="370" height="*">

But I now have the problem that nothing shows up in IE?
Is there something that I need to change in order to make it work?

the website is;
http://www.kristoffernilsson.se

Klara / 2010-05-03 18:20:13   

Seems to me its something with the format of the size, could that be?

Klara / 2010-05-03 20:24:33   

I also have a problem with the last two rows in my div here..
If someone could give me a hint why these arent wrapped I would stop crying..

http://kristoffernilsson.se/nya-serier/

Kind regards,
Klara

Alexxxy / 2010-05-13 11:21:34   

Hello.
I have a problem too with the Thickbox.
I replaced my .js by the jesper's file, but it doesnt' work at all.
Before, I had the loading symbol of the Thickbox, and now i have the image which open without any Next or Prev...
You can check it on http://www.alexygoguet.fr.nf/dessins/blowjobs/. It's not a sex website...
Sorry for my english, it's a french english you guessed it !

jkm / 2010-05-13 13:00:21   

Hello Alexxxy.

I can see that you have multiple jquery files attached, including three main jquery libraries and two jquery.thickbox.js files. Chances are they are conflicting with each other.

Regards,

Jesper.:

  1. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery.js'></script>
  2. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/cookie.js'></script>
  3. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery.min.js'></script>
  4. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/colors.js'></script>
  5. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery-scroll.js'></script>
  6. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery-fx.js'></script>
  7. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/cufon-yui.js'></script>
  8. <script type="text/javascript" src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/Utd_500.js'></script>
  9. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/expandingMenus.js'></script>
  10. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery.thickbox.js'></script>
  11. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery-1.4.2.min.js'></script>
  12. <script type='text/javascript' src='http://www.alexygoguet.fr.nf/ndxz-studio/site/js/jquery.thickbox.js'></script>

rasmusflindt / 2010-05-23 09:23:06   

I have tried to impliment Jesper's files on my site, but for some reason the photo is displayed underneath the thumbnails. I have looked at the code for a long time, but I can't locate my error.
Can somebody please guide me in the right direction?

flindtpedersen.com

rasmusflindt / 2010-05-23 10:07:46   

Never mind you guys. I think I got it now. But can any of you try my page out in Internet Explorer to see if the image display is working properly? That would make me a happy camper.

ntlk / 2010-05-23 12:38:48   

I don't have IE, but always use IE renderer to make sure it's all ok

ntlk / 2010-05-23 12:40:39   

Sent last post too early, does anyone know a way to make sure scripts work properly in IE when you can't get hold of IE? IE renderer is lovely, but it's only a screenshot.

verena / 2010-06-24 09:30:29   

Hi there, sorry, ntlk, I can't answer your question, I got one myself:
I just tried to install the full background plugin (not working yet) and the instructions say, that thickbox won't work with this plugin, so I changed my code like ABOUTQ told in the first post here. It didn't work so I installed wobblebox from this Webpage as jesper told earlier in this post. Also this isn't working. Does anyone have an idea where to look for the mistake? I'm quite at a loss now...
Thanx.
V.
Webpage
the thickbox I wanted to use here:
thickbox

verena / 2010-06-24 15:11:35   

Hi again,
I redid everything, took the files from jespers website. Still it's not working. Do I need something elso to install, so I can select the wobblebox in the exhibition format?
Can anyone help, please?
Thanks, V.

rasmusflindt / 2010-06-24 15:39:26   

@ Verena
Can you post a link to your website?

verena / 2010-06-24 17:07:25   

Hi rasmusflindt,
sorry, the link was in the post above, now again:
Webpage
and this is the section where I wanted to use the wobblebox:here
Thanks for your effort, maybe it's only a small thing I missed? I guess I need a plugin so I can select the wobblebox in the exhibition format?
V.

pietrino / 2010-06-30 14:05:13   

Hello everyone! i love indexhibit!
I am stuck on this (been for a few days now!) - not capable of understanding what I am doing wrong:

http://www.gettingmarrieditaly.com/index.php?/albums/peek-in-a-classic-album/

In what folder does the file jquery.thickbox.css go?

and the file jquery.thickbox.js? Am I putting these in the wrong folders?

Best pietro

mariapaz / 2010-09-23 14:52:34   

Hi ABOUTQ and all,

I did the edit at jquery.thickbox.js, it works fine in Safari but in Firefox 3.5.13 for MAC doesn't. Same result replacing file with jesper's re-write. The menu and photos are no longer clickable :(

Here

Cheers, Marie

jkm / 2010-09-23 17:13:38   

Hallo

You seem to have a div (id="wrapper") that is set to position absolute, and with a z-index of -3 which effectively renders your images non-clickable.

Change position to static in your style.css line 57.

AboutQ's solution may not work in IE 8 or 7 as far as I remember, but see for yourself, I could be mistaken.

Regards

Jesper.

mariapaz / 2010-09-23 18:17:52   

Many Thanks jkm, somehow I had twice written the id "wrapper" function :)
And after corrected the position, now it is working.
Marie

deadchildstar / 2010-10-18 11:56:14   

Just when I'm ready to completely give up on a problem, I do a final search on the forums - and find the answer. Thank you Jesper (and Onionrush in this thread here) - and Vaska!) for all your great answers.

I had the problem with wobblebox/thickbox not working - going underneath all the elements - after finally figuing out the random full background on the main page problem. The answer was easy - z-index, which in wobblebox css, were set to 0/1/2 - I changed them all to 10/11/12 (or anything higher than, it seems, 3).

Thanks to everyone!

herrjaapmans / 2010-11-05 14:17:32   

Hey,

So all the thickbox'es work when i use them in indexhibit. But as soon as i try to write them in a webpage myself, it turn really strange.

hey
If you click on the second image, "down stairs, up stairs" from 16-10-2010. That one I tried to "thickbox".

In this site, i tried to implement the thickbox thing.
As far as I know the jquery.js and the jquery.thickbox.js are in the right folder. And I refer to the thickbox style in my index.php.

I don't have the thickbox.css anywhere, since I don't know where to put it. Anyone any idea?

Thanks in advance.

J

herrjaapmans / 2010-11-05 14:18:08   

Hey,

So all the thickbox'es work when i use them in indexhibit. But as soon as i try to write them in a webpage myself, it turn really strange.

hey
If you click on the second image, "down stairs, up stairs" from 16-10-2010. That one I tried to "thickbox".

In this site, i tried to implement the thickbox thing.
As far as I know the jquery.js and the jquery.thickbox.js are in the right folder. And I refer to the thickbox style in my index.php.

I don't have the thickbox.css anywhere, since I don't know where to put it. Anyone any idea?

Thanks in advance.

J

herrjaapmans / 2010-11-10 12:43:07   

Ai ai ai,

So now I used all the Jesper stuff from above.
But now nothing seems to work anymore.

Can someone please help me?

Webpage

Greets from amsterdam

J

jkm / 2010-11-10 13:50:36   

Hello.

Seems like you have two jquery.thickbox.js files included.

Regards,

Jesper.

herrjaapmans / 2010-11-10 14:02:54   

Hey Jesper,

Thanks for your time.

I can't seem to find where I put the two jquery.thickbox.js files. In the ndxz-studio/site/js folder is only one. I had some old ones there, but renamed. But removed them just recently.

Greets

herrjaapmans / 2010-11-10 16:28:06   

Hey,

Ok, so now I fied the double re-directing to the jquery.thickbox.js in the source file.
I added this:

< script type="text/javascript" src="path-to-file/thickbox.js">

In my index.php, but removed it now. So now the Thickbox works if I choose it from the indexhibit interface. But not if I write in in HTML in the site inself.

See:

http://www.sik-bits.com/index.php?/hey/
Webpage

The second picture, with date 16-10-2010 on it is coded as a thickbox pop-up, but won't work.

Anyone?

Greets J.

herrjaapmans / 2010-11-10 20:24:58   

OK,

So, I hadn't changed the indexhibit format to thickbox... Am just become father and sometimes my head is not there...

thanks for all

j

shutterclank / 2011-09-09 18:35:03   

call me stupid. but i tried to change my thickbox css and js to jesper's and it stopped working. went from working fine to unclickables. right now, the regular thickbox works here.

i literally copied and pasted the code from jesper's fully into the css and js on the server, but it didnt work.

am i doing it wrong?

shutterclank / 2011-09-09 18:35:13   

call me stupid. but i tried to change my thickbox css and js to jesper's and it stopped working. went from working fine to unclickables. right now, the regular thickbox works here.

i literally copied and pasted the code from jesper's fully into the css and js on the server, but it didnt work.

am i doing it wrong?

shutterclank / 2011-09-09 18:35:44   

call me stupid. but i tried to change my thickbox css and js to jesper's and it stopped working. went from working fine to unclickables. right now, the regular thickbox works here.

i literally copied and pasted the code from jesper's fully into the css and js on the server, but it didnt work.

am i doing it wrong?

shutterclank / 2011-09-09 18:37:09   

sorry for the triple post. :(

This thread has been closed, thank you.