首页>>Jquery文字>>prettyPhoto 插件的使用 图片组浏览器 异步加载，iframe内容加载 弹出层(2014-05-26)

prettyPhoto 插件的使用 图片组浏览器 异步加载，iframe内容加载 弹出层

prettyPhoto 插件的使用 图片组浏览器 异步加载，iframe内容加载 弹出层
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="main">  
  2.      
  3.             <h2>Gallery</h2>  
  4.             <ul class="gallery clearfix">  
  5.                 <li><a href="images/fullscreen/1.JPG?lol=lol" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a></li>  
  6.                 <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>  
  7.                 <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a></li>  
  8.                 <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a></li>  
  9.                 <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a></li>  
  10.                 <li><a href="images/fullscreen/6.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>  
  11.             </ul>  
  12.   
  13.             <h2>Gallery 2</h2>  
  14.             <ul class="gallery clearfix">  
  15.                 <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery2]" title="How is the description on that one? How is the description on that one? How is the description on that one? "><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="This is a pretty long title" /></a></li>  
  16.                 <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]" title="Description on a single line."><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="" /></a></li>  
  17.                 <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>  
  18.                 <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>  
  19.                 <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>  
  20.             </ul>  
  21.   
  22.             <h2>API Call</h2>  
  23.             <script type="text/javascript" charset="utf-8">  
  24.                 api_gallery=['images/fullscreen/1.JPG','images/fullscreen/2.jpg','images/fullscreen/3.JPG'];  
  25.                 api_titles=['API Call Image 1','API Call Image 2','API Call Image 3'];  
  26.                 api_descriptions=['Description 1','Description 2','Description 3'];  
  27.             </script>  
  28.             <p><a href="#" onClick="$.prettyPhoto.open(api_gallery,api_titles,api_descriptions); return false">API call</a></p>  
  29.   
  30.             <h2>Picture alone</h2>  
  31.             <ul class="gallery clearfix">  
  32.                 <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="<a href='http://www.google.ca' target='_blank' >This will open Google.com in a new window</a>"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Picture alone 1" /></a></li>  
  33.             </ul>  
  34.             <div class="fleft">  
  35.                 <h2>Flash</h2>  
  36.                 <ul class="gallery clearfix">  
  37.                     <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.png" width="60" alt="Flash 10 demo" /></a></li>  
  38.                 </ul>  
  39.             </div>  
  40.             <div class="fleft">  
  41.                 <h2>YouTube</h2>  
  42.                 <ul class="gallery clearfix">  
  43.                     <li><a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube demo"><img src="images/thumbnails/flash-logo.png" width="60" alt="" /></a></li>  
  44.                     <li><a href="http://youtu.be/kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube demo"><img src="images/thumbnails/flash-logo.png" width="60" alt="" /></a></li>  
  45.                 </ul>  
  46.             </div>  
  47.             <div class="fleft">  
  48.                 <h2>Vimeo</h2>  
  49.                 <ul class="gallery clearfix">  
  50.                     <li><a href="http://vimeo.com/7874398&width=700" rel="prettyPhoto" title="Vimeo video"><img src="images/thumbnails/flash-logo.png" width="60" alt="VIMEO!" /></a></li>  
  51.                 </ul>  
  52.             </div>  
  53.               
  54.             <br class="cboth" />  
  55.       
  56.             <h2>Movies (.mov)</h2>  
  57.             <ul class="gallery clearfix">  
  58.                 <li><a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov?width=640&height=272" rel="prettyPhoto[movies]" title="Tron!"><img src="images/thumbnails/quicktime-logo.gif" alt="Tron teaser" width="60" /></a></li>  
  59.                 <li><a href="http://trailers.apple.com/movies/sony_pictures/karatekid/karatekid-tlr3_r640s.mov?width=640&height=304" rel="prettyPhoto[movies]" title="The Karate Kid"><img src="images/thumbnails/quicktime-logo.gif" alt="The Karate Kid" width="60" /></a></li>  
  60.                 <li><a href="http://trailers.apple.com/movies/paramount/shutterisland/shutterisland-tvspot1_r640s.mov?width=640&height=272" rel="prettyPhoto[movies]" title="Shutter Island"><img src="images/thumbnails/quicktime-logo.gif" alt="Shutter Island" width="60" /></a></li>  
  61.             </ul>  
  62.       
  63.             <h2>Movies (.mov) alone</h2>  
  64.             <ul class="gallery clearfix">  
  65.                 <li><a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov?width=640&height=272" rel="prettyPhoto" title="Tron!"><img src="images/thumbnails/quicktime-logo.gif" alt="Tron teaser" width="60" /></a></li>  
  66.             </ul>  
  67.       
  68.             <h2>Unusual sizes</h2>  
  69.             <ul class="gallery clearfix">  
  70.                 <li><a href="images/fullscreen/wide.gif" rel="prettyPhoto[unusual]">Wide image (3000 x 1500)</a></li>  
  71.                 <li><a href="images/fullscreen/high.gif" rel="prettyPhoto[unusual]">High image (1500 x 3000)</a></li>  
  72.                 <li><a href="images/fullscreen/huge.gif" rel="prettyPhoto[unusual]">Huge image (3000 x 3000)</a></li>  
  73.             </ul>  
  74.       
  75.             <h2>Iframe</h2>  
  76.             <ul class="gallery clearfix">  
  77.                 <li><a href="http://www.163.com/iframe=true&width=100%&height=100%" rel="prettyPhoto[iframe]">163</a></li>  
  78.                 <li><a href="http://www.baidu.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]">baidu</a></li>  
  79.                 <li><a href="http://freejs.net?iframe=true&width=300&height=200" rel="prettyPhoto[iframe]">My site</a></li>  
  80.             </ul>  
  81.       
  82.             <h2>AJAX</h2>  
  83.             <ul class="gallery clearfix">  
  84.                 <li><a href="xhr_response.html?ajax=true&width=400&height=160" rel="prettyPhoto[ajax]">Sample AJAX</a></li>  
  85.             </ul>  
  86.       
  87.             <h2>Mixed gallery</h2>  
  88.             <ul class="gallery clearfix">  
  89.                 <li><a href="http://www.google.ca?iframe=true&width=1000&height=500" rel="prettyPhoto[mixed]">Google.ca</a></li>  
  90.                 <li><a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov?width=640&height=272" rel="prettyPhoto[mixed]" title="Tron!"><img src="images/thumbnails/quicktime-logo.gif" alt="Tron teaser" width="60" /></a></li>  
  91.                 <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[mixed]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>  
  92.                 <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto[mixed]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.png" width="60" alt="Flash 10 demo" /></a></li>  
  93.             </ul>  
  94.       
  95.             <h2>Inline content</h2>  
  96.             <ul class="gallery clearfix">  
  97.                 <li><a href="#inline_demo" rel="prettyPhoto[inline]">Inline content 1</a></li>  
  98.                 <li><a href="#inline_demo2" rel="prettyPhoto[inline]">Inline content 2</a></li>  
  99.                 <li><a href="#inline_demo3" rel="prettyPhoto[inline]">Inline content 3</a></li>  
  100.             </ul>  
  101.             <div id="inline_demo" style="display:none;">  
  102.                   
  103.                 <p>测试1</p>  
  104.             </div>  
  105.             <div id="inline_demo2" style="display:none;">  
  106.                 测试2  
  107.             </div>  
  108.             <div id="inline_demo3" style="display:none;">  
  109.                 测试3  
  110.                 <p><img src="images/fullscreen/2.jpg" /></p>  
  111.             </div>  
  112.       
  113.             <h2>Custom content</h2>  
  114.             <ul id="custom_content" class="gallery clearfix">  
  115.                 <li><a href="#?custom=true&width=260&height=270" rel="prettyPhoto">Google Maps</a></li>  
  116.                 <li><a href="#?custom=true&width=260&height=400" rel="prettyPhoto">Ads</a></li>  
  117.             </ul>  
  118.               
  119.             <br /><br />  
  120.               
  121.               
  122.               
  123.       
  124.             <script type="text/javascript" charset="utf-8">  
  125.             $(document).ready(function(){  
  126.                 $("area[rel^='prettyPhoto']").prettyPhoto();  
  127.                   
  128.                 $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});  
  129.                 $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});  
  130.           
  131.                 $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({  
  132.                     custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',  
  133.                     changepicturecallback: function(){ initialize(); }  
  134.                 });  
  135.   
  136.                 $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({  
  137.                     custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',  
  138.                     changepicturecallback: function(){ _bsap.exec(); }  
  139.                 });  
  140.             });  
  141.             </script>  
  142.       
  143.             <!-- Google Maps Code -->  
  144.             <script type="text/javascript"  
  145.                 src="http://maps.google.com/maps/api/js?sensor=true">  
  146.             </script>  
  147.             <script type="text/javascript">  
  148.               function initialize() {  
  149.                 var latlng = new google.maps.LatLng(-34.397, 150.644);  
  150.                 var myOptions = {  
  151.                   zoom: 8,  
  152.                   center: latlng,  
  153.                   mapTypeId: google.maps.MapTypeId.ROADMAP  
  154.                 };  
  155.                 var map = new google.maps.Map(document.getElementById("map_canvas"),  
  156.                     myOptions);  
  157.               }  
  158.   
  159.             </script>  
  160.             <!-- END Google Maps Code -->  
  161.       
  162.             <!-- BuySellAds.com Ad Code -->  
  163.             <style type="text/css" media="screen">  
  164.                 .bsap a { float: left; }  
  165.             </style>  
  166.             <script type="text/javascript">  
  167.             (function(){  
  168.               var bsa = document.createElement('script');  
  169.                  bsa.type = 'text/javascript';  
  170.                  bsa.async = true;  
  171.                  bsa.src = '//s3.buysellads.com/ac/bsa.js';  
  172.               (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);  
  173.             })();  
  174.             </script>  
  175.             <!-- END BuySellAds.com Ad Code -->  
  176.     </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_345.html