PrettyPhoto Not Working According to Documentation

StackOverflow https://stackoverflow.com/questions/16114236

  •  11-04-2022
  •  | 
  •  

Question

I followed all of the documentation on their site, but I can't get this to work.

I copied the script load into my head, activated the script before the body close, and put the prettyPhoto hook on my link.

But when I click on the link, nothing animates, it just opens the full size image the link is pointed to on it's own page.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>




<body>



<a href="superlow.jpg" rel="prettyPhoto"> sldjflkdjsf </a>


<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>


</body>
</html>
Was it helpful?

Solution

It seems to me, either your scripts are not found or it's perhaps an encoding issue.

Are you sure that both your scripts are loaded? Because your code works for me here on Safari. NOTE: Please always refer to your browser type and version for such issues.

And you have a document encoding mismatch between your document (set as charset=ISO-8859-1) and your scripts and css (set a utf-8) which could cause problems. Make them both utf-8.

As long both of these things are sound, your example should work.

OTHER TIPS

The rel property is supported in all major browsers.

Note: The value "search" is not supported in Opera or Safari.

ref:http://www.w3schools.com/jsref/prop_link_rel.asp

if you count element with 'rel' you will found zero (0).

$("a[rel^='prettyPhoto']").length will return zero

thats the problem i think

just use class instead of rel.. it will work :)

Just try with this

replace href of your anchor tag with xhref

$(document).ready(function() {
    $('a[xhref]').each(function() {
       $(this).attr('href', $(this).attr('xhref'));
    });
    $("a[rel^='prettyPhoto']").prettyPhoto();
});

Even if it is show any kind of problem replace 

$(document).ready(function(){       with 

$(window).bind('load', function(){

will solve the issue

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("a[data-rel='prettyPhoto']").prettyPhoto();            
    });
</script>

This works for me just added

data-rel instead of rel

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top