javascript - prettyphoto not working - Stack Overflow

admin管理员组

文章数量:1355628

I can't get it working anyone out there can help

I use this in the head

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

I use this for photos

rel="prettyPhoto[pp_gal]"><

I use this before the closing body tag

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal', /* fast/slow/normal */
            padding: 40, /* padding for each side of the picture */
            opacity: 0.35, /* Value betwee 0 and 1 */
            showTitle: true, /* true/false */
            allowresize: true, /* true/false */
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
        });
    });
</script>

I linked the prettphoto CSS to my document What do I do with the jquery.js and the jquery-1.3.2.min.js folders?

I can't get it working anyone out there can help

I use this in the head

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

I use this for photos

rel="prettyPhoto[pp_gal]"><

I use this before the closing body tag

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal', /* fast/slow/normal */
            padding: 40, /* padding for each side of the picture */
            opacity: 0.35, /* Value betwee 0 and 1 */
            showTitle: true, /* true/false */
            allowresize: true, /* true/false */
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
        });
    });
</script>

I linked the prettphoto CSS to my document What do I do with the jquery.js and the jquery-1.3.2.min.js folders?

• javascript
• jquery
• css

Share Improve this question Follow edited Jan 10, 2010 at 19:33 Tatu Ulmanen 125k3434 gold badges189189 silver badges185185 bronze badges asked Jan 10, 2010 at 19:29 waltwalt 6111 gold badge11 silver badge33 bronze badges 11

• You might want to format the code you posted in your question. – Jimmy Shelter Commented Jan 10, 2010 at 19:31
• Thanks for cleaning it up Tatu, you beat me to it. :) – Sasha Chedygov Commented Jan 10, 2010 at 19:35
• 1 What happens if you change rel="prettyPhoto[pp_gal]" to rel="prettyPhoto"? – Jimmy Shelter Commented Jan 10, 2010 at 19:35
• getting rid of the brackets did not work – walt Commented Jan 10, 2010 at 20:05
• Is anything happening at all? Can you describe the error? – Justin Johnson Commented Jan 10, 2010 at 20:38

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 4

1. Make sure the js and css folders are positioned relative to your current page. For example, if you are working on http://localhost/photogallery/index.html, make sure the 3 folders included with your prettyPhoto download get extracted to http://localhost/photogallery/, and not the root of your server.
2. Make sure you have the prettyPhoto "images" folder. It includes a number of themes and other resources necessary for prettyPhoto to look right.
3. A conflicting library or version of jQuery may be stopping prettyPhoto from loading. Try running prettyPhoto on a blank page with just the necessary scripts and CSS included, and a couple image links with rel="prettyPhoto[pp_gal]". If this works, and when you bring the code back in to your page it doesn't work, you can know that something is conflicting on the page with prettyPhoto or jQuery.
4. Check for any errors on the page. Internet Explorer has the Developer Tools. Firefox has Firebug. Chrome has Developer tools. Search online for how to use the one particular to your favorite browser.

Like Dawson said in his number 4 answer, check to make sure you don't have any javascript errors on your page that would be stopping prettyPhoto from loading correctly.

I was banging my head against my keyboard for 2 hours b/c it wasn't working for me. In Firefox, I used Tools > Web Developer > Error Console to see that I had a JavaScript code from another widget I'm using throwing an error. I mented out that line and it worked correctly.

Check check, and check again.

本文标签： javascriptprettyphoto not workingStack Overflow