实现 prettyPhoto jQuery 插件答案

【问题标题】：Implementing the prettyPhoto jQuery plugin实现 prettyPhoto jQuery 插件
【发布时间】：2011-08-15 16:41:10
【问题描述】：

我正在尝试在此网页上实现prettyPhoto jQuery plugin。

http://mcmach.com/mcmachine/photogallery.html

我想使用单张图片选项并为图片链接设置了rel="prettyPhoto"。我是 jQuery 的新手和 JavaScript 的新手。任何意见，将不胜感激。

【问题讨论】：

设置和配置非常简单，那么您遇到了什么问题，需要什么样的建议？
您似乎已经实施了此页面上的一些建议。您还有其他问题吗？

标签： javascript jquery html css prettyphoto

【解决方案1】：

这是我发现的一些大问题on your page...

在<head> 部分，你有这个...

<script type="text/jscript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/jscript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.4.4.min.js"></script>
<script type="text/jscript" src="JS/jquery-1.6.1.min.js"></script>

第一个问题：您在 jQuery 之前包含了 prettyPhoto。您需要在任何 jQuery 插件之前“包含”jQuery 。

第二个问题：您包含三个版本的 jQuery。您不能“包含”多个 jQuery 版本或实例。出于某种原因，您包含并加载了 1.3.2、1.4.4 和 1.6.1 版本。只需使用最新的。

第三个问题：你没有调用 prettyPhoto。在“包含”插件之后，您需要使用 JavaScript 调用它。

它应该看起来像这样......

<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="JS/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('a[rel^="prettyPhoto"]').prettyPhoto({
            // any configuration options as per the online documentation.
        });
    });
</script>

旁注：为了最有效的页面加载，请read my answer in this thread 将您的 JavaScript 包含放在 <body> 部分的末尾，就在 </body> 标记上方。

CSS：您还缺少指向 prettyPhoto 的 CSS 文件的链接。这应该在您页面的<head> 部分。

<link rel="stylesheet" type="text/css"  href="/path/to/prettyPhoto.css" media="screen" />

您的 HTML：

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>

【讨论】：

【解决方案2】：

这直接来自该插件的文档：

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
    <img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" />
</a>

【讨论】：