Grow your CSS skills. Land your dream job.

Javascript Modal Box (prettyPhoto.js) not working

  • # July 24, 2009 at 6:37 am

    I used a image gallery engine called prettyPhoto.js to a wordpress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can’t for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the `rel="prettyphoto"` tags embedded in all the image anchor links.

    I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the `<a>` link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.

    The page in question is <a href="http://instant-wine-cellar.co.uk/products/microcellar/"&gt;
    http://instant-wine-cellar.co.uk/products/microcellar</a> and try clicking on any of the microcellar pictures.

    Another is the "Watch Microcellar Video" link on the front page.

    For those who do not know. This image gallery script, same with a lot of others, works by:
    1. putting the prettyPhoto javascript file in your server.
    2. putting the prettyPhoto css file in your server.
    3. referencing the path to the above files into the head (or footer) of your html file.
    4. triggering the process by putting some bespoke script into your HTML file to find the `<a>` tags in your file with a certain `rel` attribute and opening the link it references, into the prettyPhoto modal box.

    # July 24, 2009 at 8:12 am

    You need to load the jQuery library before any other jQuery scripts.

    # July 24, 2009 at 8:52 am

    Wow.. that true.. I actually moved the Jquery library around a bit and it still didnt work. I must have forgotten to save it from Coda. Once again, thank you Apostrophe, you’re a huge benefit to this forum.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".