Question

I am using PrettyPhoto 3.1.4 from http://www.no-margin-for-errors.com

I am using a content handler in ASP.NET MVC3 to load images from a database. Pretty Photo is not loading the images with the API. How do I get it to work with the content handler?

Here is an image that should popup a gallery of images:

<a href='' onclick="$.prettyPhoto.open(api_images0,api_titles0,api_descriptions0);" title='UFC123'>
    <img style="max-height: 160px;max-width: 260px;" id='Img31' alt='UFC123' title='UFC123' src='/img.ashx?mediaId=31' style='padding:10px' />
</a>

Here is the script I am using:

<script type="text/javascript" charset="utf-8">
    var api_images0 = ['/img.ashx?mediaId=33'];
    var api_titles0 = ['Gina'];
    var api_descriptions0 = ['Gina Description'];
</script>

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

Answer 1

There were no javascript errors. I figured it out. The problem was that I needed the pound sign instead of the empty string for the href tag.

<a href='#' onclick="$.prettyPhoto.open(api_images0,api_titles0,api_descriptions0);" title='UFC123'>
    <img style="max-height: 160px;max-width: 260px;" id='Img31' alt='UFC123' title='UFC123' src='/img.ashx?mediaId=31' style='padding:10px' />
</a>