API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 9th, 2014
278
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Jon Maggio - Retoucher - Montreal</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7. <link rel="stylesheet" type="text/css" href="http://www.pixlsnap.com/j/css/demo.css" />
  8. <link rel="stylesheet" type="text/css" href="http://www.pixlsnap.com/j/css/elastislide.css" />
  9. <link rel="stylesheet" type="text/css" href="http://www.pixlsnap.com/j/css/simplegrid.css" />
  10. <!-- Include Cloud Zoom CSS. -->
  11. <link rel="stylesheet" type="text/css" href="http://www.pixlsnap.com/j/cloudzoom.css" />
  12.  
  13.  
  14. <link rel="stylesheet" type="text/css" href="http://www.pixlsnap.com/j/source/jquery.fancybox.css" media="screen" />
  15.  
  16. <style>
  17.  
  18. ul.links {list-style-type:none;}
  19.  
  20. #social li{
  21. margin-left:10px;
  22. width:160px;
  23. padding:10px;
  24. display: inline;
  25. list-style-type: none;}
  26.  
  27. .image {
  28. width: 900px; /* or whatever you want */
  29. height: 600px; /* or whatever you want */
  30. line-height: 600px; /* or whatever you want, should match height */
  31. text-align: center;
  32. }
  33.  
  34. .image > img {
  35. vertical-align: middle;
  36. }
  37.  
  38. .fancybox-nav span {
  39. visibility: visible;
  40. }
  41.  
  42.  
  43. /* Gradient color1 - color2 - color1 */
  44.  
  45. hr {
  46. border: 0;
  47. height: 1px;
  48. width: 85%;
  49. margin-top: 15px;
  50. margin-bottom: 15px;
  51.  
  52. background: #333;
  53. background-image: -webkit-linear-gradient(left, #ccc, #707070, #ccc);
  54. background-image: -moz-linear-gradient(left, #ccc, #707070, #ccc);
  55. background-image: -ms-linear-gradient(left, #ccc, #707070, #ccc);
  56. background-image: -o-linear-gradient(left, #ccc, #707070, #ccc);
  57. }
  58.  
  59.  
  60. #bottom-menu {
  61. position: absolute;
  62. width:100%;
  63. top: 623px;
  64. bottom: 0;
  65. left: 0; }
  66.  
  67. #capwrap {
  68. position: absolute;
  69. width:100%;
  70. bottom: 20px;
  71. }
  72.  
  73. #socialwrap {
  74. position: absolute;
  75. width:100%;
  76. top: 43px;
  77. }
  78.  
  79. p.cap {
  80. font-size:12px;
  81. }
  82.  
  83. #imgconstrain
  84. {
  85. height:600px;
  86. width:900px;
  87. }
  88. #imgconstrain img
  89. {
  90. max-width:100%;
  91. max-height:100%;
  92. margin:auto;
  93. display:block;
  94. }
  95.  
  96. .hover
  97. {
  98. height:600px;
  99. width:900px;
  100. }
  101. .hover img
  102. {
  103. max-width:100%;
  104. max-height:100%;
  105. margin:auto;
  106. display:block;
  107. }
  108.  
  109.  
  110. </style>
  111.  
  112. <script src="http://www.pixlsnap.com/j/js/modernizr.custom.17475.js"></script>
  113.  
  114. <!-- Include jQuery. -->
  115. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  116.  
  117. <!-- Include Cloud Zoom script. -->
  118. <script type="text/javascript" src="http://www.pixlsnap.com/j/cloudzoom.js"></script>
  119.  
  120. <!-- Call quick start function. -->
  121. <script type="text/javascript">
  122. CloudZoom.quickStart();
  123. </script>
  124.  
  125. <script type="text/javascript" src="http://www.pixlsnap.com/j/source/jquery.fancybox.js"></script>
  126.  
  127. <script type="text/javascript">
  128. $(document).ready(function(){
  129. $('ul#carousel.elastislide-list img').on('click',function(){
  130. $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
  131. $('#imgconstrain a').attr('href','#'+$new_hoverid);
  132. caption_text = $(this).attr('alt');
  133. var caption_element = document.getElementById('caption');
  134. caption_element.innerHTML = caption_text;
  135. });
  136.  
  137. $('#imgconstrain a.open-fancybox').on('click',function(){
  138. $to_open = $(this).attr('href');
  139. $('a.fancybox[href="'+$to_open+'"]').click();
  140. });
  141.  
  142. });
  143. $(function(){
  144. // Bind a click event to a Cloud Zoom instance.
  145. $('#1').bind('click',function(){
  146. // On click, get the Cloud Zoom object,
  147. var cloudZoom = $(this).data('CloudZoom');
  148. // Close the zoom window (from 2.1 rev 1211291557)
  149. cloudZoom.closeZoom();
  150. // and pass Cloud Zoom's image list to Fancy Box.
  151. $.fancybox({
  152. afterShow: function () {
  153. $(this.content).attr("tabindex",1)
  154. }
  155.  
  156. });
  157. });
  158. });
  159. </script>
  160.  
  161. <script type="text/javascript">
  162.  
  163. var imageHeight = $('#imgconstrain img').height();
  164. if (logoHeight < 900) {
  165. var margintop = (900 - imageHeight) / 2;
  166. $('#imgconstrain img').css('margin-top', margintop);
  167. }
  168. </script>
  169.  
  170. <script type="text/javascript">
  171.  
  172. var imageHeight = $('.hover img').height();
  173. if (logoHeight < 900) {
  174. var margintop = (900 - imageHeight) / 2;
  175. $('.hover img').css('margin-top', margintop);
  176. }
  177. </script>
  178.  
  179. <script type="text/javascript">
  180. $(".fancybox").fancybox({
  181. afterShow: function () {
  182. $(this.content).attr("tabindex",1)
  183. }
  184. });
  185. </script>
  186.  
  187.  
  188. <style>
  189. .fancybox-image {cursor: pointer;}
  190. </style>
  191.  
  192. <script type="text/JavaScript">
  193. // prepare the form when the DOM is ready
  194. $(document).ready(function() {
  195. $(".img-swap").hover(
  196. function(){this.src = this.src.replace("_on","_off");},
  197. function(){this.src = this.src.replace("_off","_on");
  198. });
  199. var imgSwap = [];
  200. $(".img-swap").each(function(){
  201. imgUrl = this.src.replace("_off","_on");
  202. imgSwap.push(imgUrl);
  203. });
  204. $(imgSwap).preload();
  205. });
  206. $.fn.preload = function() {
  207. this.each(function(){
  208. $('<img/>')[0].src = this;
  209. });
  210. }
  211. </script>
  212.  
  213. <script type="text/JavaScript">
  214. $(document).ready(function() {
  215. // Declare the array variable
  216. var imgSwap = [];
  217. // Select all images used in the image swap function - in our case class "img-swap"
  218. $(".img-swap").each(function(){
  219. // Loop through all images which are used in our image swap function
  220. // Get the file name of the active images to be loaded by replacing _off with _on
  221. imgUrl = this.src.replace("_off","_on");
  222. // Store the file name in our array
  223. imgSwap.push(imgUrl);
  224. });
  225. // Pass the array to our preload function
  226. $(imgSwap).preload();
  227. });
  228. </script>
  229.  
  230. </head>
  231.  
  232. <body>
  233.  
  234.  
  235.  
  236.  
  237. <div class="grid grid-pad">
  238.  
  239. <div class="col-3-12">
  240. <div class="menucontent">
  241. <ul class="links">
  242. <li><h3>Jon Maggio - Retoucher</h3></li>
  243. <hr>
  244. <li><a href="beauty.php" >Beauty</a></li>
  245. <li><a href="fashion.php" >Fashion</a></li>
  246. <li><a href="portrait.php" class="active">Portrait</a></li>
  247. <li><a href="editorial.php" class="active">Editorial</a></li>
  248. <li><a href="commercial.php" >Commercial</a></li>
  249. <br>
  250. <br>
  251. <br>
  252. <br>
  253. <li><a href="about.php">About</a></li>
  254. <li><a href="ccontact.php" >Contact</a></li>
  255. </ul>
  256.  
  257. <div id="bottom-menu">
  258. <div id="capwrap">
  259.  
  260. <p id="caption" class="cap">LIG Hippie Commune</p></div>
  261. <hr>
  262. <div id="socialwrap">
  263. <ul id="social">
  264. <li><a href="http://www.facebook.com/JonathanMaggioRetoucher"><img src="img/social-006_facebookgrey.png"></a></li>
  265. <li><a href="ccontact.php" ><img src="img/social-015_tumblrgrey.png"></a></li>
  266. <li><a href="ccontact.php" ><img src="img/social-003_twittergrey.png"></a></li>
  267. </ul>
  268.  
  269.  
  270. <a rel="gallery" class="fancybox" href="#hover1"></a><a rel="gallery" class="fancybox" href="#hover2"></a><a rel="gallery" class="fancybox" href="#hover3"></a><a rel="gallery" class="fancybox" href="#hover4"></a><a rel="gallery" class="fancybox" href="#hover5"></a><a rel="gallery" class="fancybox" href="#hover6"></a>
  271. <div id="hover0" style="display: none"><p style="padding:70px" align="center">Use the Navigation Arrows to scroll<br>through the gallery, and hover your mouse over<br>the image to see the original.</p></div>
  272.  
  273. <div class="hover" id="hover1" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg" class="img-swap" /></div><div class="hover" id="hover2" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg" class="img-swap" /></div><div class="hover" id="hover3" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/lig1_on.jpg" class="img-swap" /></div><div class="hover" id="hover4" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/lig2_on.jpg" class="img-swap" /></div><div class="hover" id="hover5" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/pumacolor_on.jpg" class="img-swap" /></div><div class="hover" id="hover6" style="display: none"><img src="http://brecksargent.com/slideshowpro/albums/album-16/lg/pumatest_on.jpg" class="img-swap" /></div>
  274. </div>
  275. </div>
  276.  
  277. </div>
  278. </div>
  279. <div class="col-9-12">
  280. <div class="content">
  281.  
  282. <div id="imgconstrain">
  283. <a class="open-fancybox" href="#hover1">
  284. <img class = "cloudzoom" id="1" src =
  285. "http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg" alt ="LIG Hippie Commune" data-cloudzoom = "zoomImage: 'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' , zoomPosition:'inside', zoomOffsetX: 0" />
  286. </a>
  287. </div>
  288.  
  289. <ul id="carousel" class="elastislide-list">
  290. <li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li><li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&amp;m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li><li><img class = 'cloudzoom-gallery' id="hover3" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1MExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383861455" alt ="No one dresses like this in this neighborhood" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig1_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig1_on.jpg' "> </li><li><img class = 'cloudzoom-gallery' id="hover4" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1M0xlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383861459" alt ="Putting this shit in my bag" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig2_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig2_on.jpg' "> </li><li><img class = 'cloudzoom-gallery' id="hover5" src ="http://brecksargent.com/slideshowpro/p.php?a=ZWd%2FYHBlZ3x2VWRsPW5xbC47ICs4OzoLKzc5MS4jKyInPjE%2FPzs%2FMTonMj80LT4uPyY%3D&amp;m=1383861464" alt ="Happy V-Day" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/pumacolor_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/pumacolor_on.jpg' "> </li><li><img class = 'cloudzoom-gallery' id="hover6" src ="http://brecksargent.com/slideshowpro/p.php?a=ZWd%2FYGdveGdbZWUseXRmJzM8OjY5OwMuNjY5LTM%2BMCA%2BIi0mOicmNCY7LiMoNCc3Og%3D%3D&amp;m=1383861469" alt ="Stairwell crouching new Olympic Sport" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/pumatest_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/pumatest_on.jpg' "> </li>
  291. </ul>
  292.  
  293. </div>
  294. </div>
  295. </div>
  296.  
  297.  
  298.  
  299.  
  300. <script type="text/javascript" src="http://www.pixlsnap.com/j/js/jquery.elastislide.js"></script>
  301. <script type="text/javascript">
  302. $( '#carousel' ).elastislide({
  303. onClick: null
  304. });
  305.  
  306. </script>
  307. </body>
  308. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!