Pretty Photo

PrettyPhoto is a jQuery lightBox clone. It is versitile and adds a great look and feel to your project. Unfortunately, documentation for PrettyPhoto is not....well documented :) , leading sometimes to loss of time for a web developer that uses it for the first time. A problem I encountered using PrettyPhoto was that inline content worked fine the events of the buttons where not fired!!! I lost time implementing a pop up only to figure out that I had to develop it in a different way, using the external sites method of implementation. The way i did it was the following...

1.Created a web user control that would act as my pop up

2.Created an aspx page in which I added my web user control

3.In the page I wanted my pop up to appear I added

<a id="pretty-photo-opener" href="/Controls/newsLetterPopUp.aspx?iframe=true&width=620&height=470" rel="prettyPhoto"></a>

that will act as the element that will open the pop up

4.In the document ready fuction I implemented the following

<script type="text/javascript">
    $(document).ready(function() {
            $("a[rel^='prettyPhoto']").prettyPhoto({ theme: '', callback: function() { } });
            $('#pretty-photo-opener').trigger('click');
        }
    });
</script>

5.Finally, in the my web user control I implemented the following code to close the PrettyPhoto pop up, since I used a custom close button and not the one of the PrettyPhoto

    <script type="text/javascript">
        function closeBox() {
            window.parent.$.prettyPhoto.close();
        }
    </script>

 For more information about PrettyPhoto check this