jQuery图片播放浏览插件prettyPhoto使用详解

简介

prettyPhoto是一款基于jQuery的图片播放浏览插件，不仅支持图片、照片，还支持Flash、视频等类型的媒体。它有一种独特的、漂亮的模态显示效果，可以使网页的图片浏览效果更加的优美。

安装

下载插件

要从jQuery官方网站上下载prettyPhoto插件，下载完后解压缩到自己的脚本目录下。

引入插件

确保jQuery框架已经被正确引入。按照如下步骤引入：

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

<script src="path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="path/to/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

使用

要演示prettyPhoto，需要使用符合要求的链接格式，示例如下：

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_1.jpg" alt="" /></a>

其中href属性指向实际的图片地址，rel属性要设置成prettyPhoto[gallery1]，gallery1是一个逻辑上的分组名称，用于实现图片浏览器。因此，你可以在一个页面上使用多个逻辑分组，每个分组都可以拥有自己的设置。这样可以实现不同的浏览行为，可以是图片之间来回切换，也可以是显示单个图片。

<!-- 同一分组设置展示不同图片-->
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" alt="" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" alt="" /></a>

在页面中使用prettyPhoto的JavaScript代码：

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
   $("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

这里$是jQuery对象，它的作用是在文档加载完成后，使用prettyPhoto()方法作用于所有的链接，当这些链接被点击的时候将会以prettyPhoto效果展示。

示例

示例1: 图片集浏览

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>prettyPhoto 示例</title>

    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />

    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
       $("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>
</head>
<body>
    <h2>图片集浏览</h2>

    <div class="gallery clearfix">
        <a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_1.jpg" alt="" /></a>
        <a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_2.jpg" alt="" /></a>
        <a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="images/thumbnails/t_3.jpg" alt="" /></a>
    </div>

</body>
</html>

示例2: 在链接中使用视频

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>prettyPhoto示例</title>

    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />

    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
       $("a[rel^='prettyPhoto']").prettyPhoto();
    });
    </script>
</head>
<body>
    <h2>视频演示</h2>
    <p>
        点击链接，观看视频。
    </p>
    <p>
        <a href="http://www.youtube.com/watch?v=IKK7kZRGgVY&fs=1&autoplay=1" rel="prettyPhoto" title="prettyPhoto working with YouTube video"><img src="http://i3.ytimg.com/vi/IKK7kZRGgVY/hqdefault.jpg" width="130" height="75" alt=""/></a>
        <a href="http://www.youtube.com/watch?v=8nTFjVm9sTQ&fs=1&autoplay=1" rel="prettyPhoto" title="prettyPhoto working with Vimeo"><img src="http://b.vimeocdn.com/ts/101/508/101508153_640.jpg" width="130" height="75" alt=""/></a>
    </p>
</body>
</html>

以上两个示例将会得到一个图片集浏览器和链接中包含视频的展示界面，这里提供了展示prettyPhoto的一些基本用法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery图片播放浏览插件prettyPhoto使用详解 - Python技术站

jquery图片播放浏览插件prettyPhoto使用详解

jQuery图片播放浏览插件prettyPhoto使用详解

简介

安装

下载插件

引入插件

使用

示例

示例1: 图片集浏览

示例2: 在链接中使用视频

相关文章