CODEWITHSUNDEEP
jqueryjquery-plugins
William Smith
William Smith

Reputation: 1959

How to set up jQuery to launch PrettyPhoto on anchor click

I have been working with PrettyPhoto to set up a simple gallery. My problem is that I do not understand how to implement the API from the documentation provided on the developer's site. When I add the code as I understand it and click on the anchor, nothing happens.

I have a Site.Master page and a content page that is using the plugin. Here's the code that I have in the content page:

<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
    <title>Gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />       
    <script type="text/javascript">
        $('#prettyPhoto').click(function () {
            api_images = ['images/prettyPhoto/dogs.png', 'images/prettyPhoto/Yard1.png', 'images/prettyPhoto/Yard2.png', 'images/prettyPhoto/Yard3.png'];
            api_titles = ['Title Dogs', 'Title Yard 1', 'Title Yard 2', 'Title Yard 3'];
            api_descriptions = ['Dogs', 'Yard 1', 'Yard 2', 'Yard 3'];
            $.prettyPhoto.open(api_images, api_titles, api_descriptions);
        });
    </script>
</asp:Content>

...

<a href="#" id="prettyPhoto"><img src='images/prettyPhoto/dogs.png' alt='Dogs' style="float:right; margin:0px 0px 10px 10px" /></a>

And here's the Site.Master content:

<head id="Head1" runat="server">
    <link rel="stylesheet" href="Styles/styles.css" type="text/css" />
    <link rel="stylesheet" href="styles/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script>  
    <script type="text/javascript" src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script>      
    <script type="text/javascript">
        $(document).ready(function () {
            $('.newWindow').click(function (event) {
                var url = $(this).attr("href");
                var windowName = $(this).attr("name");
                var windowSize = windowSizeArray[$(this).attr("rel")];
                window.open(url, windowName, windowSize);
                event.preventDefault();
            });            
            $('.slideshow').cycle();            
            if ($("#content").height() > $("#sidebar").height()) {
                $("#sidebar").height($("#content").height());
            }
            else {
                $("#content").height($("#sidebar").height());
            }
        });
    </script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

I hope I'm not posting too much information here, but I'm not clear where my mistake is. And I KNOW I'm making a mistake because earlier tonight I had this control working the way I wanted but then I had to start "fine tuning" it. Before I knew it I had lost track of my changes and broken it.

Upvotes: 1

Views: 2519

Answers (1)

William Smith
William Smith

Reputation: 1959

OK, I figured out the error and I'll post the answer in case someone else could use it. I found the documentation on the developer's website to be lacking in explaining a few details of implementing the API, but maybe these details are just obvious to someone with more jQuery experience. I was making two mistakes. First, the click handler needs to be inside of the $(document).ready function. Second, the plugin needs to be called prior to declaring the API call in the click handler. This is the part that is really confusing to me; I would have thought the API negated the need for calling the plugin, but again my jQuery experience is limited. Here's the final code:

<script type="text/javascript" src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $().prettyPhoto();
        $('#prettyPhoto').click(function () {
            api_images = ['images/prettyPhoto/dogs.png', 'images/prettyPhoto/Yard1.png', 'images/prettyPhoto/Yard2.png', 'images/prettyPhoto/Yard3.png'];
            api_titles = ['Title Dogs', 'Title Yard 1', 'Title Yard 2', 'Title Yard 3'];
            api_descriptions = ['Dogs', 'Yard 1', 'Yard 2', 'Yard 3'];
            $.prettyPhoto.open(api_images, api_titles, api_descriptions);
        });
    });
</script>

In doing this I've learned that the above code can be placed in either the Site.Master or content file, and apparently just about anywhere in those files. Solving this also helped me to finish implementing my other idea which is to generate this entire code block dynamically from an external XML file.

Upvotes: 2

Related Questions