How to Set Thumbnails in prettyPhoto Image Viewer

Question

My prettyPhoto markup (for the thumbnails) looks something like this.

<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="DSC01226.JPG" href="../GetFile.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=e82511f0-f21b-02fd-71af-7937ad2b2f17) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="DSC01231.JPG" href="../GetFile.aspx?file=e82511f0-f21b-02fd-71af-7937ad2b2f17">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=5ada5be3-774f-bda6-b4ff-b88083ba651f) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="IMAG0159.jpg" href="../GetFile.aspx?file=5ada5be3-774f-bda6-b4ff-b88083ba651f">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=14331233-9c39-4b39-8cdc-2e44de4f3457) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="IMAG0160.jpg" href="../GetFile.aspx?file=14331233-9c39-4b39-8cdc-2e44de4f3457">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=04f4dc6c-20da-0786-c584-a7fb359ad38f) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="sadfasdfs" href="../GetFile.aspx?file=04f4dc6c-20da-0786-c584-a7fb359ad38f">
        <span>&nbsp;</span>
    </a>
</div>
<div class="PrettyPhotoContainer" style="background:url(../GetThumbnail.aspx?file=63a15fc6-a920-2add-d9f0-06e213eba0bc) no-repeat center center;">
    <a class="PrettyPhotoContainer" rel="prettyPhoto[gallery1]" title="lkjlkjlkjlkj" href="../GetFile.aspx?file=63a15fc6-a920-2add-d9f0-06e213eba0bc">
        <span>&nbsp;</span>
    </a>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            theme: 'light_square',
            autoplay_slideshow: true,
            slideshow: 5000
        });
    });
</script>

And my CSS:

div.PrettyPhotoContainer {
    display: inline-block;
    width: 128px;
    height: 96px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;

    border: 1px solid silver;
    padding: 0;
    margin: 4px;
}
a.PrettyPhotoContainer
{
    display: block;
    width: 100%;
    height: 100%;
}

I ended up specifying the thumbnail image as the background image because that is the only straight forward way I can center the image within a <div> tag in the way that I needed.

Everything works just fine except that, when I click an image, and the larger photo viewer pops up, the thumbnails across the bottom of the pop up box are not set. (In my case, they are all black boxes with arrows to the right but inspecting these images I see that the src attribute simply isn't set.)

Does anyone know where prettyPhoto gets the images for the thumbnails displayed at the bottom of the pop up? It seems like it might get it from the src attribute of the original thumbnail somehow. If so, is there any way to get it to work with my markup?

Answer 1

Turns out that the thumbnails in the overly gallery are taken from the full-sized images, and for some reason it requires that the image URLs have a valid image file extension.

As you can see, mine don't. If I use a name like ../GetFile.aspx?file=771e72aa-2b0a-ea59-75ff-cc769801ce53&.jpg, the thumbnails appear as expected.