Question

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

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

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

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

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

实现prettyPhoto jQuery插件

2 个答案: