案例展示地址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 举报,一经查实,本站将立刻删除。