prettyPhoto 的运用 _Web前端

prettyPhoto 的使用

“You can also open galleries using the API, just pass arrays to the open function.”

api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];

api_titles = ['Title 1','Title 2','Title 3'];

api_descriptions = ['Description 1','Description 2','Description 3'] $.prettyPhoto.open(api_images,api_titles,api_descriptions);

动态加载的:

//文本点击加载图片
<script type="text/javascript">
function seleOnClick(id)
{
//获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
??? var curWwwPath=window.document.location.href;
??? //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
??? var pathName=window.document.location.pathname;
??? var pos=curWwwPath.indexOf(pathName);
??? //获取主机地址，如： http://localhost:8083
??? var localhostPaht=curWwwPath.substring(0,pos);
??? //获取带"/"的项目名，如：/uimcardprj
??? var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
?? // alert(localhostPaht+projectName);
??? var path = localhostPaht+projectName
???
??? ??? $.ajax({
??? ??? url: path+"/portal/queryEventInfo.action",
??? ?? dataType: "json",
??? ??? data:{"advertInfoVO.eventType":id},
??? ??? ??? ?? success: function(data){
??? ??? ??? ?? var api_images=new Array();
??? ??? ??? ??? ? $.each(data,function(index,resourceSubject){
??? ??? ??? ??? ??? ?
??? ??? ??? ??? ??? api_images[index]=path+resourceSubject.eventPhoto;
??? ??? ??? ??? ??? ??
??? ??? ??? ? });


??? ??? ??? ??? $.prettyPhoto.open(api_images);
??? ??? ??? ??? ??? ??? ??? ??? ?
??? ??? ??? ?? }
??? ??? ??? ?? });

}
</script>

摘自网站上的内容:

保存HTML格式就可以浏览了,要把加载项放进来就可以了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
??? "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
??? <head>
??? ??? <title>使用jQuery框架的prettyPhoto图片特效 - js代码站</title>
??? ??? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
??? ??? <script src="http://www.google.com/jsapi" type="text/javascript"></script>
??? ??? <script type="text/javascript" charset="utf-8">
??? ??? ??? google.load("jquery", "1.3");
??? ??? </script>
??? ??? <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
??? ??? <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
??? ???
??? ??? <style type="text/css" media="screen">
??? ??? ??? * { margin: 0; padding: 0;border:none; }
??? ??? ???
??? ??? ??? body {
??? ??? ??? ??? font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
??? ??? ??? ??? padding: 0 20px;
??? ??? ??? }
??? ??? ???
??? ??? ??? h4 { margin: 15px 0 5px 0; }
??? ??? ???
??? ??? ??? h4, p { font-size: 1.2em; }
??? ??? ???
??? ??? ??? ul li { display: inline;}
??? ??? ???
??? ??? ??? .wide {
??? ??? ??? ??? border-bottom: 1px #000 solid;
??? ??? ??? ??? width: 4000px;
??? ??? ??? }
??? ??? </style>
??? </head>
??? <body>
??? ???
??? ??? ??? <a rel="prettyPhoto[ajax]" href="http://www.163.com">Ajax content</a>?

??? ???
??? ??? <div class="gallery clearfix">
<a href="#inline-1" rel="prettyPhoto" ><img src="images/fullscreen/1.jpg" alt="" width="50" /></a>??
<div id="inline-1" style="display:none;">??
??? <p>这里是普通的文本</p>??
??? <p>今天给大家介绍的prettyPhoto希望大家能喜欢，这个是播放普通文本的html</p>??
</div>
</div>
??? ???
??? ??? <h4>API calls</h4>
??? ??? <p><a href="#" onclick="$.prettyPhoto.open('images/fullscreen/1.jpg');">No title, no description</a></p>
??? ???
<div class="gallery clearfix">
??? <p><a href="images/fullscreen/1.jpg" rel="prettyPhoto[test]">test</a>
??? </p>
??? <div style="display:none;" id="test_demo">
??? ??? ??? ??? <h4>Test</h4>
??? ??? ??? <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[test]" 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>
??? ??? ??? <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a></li>

??? ???
??? ??? </div>
??? ???
??? ??? </div>
??? ???
??? ??? <h4>Gallery</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="images/fullscreen/1.jpg" 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>
??? ??? ??? <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>
??? ??? ??? <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>
??? ??? ??? <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>
??? ??? ??? <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>
??? ??? </ul>

??? ??? <h4>Gallery 2</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Lol" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
??? ??? </ul>

??? ??? <h4>Picture alone</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <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>
??? ??? </ul>
??? ???
??? ??? <h4>Flash</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <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="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
??? ??? ??? <li><a href="http://vimeo.com/moogaloop.swf?width=580&height=326&flashvars=clip_id=4321799&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" rel="prettyPhoto[flash]" title="Vimeo Movie"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Vimeo movie" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Flash alone</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&height=294" rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Youtube video</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Vimeo video</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://vimeo.com/7874398&width=700" rel="prettyPhoto" title="Vimeo video">Vimeo</a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Movies (.mov)</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&height=204" rel="prettyPhoto[movies]" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Terminator Salvation" /></a></li>
??? ??? ??? <li><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&height=260" rel="prettyPhoto[movies]" title="Angels & Demons"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels & Demons" /></a></li>
??? ??? ??? <li><a href="http://imigri.com/site2/video/gtg_trailer.mov?width=700&height=393" rel="prettyPhoto[movies]" title="Food, Inc."><img src="http://images.apple.com/trailers/magnolia/images/foodinc_200904171457.jpg" alt="Food, Inc." /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Movies (.mov) alone</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&height=204" rel="prettyPhoto" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Terminator Salvation" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Unusual sizes</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="images/fullscreen/wide.gif" rel="prettyPhoto[unusual]">Wide image (3000 x 1500)</a></li>
??? ??? ??? <li><a href="images/fullscreen/high.gif" rel="prettyPhoto[unusual]">High image (1500 x 3000)</a></li>
??? ??? ??? <li><a href="images/fullscreen/huge.gif" rel="prettyPhoto[unusual]">Huge image (3000 x 3000)</a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Iframe</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=prettyphoto&iframe=true&width=100%&height=100%" rel="prettyPhoto[iframe]">Google.ca</a></li>
??? ??? ??? <li><a href="http://www.facebook.com?iframe=true&width=600&height=300" rel="prettyPhoto[iframe]">Facebook</a></li>
??? ??? ??? <li><a href="http://www.twitter.com?iframe=true&width=300&height=200" rel="prettyPhoto[iframe]">Twitter</a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Mixed gallery</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="http://www.google.ca?iframe=true&width=1000&height=500" rel="prettyPhoto[mixed]">Google.ca</a></li>
??? ??? ??? <li><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&height=260" rel="prettyPhoto[mixed]" title="Angels & Demons sdg sdag sdagsdag sadg sadg sda gasg sdg asdgsdag sadgsdagsadg sdag sdgasdgsda"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels & Demons" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[mixed]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
??? ??? ??? <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="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="Flash 10 demo" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Inline content</h4>
??? ??? <ul class="gallery clearfix">
??? ??? ??? <li><a href="#inline_demo" rel="prettyPhoto[inline]">Inline content 1</a></li>
??? ??? ??? <li><a href="#inline_demo2" rel="prettyPhoto[inline]">Inline content 2</a></li>
??? ??? ??? <li><a href="#inline_demo3" rel="prettyPhoto[inline]">Inline content 3</a></li>
??? ??? ??? ??? <a href="#inline_demo4" rel="prettyPhoto[inline]">Inline content 1</a>
??? ??? </ul>
??? ??? <div id="inline_demo" style="display:none;">
??? ??? ??? <p><a href="http://www.google.ca?iframe=true&width=1000&height=500">Google.ca</a></p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? </div>
??? ??? ??? ??? <div id="inline_demo4" style="display:none;">
??? ??? ??? <p><a href="http://www.google.ca?iframe=true&width=1000&height=500">Google.ca</a></p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? </div>
??? ??? <div id="inline_demo2" style="display:none;">
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? </div>
??? ??? <div id="inline_demo3" style="display:none;">
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? ??? <p><a href="http://movies.apple.com/movies/sony_pictures/angelsanddemons/angelsanddemons-video_h.480.mov?width=480&height=260" title="Angels & Demons sdg sdag sdagsdag sadg sadg sda gasg sdg asdgsdag sadgsdagsadg sdag sdgasdgsda"><img src="http://images.apple.com/trailers/sony_pictures/images/angelsdemons_200903261218.jpg" alt="Angels & Demons" /></a></p>
??? ??? ??? <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
??? ??? </div>
??? ???
??? ??? <script type="text/javascript" charset="utf-8">
??? ??? $(document).ready(function(){
??? ??? ??? $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'dark_square'});
??? ??? });
??? ??? </script>
??? <br><br>
<p align="center"><strong>使用jQuery框架的prettyPhoto图片特效</strong>? <a href="http://www.sitejs.com/code/help.html" target="_blank">【使用说明】</a></p><br />

<p align="center"><a href="http://www.sitejs.com/" target="_blank">js代码站</a>，转载请注明出处。　本代码仅限于学习交流，请勿用于商业用途! </p>
<br />
</body>
</html>