advanced code snippet search

Posted By

erraja_07 on 08/19/11


Tagged

slider jQ


Versions (?)

JQuery Slider

 / Published in: jQuery
 

URL: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

Ref : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#!prettyPhoto

Expand | Embed | Plain Text 
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>jQuery lightbox clone - prettyPhoto - by Stephane Caron</title>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. 		<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  7. 		<!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->
  8. 		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  9. 		<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
  10.  
  11. 		<style type="text/css" media="screen">
  12. 			* { margin: 0; padding: 0; }
  13.  
  14. 			body {
  15. 				background: #282828;
  16. 				font: 62.5%/1.2 Arial, Verdana, Sans-Serif;
  17. 				padding: 0 20px;
  18. 			}
  19.  
  20. 			h1 { font-family: Georgia; font-style: italic; margin-bottom: 10px; }
  21.  
  22. 			h2 {
  23. 				font-family: Georgia;
  24. 				font-style: italic;
  25. 				margin: 25px 0 5px 0;
  26. 			}
  27.  
  28. 			p { font-size: 1.2em; }
  29.  
  30. 			ul li { display: inline; }
  31.  
  32. 			.wide {
  33. 				border-bottom: 1px #000 solid;
  34. 				width: 4000px;
  35. 			}
  36.  
  37. 			.fleft { float: left; margin: 0 20px 0 0; }
  38.  
  39. 			.cboth { clear: both; }
  40.  
  41. 			#main {
  42. 				background: #fff;
  43. 				margin: 0 auto;
  44. 				padding: 30px;
  45. 				width: 1000px;
  46. 			}
  47. 		</style>
  48. 	</head>
  49. 	<body>
  50. 		<div id="main">			
  51. 			<h2>Gallery 2</h2>
  52. 			<ul class="gallery clearfix">
  53. 				<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>
  54. 				<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>
  55. 				<li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="" /></a></li>
  56. 				<li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
  57. 				<li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
  58. 				<li><a href="images/fullscreen/7.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
  59. 				<li><a href="images/fullscreen/8.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
  60. 				<li><a href="images/fullscreen/9.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
  61. 				<li><a href="images/fullscreen/10.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
  62. 				<li><a href="images/fullscreen/11.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
  63. 				<li><a href="images/fullscreen/12.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="" /></a></li>
  64. 				<li><a href="images/fullscreen/13.jpg" rel="prettyPhoto[gallery2]"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="" /></a></li>
  65. 				<li><a href="images/fullscreen/14.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?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_2.jpg" width="60" height="60" alt="" /></a></li>
  66. 			</ul>
  67. 			<script type="text/javascript" charset="utf-8">
  68. 			$(document).ready(function(){
  69. 				$("area[rel^='prettyPhoto']").prettyPhoto();
  70.  
  71. 				$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',slideshow:3000, autoplay_slideshow: false});
  72. 				$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
  73.  
  74. 				$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  75. 					custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  76. 					changepicturecallback: function(){ initialize(); }
  77. 				});
  78.  
  79. 				$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  80. 					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>',
  81. 					changepicturecallback: function(){ _bsap.exec(); }
  82. 				});
  83. 			});
  84. 			</script>
  85.  
  86. 	</div>
  87. 	</body>
  88. </html>

Report this snippet  

You need to login to post a comment.