Implementing the prettyPhoto jQuery plugin

随声附和 提交于 2020-01-21 09:49:06

问题


I am trying to implement the prettyPhoto jQuery plugin on this web page.

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

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.


回答1:


Here are some big problems I found on your page...

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>

First problem: You're including prettyPhoto before jQuery. You'll need to "include" jQuery before any jQuery plugins.

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.

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: 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: 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" />

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


This comes directly from the documentation for that plugin:

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


来源:https://stackoverflow.com/questions/7067839/implementing-the-prettyphoto-jquery-plugin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!