I am using prettyPhoto and when click on a image, it show loading gif and image is not loading. I found this error on browser console.
Uncaught TypeError: Cannot read property 'match' of undefined
at h (jquery.prettyPhoto.js:7)
at HTMLDivElement.<anonymous> (jquery.prettyPhoto.js:7)
at HTMLDivElement.r.complete (jquery-1.10.2.min.js:5)
at c (jquery-1.10.2.min.js:3)
at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:3)
at l (jquery-1.10.2.min.js:5)
at x.fx.tick (jquery-1.10.2.min.js:5)
How could I solve this?
UPDATE
I figured out the issue. The image is inside an anchor tag. If I use $("div.news-text-detail a").prettyPhoto();
image is loading. This will apply effect for all anchor tags. But I need to apply this to ONLY image inside anchor tag.
$(document).ready(function() {
$("div.news-text-detail img").prettyPhoto();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css" rel="stylesheet"/>
<div class="news-text-detail span12">
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.imgur.com/mV7ezeo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://i.imgur.com/mV7ezeo.jpg" data-original-height="384" data-original-width="800" height="305" width="640">
</a>
</div>
</div>
</div>
Not sure i really understand your problem but you need to prettyPhoto the a links only if they contains an img right ?
So i guess you can do it like this :
jQuery('div.news-text-detail img).closest('a').prettyPhoto();
First you look at the img, then you get his parent a and prettyphoto on the a.