prettyphoto jquery plugin
“prettyPhoto”
“prettyPhoto 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.”
“It is very easy to setup, yet very flexible if you want to customize it a bit”
Step1:- Create a file demo.html and put the below code
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
src="js/jquery-1.6.1.min.js"
type="text/javascript"></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>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Pretty
photo Jquery</title>
<style
type="text/css" media="screen">
* { margin:
0; padding: 0; }
body {
background:
#282828;
font:
62.5%/1.2 Arial, Verdana, Sans-Serif;
padding: 0
20px;
}
h1 {
font-family: Georgia; font-style: italic; margin-bottom: 10px; }
h2 {
font-family:
Georgia;
font-style:
italic;
margin: 25px
0 5px 0;
}
p {
font-size: 1.2em; }
ul li {
display: inline; }
.wide {
border-bottom:
1px #000 solid;
width:
4000px;
}
.fleft {
float: left; margin: 0 20px 0 0; }
.cboth {
clear: both; }
#main {
background:
#fff;
}
</style>
</head>
<body>
<div
id="main">
<ul
class="gallery clearfix">
<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/fullscreen/3.jpg" width="60"
height="60" alt="This is a pretty long title"
/></a></li>
<li><a
href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery2]"
title="Description on a single line."><img
src="images/fullscreen/4.jpg" width="60"
height="60" alt="" /></a></li>
<li><a
href="images/fullscreen/5.jpg"
rel="prettyPhoto[gallery2]"><img src="images/fullscreen/5.jpg"
width="60" height="60" alt=""
/></a></li>
<li><a
href="images/fullscreen/1.jpg"
rel="prettyPhoto[gallery2]"><img
src="images/fullscreen/1.jpg" width="60"
height="60" alt="" /></a></li>
<li><a
href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img
src="images/fullscreen/2.jpg" width="60"
height="60" alt="" /></a></li>
</ul>
</div>
</body>
<script
type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first
a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000,
autoplay_slideshow: true});
$(".gallery:gt(0)
a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000,
hideflash: true});
$("#custom_content
a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup:
'<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback:
function(){ initialize(); }
});
$("#custom_content
a[rel^='prettyPhoto']:last").prettyPhoto({
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>',
changepicturecallback:
function(){ _bsap.exec(); }
});
});
</script>
</html>
Download the complete demo and css and js file here
Note: Never forget to put all all js, css and html file in the same location.
No comments:
Post a Comment