prettyPhoto 的运用

2012-09-03

prettyPhoto 的使用“You can also open galleries using the API, just pass arrays to the open function

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 rel="prettyPhoto" ><img src="images/fullscreen/1.jpg" alt="prettyPhoto 的运用" 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 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="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[test]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>

??? ???
??? ??? </div>
??? ???
??? ??? </div>
??? ???
??? ??? <h4>Gallery</h4>
??? ??? <ul 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="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></a></li>
??? ??? </ul>

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

??? ??? <h4>Picture alone</h4>
??? ??? <ul 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="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Flash</h4>
??? ??? <ul rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="prettyPhoto 的运用" /></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="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Flash alone</h4>
??? ??? <ul rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Youtube video</h4>
??? ??? <ul rel="prettyPhoto" title="Flash 10 demo"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Vimeo video</h4>
??? ??? <ul rel="prettyPhoto" title="Vimeo video">Vimeo</a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Movies (.mov)</h4>
??? ??? <ul rel="prettyPhoto[movies]" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="prettyPhoto 的运用" /></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="prettyPhoto 的运用" /></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="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Movies (.mov) alone</h4>
??? ??? <ul rel="prettyPhoto" title="Terminator!"><img src="http://images.apple.com/trailers/wb/images/terminatorsalvation_200903131052.jpg" alt="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Unusual sizes</h4>
??? ??? <ul 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 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 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="prettyPhoto 的运用" /></a></li>
??? ??? ??? <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[mixed]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="prettyPhoto 的运用" /></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="prettyPhoto 的运用" /></a></li>
??? ??? </ul>
??? ???
??? ??? <h4>Inline content</h4>
??? ??? <ul 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="prettyPhoto 的运用" /></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>

热点排行

Web前端

prettyPhoto 的运用