Question

我一直在使用PrettyPhoto来设置一个简单的图库。我的问题是，我不了解如何从开发人员site提供的文档中实现API。当我按照我的理解添加代码并单击锚点时，没有任何反应。

我有一个Site.Master页面和一个使用该插件的内容页面。这是我在内容页面中的代码：

<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>

这是Site.Master的内容：

<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>

我希望我不会在这里发布太多信息，但我不清楚我的错误在哪里。而且我知道我犯了一个错误，因为今晚早些时候我有这种控制按照我想要的方式工作，但后来我不得不开始“微调”它。在我知道之前，我已经忘记了我的变化并将其打破了。

Answer 1

好的，我发现了错误，我会发布答案以防其他人可以使用它。我发现开发人员网站上的文档缺乏解释实现API的一些细节，但也许这些细节对于具有更多jQuery经验的人来说是显而易见的。我犯了两个错误。首先，click处理程序需要在$（document）.ready函数内部。其次，需要在单击处理程序中声明API调用之前调用插件。这是让我感到困惑的部分;我原本认为API否定了调用插件的需要，但我的jQuery体验再次受到限制。这是最终的代码：

<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>

在这样做的过程中，我了解到上述代码可以放在Site.Master或内容文件中，而且几乎可以放在这些文件的任何位置。解决这个问题也帮助我完成了我的另一个想法，即从外部XML文件中动态生成整个代码块。

如何设置jQuery以在锚点击上启动PrettyPhoto

1 个答案: