javascript - 实现 prettyPhoto jQuery 插件

标签 javascript jquery html css prettyphoto

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

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

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

最佳答案

这是我发现的一些大问题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>

关于javascript - 实现 prettyPhoto jQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7067839/

相关文章:

javascript - 无法使用 Bootstrap 查看响应式 Angular NVD3 图表

javascript - 使用javascript根据在另一个文本框中输入的值自动在文本框中显示值

jquery - 单击jquery的下拉菜单CSS

html - 如何在不同浏览器的 html 中用背景颜色填充 html 表格单元格

javascript - 用 jquery 读取这个 xml

javascript - X-内容类型-选项 :nosniff in DWR

Javascript:从 Ruby on Rails 生成的按钮访问 'action' 属性

javascript - 如何禁用剑道网格列中的按钮

jquery autotab 不要制表符下一行

jquery - 我可以在 JQuerify 等书签中使用 JQuery 插件吗