学步园

链接（包括download，api，demo）： http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

prettyPhoto用于在web页面展示图片非常方便：

“prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.”
Read more about jQuery lightbox for images, videos, YouTube, iframes, ajaxStéphane Caron – No Margin For Errors on:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/?utm_source=INK&utm_medium=copy&utm_campaign=share&

1.include lib：

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>//first
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

2.init prettyPhoto：

方式一：

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

方式二：

  $(document).ready(function(){
    $.fn.prettyPhoto({social_tools:false});
  });

3.open prettyPhoto:

===========================================

$.prettyPhoto.open(['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'],'Title','Description');

var api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
var api_titles = ['Title 1','Title 2','Title 3'];
var api_descriptions = ['Description 1','Description 2','Description 3']
$.prettyPhoto.open(api_images,api_titles,api_descriptions);

$.prettyPhoto.changePage('next');
$.prettyPhoto.changePage('previous');
$.prettyPhoto.close();

4.[参照demo]

===================================

“prettyPhoto can open single images.  

To do so, simply:

1.Create a link ().

2.Add the rel attribute “prettyPhoto” to it(rel=”prettyPhoto”).

3.Change the href of your link so it pointsto the full size image.   

You can also add a title and a descriptionto your picture:

1.To have display a title, add the titleinto the ALT attribute or your thumbnail image.

2.To have display a description, add thedescription into the TITLE attribute or your link.”

<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description">
	<!-- <img  width="60" height="60" alt="This is the title" /> -->
	<button name="btn">click me!</button>
</a>

=====================================

“To open animage gallery simply:

1.Createa link ().

2.Addthe rel attribute “prettyPhoto” to it and add your gallery name in squarebrakets (rel=”prettyPhoto“). 

3.Change the href of your link so it points to thefull size image.”

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures.">
<!-- <img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /> -->
<button name="btn">click me!</button>
</a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"></a>
<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"></a>
<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"></a>
<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"></a>

5.说明：

可根据需要，自行修改prettyPhoto的js和css文件，以满足实际需求。