实现prettyPhoto jQuery插件 [英] Implementing the prettyPhoto jQuery plugin
问题描述
我想实现 prettyPhoto jQuery插件。
http ：//mcmach.com/mcmachine/photogallery.html
我想使用单一图片选项并设置 rel = prettyPhoto用于图像链接。我是一个新手jQuery和一个新手在JavaScript。任何建议将不胜感激。
I want to use the single image option and have set rel="prettyPhoto" for the image links. I am a newbie to jQuery and a novice at JavaScript. Any advice would be appreciated.
推荐答案
Here are some big problems I found on your page...
在< head> this ...
In the <head> section, you have this...
<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。
First problem: You're including prettyPhoto before jQuery. You'll need to "include" jQuery before any jQuery plugins.
第二个问题：您正在使用jQuery插件。
Second problem: You're including three versions of jQuery. You cannot "include" more than one version or instance of jQuery. For some reason, you're including and loading versions 1.3.2, 1.4.4 and 1.6.1. Just use the latest one.
第三个问题：您并未调用prettyPhoto。
Third problem: You're not invoking prettyPhoto. After you "include" the plugin, you'll need to call it using JavaScript.
它应该看起来像这样...
It should all look something like this...
<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>
Sidenote ：为了最有效的网页载入，请了解我的在这个线程中回答关于在< / body>上方的< body>
Sidenote: For the most efficient page loading, please read my answer in this thread about placing your JavaScript includes at the end of the <body> section just above the </body> tag.
CSS：您还缺少prettyPhoto的CSS文件的链接。这应该在您网页的< head> 部分。
CSS: You're also missing the link to the CSS file for prettyPhoto. This should be in the <head> section of your page.
<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>
这篇关于实现prettyPhoto jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
