微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery图片显示插件 PrettyPhoto

案例展示地址1:https://www.jq22.com/yanshi255

案例展示地址(本人亲自完成)2:http://ymzxsp.hnmsgf.com/sancheng/

1 //插件描述:prettyPhoto是一个 jQuery全媒体灯箱插件。它不仅支持的图像,它还支持视频、 flash、 YouTube、 iframe 和 ajax。

prettyPhoto一个 jQuery全媒体灯箱插件。它不仅支持的图像,它还支持视频、 flash、 YouTube、 iframe 和 ajax。如果你想要对其进行自定义,是很容易设置的,还非常灵活。再加上该脚本兼容所有浏览器。 它还配有用的 Api,所以几乎以可用在任何地方!

 

附:本地测试 案例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <Meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
 7     <script src="https://cdn.bootcdn.net/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js" type="text/javascript"></script>
 8     <link href="https://cdn.bootcdn.net/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css" rel="stylesheet" type="text/css" />
 9     <script type="text/javascript">
10     $(document).ready(function() {
11         $("a[rel^='prettyPhoto']").prettyPhoto();
12       });
13     </script>
14     <style>.pp_social{display: none!important;}</style>
15 </head>
16   <body>
17     <a href="images/1.jpg" rel="prettyPhoto[pp_gal]" title="标题一.">
18       <img src="images/1.jpg" width="650" height="350" alt="" /></a>
19     <a href="images/2.jpg" rel="prettyPhoto[pp_gal]" title="标题二.">
20       <img src="images/2.jpg" width="650" height="350" alt="" /></a>
21     <a href="images/3.jpg" rel="prettyPhoto[pp_gal]" title="标题三.">
22       <img src="images/3.jpg" width="650" height="350" alt="" /></a>
23     <a href="images/4.jpg" rel="prettyPhoto[pp_gal]" title="标题四.">
24       <img src="images/4.jpg" width="650" height="350" alt="" /></a>
25   </body>
26 </html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐