Thickbox pop ups won't work

Wondering if one of you can help with Thickbox (jquery). I followed the directions:
downloaded 5 files and put them in a folder: portfolio/thickbox.
downloaded 2 images in main images folder.
Added three elements into header.
Changed paths to images on both js and css files

But…pop ups won’t work. I’ve added thickbox to the first 2 images on top row. Here’s the page: sineathconstruction.com/portfolio/index.html.

The instructions said to download the jquery library which is named “jquery-latest.js” but the code they said to put in the header is: <script type=“text/javascript” src=“thickbox/jquery.js”>.

After I edited the element in the header to “jquery-latest.js” it now it acts like it wants to work but isn’t working.

What am I missing? Thank you so much for your help!

One of the errors I’m seeing on your site is that the loading image doesn’t get referenced properly

It’s trying to do:

GET http://sineathconstruction.com/http://sineathconstruction.com/portfolio/images/loadingAnimation.gif[COLOR=#FF0000][FONT=Consolas] 500 (Internal Server Error)
[/FONT][/COLOR]
It looks as though it’s referenced correctly in the Thickbox file, do you maybe have some odd .htaccess thing for image linking set up?

Also, as an aside:

From the Thickbox page:

[INDENT]While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
[/INDENT]

:wink:

I use Shadowbox and Fancybox every now and then and it seems Colorbox is quite flexible too.

I use Slimbox, which works really well too.

Hmmmm…that’s weird. No, I don’t have anything in the .htaccess folder about image linking. Where did you get that link that’s not working?

Maybe I’ll try one you or Ralph mentioned.

I had a look in the Developer Tools console in Chrome after clicking on the first image. (If you have Firefox with Firebug it has a console as well.)

Oh, thanks. Yeah, couldn’t live w/o Firebug.

So, I just scratched thickbox and tried lightbox. What am I doing wrong? Still not working. I don’t get how the code knows to grab the larger image. It says to use this code: <a href=“images/image-1.jpg” rel=“lightbox” title=“my caption”>image #1</a>. I’ve tried it with that code and the thickbox code and doesn’t work.

Wait…I think it is working…? Just the previous and next images and loading.gif and closelabel.gif aren’t showing but the image is popping up! Yea!

Yesh that one is working :slight_smile:

The images are giving 500 errors as well at the moment (The scripts were as well, but that seems to be fixed now)

Argh…looking at my css and lightbox.js files in the lightbox folder…are the paths to the images correct?

I think the script thinks they should be in the lightbox parent folder?

These are the errors I currently see:

GET http://sineathconstruction.com/portfolio/img/consult_button.jpg 500 (Internal Server Error)

GET http://sineathconstruction.com/portfolio/images/loading.gif 500 (Internal Server Error)

GET http://sineathconstruction.com/portfolio/images/closelabel.gif 500 (Internal Server Error)

Okay, I just added the absolute link to the files and they’re working now. Except the prelabel.gif won’t show for some reason.

Thanks again for your help!!! Let me know if you have an idea about why previous isn’t showing but for now, looks good. And again, thanks so much for your help!

No probs :slight_smile:

Seems maybe some files were in the wrong location, but then again perhaps there was something else not working correctly. It was a pretty old script after all.

Glad you got everything working :slight_smile:

Hey Ralph, do you have a simple and easy to use jquery SCROLLER plugin that you like? There are a lot out there just wondering if you have one you like sine the lightbox worked so well.

If you mean a carousel / image slider, I often use jCarouselLite as it offers a very small plugin which does pretty much everything you’d need.

Other popular ones include Nivo Slider and [URL=“http://css-tricks.com/anythingslider-jquery-plugin/”]Anything Slider. Of course there are [URL=“http://www.tripwiremagazine.com/2011/06/jquery-carousel.html”]many [URL=“http://www.pixelzdesign.com/blog_view.php?id=55”]many [URL=“http://psdcollector.blogspot.com/2010/02/150-awesome-jquery-image-slider_07.html”]more to choose from :slight_smile:

My two favorites are AnythingSlider (to which John linked) and also bxSlider. Or for simple image transitions, I don’t think you can go past [URL=“http://jquery.malsup.com/cycle/”]jQuery Cycle.

Awesome. Thanks Ralph!

So weird…sometimes the “next” shows on pop up and sometimes not in all browsers. If you mouse over them, they will appear. Strange, “next” was showing before and then it stopped and I haven’t changed a thing. Any ideas how to get both graphics (next and prev) to always show in all browsers w/o having to mouse over them?

I think what you’re talking about is by design. The reason the images don’t show until you hover over them is so they don’t obscure any part of the image :slight_smile:

The prev or next button will always be hidden if there is no previous or next image to go to. For example, on the first image, you’ll never see the prev button.

If you always want them to show when they are available, you can go in to your lightbox.css file and change the following two lines:


#prevLink:hover, #prevLink:visited:hover { background: url(http://sineathconstruction.com/lightbox2.05/images/prevlabel.gif) left 15% no-repeat; }
#nextLink, #nextLink:visited:hover { background: url(http://sineathconstruction.com/lightbox2.05/images/nextlabel.gif) right 15% no-repeat; }

If you remove the :hover pseudo classes the image should always show.


#prevLink { background: url(http://sineathconstruction.com/lightbox2.05/images/prevlabel.gif) left 15% no-repeat; }
#nextLink { background: url(http://sineathconstruction.com/lightbox2.05/images/nextlabel.gif) right 15% no-repeat; }

Was there a specific browser you were having issues with? (Maybe implement the above change and see if there is still a problem)

Woops…thanks. Thought I posted! I worked on the CSS and meant to re-post. I think for now, I’ll keep it as is.