SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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:...gAnimation.gif 500 (Internal Server Error)

    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:
    While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.




    I use Shadowbox and Fancybox every now and then and it seems Colorbox is quite flexible too.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I use Slimbox, which works really well too.

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sculley View Post
    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?
    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.)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yesh that one is working

    The images are giving 500 errors as well at the moment (The scripts were as well, but that seems to be fixed now)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Argh....looking at my css and lightbox.js files in the lightbox folder.....are the paths to the images correct?

  10. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I think the script thinks they should be in the lightbox parent folder?

    These are the errors I currently see:

    GET http://sineathconstruction.com/portf...ult_button.jpg 500 (Internal Server Error)

    GET http://sineathconstruction.com/portf...es/loading.gif 500 (Internal Server Error)

    GET http://sineathconstruction.com/portf...closelabel.gif 500 (Internal Server Error)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  13. #13
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    No probs

    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 Anything Slider. Of course there are many many more to choose from
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    do you have a simple and easy to use jquery SCROLLER plugin that you like?
    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 jQuery Cycle.

  17. #17
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. Thanks Ralph!

  18. #18
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  19. #19
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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

    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:

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

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

    Code css:
    #prevLink { background: url([url]http://sineathconstruction.com/lightbox2.05/images/prevlabel.gif[/url]) left 15% no-repeat; }
    #nextLink { background: url([url]http://sineathconstruction.com/lightbox2.05/images/nextlabel.gif[/url]) 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)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  20. #20
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hoping someone is still reading this thread. Maybe I should start a new post?

    Wondering if there is a way to create a slideshow using slimbox once the image pops? For example, I added the slimbox to this page sineathconstruction.com/portfolio/ index.html -- all the images are in one group so there are 19 or so images to click Prev and Next to go through. Can I also make it so that it automatically scrolls through with slideshow w/o having to click Prev and Next (but want to keep Prev and Next as an option too)?

    If not, is there a similar query plugin that looks similarly to slimbox and does this?

    You guys rock. Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •