API tools faq
paste
Advertisement
yLii

xprmnt.22

yLii
Mar 9th, 2016
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <!--viewport goodness http://enva.to/A79s3G-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Overthink Ink</title>
  8. <link rel="stylesheet" href="css/styles.css">
  9. <!--[if lt IE 9]>
  10. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  11. <![endif]-->
  12. <!-- Favicons -->
  13. <link rel="shortcut icon" href="http://webdesign.tutsplus.com/wp-content/themes/tuts/images/theme/webdesigntuts/favicon.ico" />
  14. <link rel="apple-touch-icon" href="http://webdesign.tutsplus.com/wp-content/themes/tuts/images/theme/webdesigntuts/apple-touch-icon.png" />
  15.  
  16.  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  18.  
  19. <link rel="stylesheet" type="text/css" href="http://dan-silver.github.io/ElementTransitions.js/css/elementTransitions.css" />
  20. <script type="text/javascript" src="http://dan-silver.github.io/ElementTransitions.js/js/elementTransitions.js"></script>
  21.  
  22.  
  23.  
  24.  
  25.  
  26. <meta name="select:Header Font" content="Abraham Lincoln" title="Abraham Lincoln">
  27. <meta name="select:Header Font" content="Barkentina" title="Barkentina">
  28. <meta name="select:Header Font" content="Blake" title="Blake">
  29. <meta name="select:Header Font" content="Blanch" title="Blanch">
  30. <meta name="select:Header Font" content="Brain Flower" title="Brain Flower">
  31. <meta name="select:Header Font" content="Buffet" title="Buffet">
  32. <meta name="select:Header Font" content="Decopolitan" title="Decopolitan">
  33. <meta name="select:Header Font" content="Disturbance" title="Disturbance">
  34. <meta name="select:Header Font" content="Helvetica" title="Helvetica">
  35. <meta name="select:Header Font" content="Mayo" title="Mayo">
  36. <meta name="select:Header Font" content="Parisish" title="Parisish">
  37. <meta name="select:Header Font" content="PT Serif" title="PT Serif">
  38. <meta name="select:Header Font" content="Respective" title="Respective">
  39. <meta name="select:Header Font" content="Sachiko" title="Sachiko">
  40. <meta name="select:Header Font" content="Serifiqo" title="Serifiqo">
  41.  
  42.  
  43. <meta name="select:H Font" content="Abraham Lincoln" title="Abraham Lincoln">
  44. <meta name="select:H Font" content="Barkentina" title="Barkentina">
  45. <meta name="select:H Font" content="Blake" title="Blake">
  46. <meta name="select:H Font" content="Blanch" title="Blanch">
  47. <meta name="select:H Font" content="Brain Flower" title="Brain Flower">
  48. <meta name="select:H Font" content="Buffet" title="Buffet">
  49. <meta name="select:H Font" content="Decopolitan" title="Decopolitan">
  50. <meta name="select:H Font" content="Disturbance" title="Disturbance">
  51. <meta name="select:H Font" content="Helvetica" title="Helvetica">
  52. <meta name="select:H Font" content="Mayo" title="Mayo">
  53. <meta name="select:H Font" content="Parisish" title="Parisish">
  54. <meta name="select:H Font" content="PT Serif" title="PT Serif">
  55. <meta name="select:H Font" content="Respective" title="Respective">
  56. <meta name="select:H Font" content="Sachiko" title="Sachiko">
  57. <meta name="select:H Font" content="Serifiqo" title="Serifiqo">
  58.  
  59. <meta name="select:Avatar Style" content="circle" title="Circle">
  60. <meta name="select:Avatar Style" content="square" title="Square">
  61. <meta name="select:Avatar Style" content="hidden" title="Hidden">
  62.  
  63.  
  64. <meta name="text:Header Font Height" content="50px">
  65. <meta name="text:About" content="About">
  66. <meta name="color:Header Font Colour" content="#fff" />
  67.  
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73. @import url(http://necolas.github.io/normalize.css/2.1.2/normalize.css);
  74. @import url(http://static.tumblr.com/m9qxvhq/rytms5akd/fluid_skeleton.css);
  75.  
  76. @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
  77.  
  78. @font-face {font-family:"Abraham Lincoln";src:url('http://static.tumblr.com/m9qxvhq/Q1Mmsabay/abrahamlincoln.ttf');}
  79. @font-face {font-family:"Barkentina";src:url('http://static.tumblr.com/m9qxvhq/CH5mhn23p/barkentina_1.otf');}
  80. @font-face {font-family:"Blake";src:url('http://static.tumblr.com/m9qxvhq/bnRmhedq1/blake2.ttf');}
  81. @font-face {font-family:"Blanch";src:url('http://static.tumblr.com/m9qxvhq/dqymsab72/blanch_condensed_light.otf');}
  82. @font-face {font-family:"Brain Flower"; src:url('http://static.tumblr.com/m9qxvhq/VWxms5ftr/brain_flower.ttf');}
  83. @font-face {font-family:"Buffet";src:url('http://static.tumblr.com/m9qxvhq/0V2mhl3je/buffet_script.ttf');}
  84. @font-face {font-family:"Decopolitan";src:url('http://static.tumblr.com/m9qxvhq/aaMmsac9z/decopolitan.otf');}
  85. @font-face {font-family:"Disturbance";src:url('http://static.tumblr.com/m9qxvhq/JRoms5g8c/disturbance.ttf');}
  86. @font-face {font-family:"Mayo";src:url('http://static.tumblr.com/m9qxvhq/dD6mhcpd0/mayonaise-condensed.otf');}
  87. @font-face {font-family:"Parisish";src:url('http://static.tumblr.com/m9qxvhq/GL4msacce/parisish.ttf');}
  88. @font-face {font-family:"Respective";src:url('http://static.tumblr.com/m9qxvhq/cf8msabff/respective_slanted.ttf');}
  89. @font-face {font-family:"Sachiko";src:url('http://static.tumblr.com/m9qxvhq/UTEmhi6ks/sachiko.ttf');}
  90. @font-face {font-family:"Serifiqo";src:url('http://static.tumblr.com/m9qxvhq/GZami3krf/serifiqo_4f_free_capitals.ttf');}
  91.  
  92.  
  93.  
  94. html {
  95. font: 100%/1.5em 'PT Sans', sans-serif;
  96. height:100%;
  97. }
  98.  
  99.  
  100. .et-wrapper {
  101. width: 100%;
  102. height: 100%;
  103. }
  104. .et-page:nth-child(1) {
  105. background: red;
  106. }
  107. .et-page:nth-child(2) {
  108. background: blue;
  109. }
  110. .et-page:nth-child(3) {
  111. background: purple;
  112. }
  113.  
  114. @media only screen and (min-width: 767px) {
  115. body {
  116. font-size: 1.125em; /* 18px / 16px */
  117. line-height: 1.7em;
  118. }
  119. header.band {
  120. background-image:url('http://static.tumblr.com/m9qxvhq/jtJms5b10/oxford.jpg');
  121. background-size: 100%;
  122. }
  123. header.band h1 {
  124. font-size: 3.25em; /*52 / 16*/
  125. }
  126. a.button {
  127. padding: .75em 1.5em;
  128. }
  129. }
  130.  
  131.  
  132. #container {
  133. width:100%;
  134. }
  135.  
  136.  
  137.  
  138. header.band {
  139. color: white;
  140. text-align: center;
  141. padding: 15% 0 25% 0;
  142. }
  143.  
  144.  
  145. a {
  146. text-decoration:none;
  147. color:inherit;
  148. }
  149.  
  150. h1, h2, h3 {
  151. font-family: {select:H Font};
  152. font-weight: 700;
  153. text-align: center;
  154. }
  155. header.band h1 {
  156. font-size: {text:Header Font Height};
  157. line-height: 1em;
  158. margin-bottom: 1em;
  159. font-family:{select:Header Font};
  160. color:{color:Header Font Colour};
  161. -webkit-transition-duration: 0.8s;
  162. -moz-transition-duration: 0.8s;
  163. -o-transition-duration: 0.8s;
  164. }
  165.  
  166. header.band h1:hover {
  167. -webkit-transition-duration: 0.8s;
  168. -moz-transition-duration: 0.8s;
  169. -o-transition-duration: 0.8s;
  170. }
  171.  
  172. a.button {
  173. left:0px;
  174. top:0px;
  175. background: #e33f0c;
  176. text-align: center;
  177. padding: .5em 1em;
  178. color: white;
  179. font-family:Baskerville;
  180. font-weight: none;
  181. font-style:italic;
  182. text-decoration: none;
  183. box-shadow: 0 0.2em 0 #ab3009;
  184. text-transform: none;
  185. letter-spacing: 0.1em;
  186. /*transition cross-browser stuff*/
  187. -webkit-transition: background 0.2s ease-out; /* Safari 3.2+, Chrome */
  188. -moz-transition: background 0.2s ease-out; /* Firefox 4-15 */
  189. -o-transition: background 0.2s ease-out; /* Opera 10.5–12.00 */
  190. transition: background 0.2s ease-out; /* Firefox 16+, Opera 12.50+ */
  191. }
  192.  
  193. .band.white {
  194. text-align:justify;
  195. }
  196.  
  197. footer.band.white {
  198. padding-bottom:50px;
  199. }
  200.  
  201.  
  202.  
  203.  
  204. a.button:hover {
  205. background: #ab3009;
  206. }
  207.  
  208.  
  209. .avatar, .avatar a, .avatar img, .about.avatar, .about.avatar a, .about.avatar img {
  210. visibility:visible;
  211. text-align:center;
  212. }
  213.  
  214. .avatar{
  215. padding-top:30px;
  216. }
  217.  
  218. .about {
  219.  
  220. }
  221.  
  222. .square img {
  223. border-radius: 0;
  224. }
  225.  
  226. .circle img {
  227. border-radius: 50%;
  228. }
  229.  
  230. .hidden img {
  231. display: none;
  232. }
  233.  
  234.  
  235. nav {
  236. -webkit-transition-duration: 0.8s;
  237. -moz-transition-duration: 0.8s;
  238. -o-transition-duration: 0.8s;
  239. opacity:0.5;
  240. font-size:11px;
  241. }
  242.  
  243. nav:hover{opacity:0.9;}
  244.  
  245. nav.right {
  246.  
  247. }
  248.  
  249. nav.left {
  250.  
  251.  
  252. }
  253.  
  254.  
  255.  
  256. .nav-arrows a {
  257. position: fixed;
  258. z-index: 2000;
  259. top: 45%;
  260.  
  261. }
  262.  
  263. .nav-arrows a:hover {
  264.  
  265. }
  266.  
  267. .nav-arrows a.nav-arrow-prev {
  268.  
  269. left:19px;
  270. {block:IndexPage}
  271. visibility:hidden;
  272. {/block:IndexPage}
  273.  
  274. {block:PermalinkPage}
  275. visibility:visible;
  276. {/block:PermalinkPage}
  277. left: 18px;
  278. border-right: none;
  279. border-top: none;
  280. }
  281.  
  282. .nav-arrows a.nav-arrow-next {
  283. right: 19px;
  284. border-left: none;
  285. border-bottom: none;
  286.  
  287. {block:IndexPage}
  288. visibility:visible;
  289. {/block:IndexPage}
  290.  
  291. {block:PermalinkPage}
  292. visibility:visible;
  293. {/block:PermalinkPage}
  294.  
  295.  
  296. }
  297.  
  298.  
  299.  
  300.  
  301.  
  302. #holder {
  303. padding-bottom:50px;
  304. }
  305.  
  306.  
  307. .box {
  308. height: 100%;
  309. float: left;
  310. background-color: #000;
  311. overflow: hidden;
  312. border-radius: 0px;
  313. box-shadow: 0px 1px 3px rgba(0,0,0);
  314. -webkit-transition-duration: 0.5s;
  315. -moz-transition-duration: 0.5s;
  316. -o-transition-duration: 0.5s;
  317. margin:{text:Post Margin};
  318. }
  319.  
  320.  
  321. .box:hover {
  322. background-color:black;
  323. opacity:0.8;
  324. }
  325.  
  326.  
  327.  
  328.  
  329. .box:hover {
  330. opacity:0.35;
  331. -webkit-transition-duration: 0.5s;
  332. -moz-transition-duration: 0.5s;
  333. -o-transition-duration: 0.5s;
  334. }
  335.  
  336.  
  337. .wrapper {
  338. display: block;
  339. width: 100%;
  340. height:480px;
  341. float: left;
  342. background-color:#000;
  343. margin:{text:Post Margin};
  344. }
  345.  
  346. .single .box {
  347. width: 100%;
  348. height:480px;
  349. }
  350.  
  351. a {
  352. border: 0;
  353. text-decoration: none;
  354. }
  355.  
  356. /* 2 IMAGES PER WRAPPER */
  357.  
  358. .left-smaller .box:first-child {width: 30%;}
  359. .left-smaller .box:last-child {width: 70%;}
  360. .left-small .box:first-child {width: 35%;}
  361. .left-small .box:last-child {width: 65%;}
  362. .left-sma .box:first-child {width: 40%;}
  363. .left-sma .box:last-child {width: 60%;}
  364. .left-s .box:first-child {width: 45%;}
  365. .left-s .box:last-child {width: 55%;}
  366. .left-same .box:first-child, .left-same .box:last-child {width: 50%;}
  367. .left-b .box:first-child {width: 55%;}
  368. .left-b .box:last-child {width: 45%;}
  369. .left-bi .box:first-child {width: 60%;}
  370. .left-bi .box:last-child {width: 40%;}
  371. .left-big .box:first-child {width: 65%;}
  372. .left-big .box:last-child {width: 35%;}
  373. .left-bigger .box:first-child {width: 70%;}
  374. .left-bigger .box:last-child {width: 30%;}
  375.  
  376. /* 3 IMAGES PER WRAPPER */
  377.  
  378. .big-small-small .box:nth-child(2),
  379. .big-small-small .box:last-child {width:26%;}
  380. .big-small-small .box:first-child {width:48%;}
  381. .small-big-small .box:first-child,
  382. .small-big-small .box:last-child {width:26%;}
  383. .small-big-small .box:nth-child(2) {width:48%;}
  384. .small-small-big .box:first-child,
  385. .small-small-big .box:nth-child(2) {width:26%;}
  386. .small-small-big .box:last-child {width:48%;}
  387. .b-s-s .box:nth-child(2),
  388. .b-s-s .box:last-child {width:30%;}
  389. .b-s-s .box:first-child {width:40%;}
  390. .s-b-s .box:first-child,
  391. .s-b-s .box:last-child {width:30%;}
  392. .s-b-s .box:nth-child(2) {width:40%;}
  393. .s-s-b .box:first-child,
  394. .s-s-b .box:nth-child(2) {width:30%;}
  395. .s-s-b .box:last-child {width:40%;}
  396. .three-same .box:first-child,
  397. .three-same .box:nth-child(2) {width:33%;}
  398. .three-same .box:last-child {width:34%;}
  399. .b-b-s .box:first-child,
  400. .b-b-s .box:nth-child(2) {width:35%;}
  401. .b-b-s .box:last-child {width:30%;}
  402. .b-s-b .box:first-child,
  403. .b-s-b .box:last-child {width:35%;}
  404. .b-s-b .box:nth-child(2) {width:30%;}
  405. .s-b-b .box:nth-child(2),
  406. .s-b-b .box:last-child {width:35%;}
  407. .s-b-b .box:first-child {width:30%;}
  408. .big-big-small .box:first-child,
  409. .big-big-small .box:nth-child(2) {width:37.5%;}
  410. .big-big-small .box:last-child {width:25%;}
  411. .big-small-big .box:first-child,
  412. .big-small-big .box:last-child {width:37.5%}
  413. .big-small-big .box:nth-child(2) {width:25%;}
  414. .small-big-big .box:nth-child(2),
  415. .small-big-big .box:last-child {width:37.5%;}
  416. .small-big-big .box:first-child {width:25%;}
  417.  
  418.  
  419.  
  420. .box.blue, .box.box-1, .box.box-2, .box.box-3, .box.box-4 {
  421. top:0px;
  422. height:0px;
  423. width:0px;
  424. visibility:hidden;
  425. }
  426.  
  427.  
  428. </style>
  429.  
  430. </head>
  431.  
  432.  
  433.  
  434.  
  435.  
  436. <body>
  437.  
  438.  
  439.  
  440.  
  441. <!--/ HEADER -->
  442.  
  443. {block:IndexPage}
  444. <header class="band" style="background-image:url('http://static.tumblr.com/m9qxvhq/ivUmscshy/sunset_and_lavender.jpg'); min-height:100%; background-size:cover;" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +85%;">
  445. <div class="container">
  446. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  447. <h1><a href="/">Overthink Ink</a></h1>
  448. <a class="button">Two summer salts of the imagination</a>
  449. </div><!--/ columns-->
  450. </div><!--/ container-->
  451. </header><!--/ band-->
  452. {/block:IndexPage}
  453.  
  454.  
  455. {block:PermalinkPage}
  456.  
  457. {block:Posts}
  458. {block:Photo}
  459.  
  460.  
  461. <header class="band" style="background-image:url('{PhotoURL-HighRes}');" data-0="background-position:0% 0%;" data-0-top-bottom="background-position:0% +65%;">
  462. <div class="container">
  463. <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">
  464.  
  465.  
  466.  
  467. <h1><a href="/">Overthink Ink</a></h1>
  468. <a class="button">Two summer salts of the imagination</a>
  469. </div><!--/ columns-->
  470. </div><!--/ container-->
  471. </header><!--/ band-->
  472.  
  473. {/block:Photo}
  474. {/block:Posts}
  475.  
  476. {/block:PermalinkPage}
  477.  
  478.  
  479.  
  480. <!-- POSTS -->
  481.  
  482.  
  483. {block:IndexPage}
  484. <div id="holder">
  485. <div class="box blue">
  486. </div>
  487. <div class="box box-1"><span>CSS</span></div>
  488. <div class="box box-2"></div>
  489. <div class="box box-3"></div>
  490. <div class="box box-4"><span>jQuery</span></div>
  491.  
  492.  
  493. {block:Posts}
  494. {block:Photo}
  495. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  496. {/block:Photo}
  497.  
  498.  
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505. {block:Photoset}
  506. {block:Photos}
  507. <div class="box" style="background-image:url('{PhotoURL-HighRes}'); background-position:center center; background-size:cover;"/> </div>
  508. {/block:Photos}
  509. {/block:Photoset}
  510.  
  511.  
  512.  
  513.  
  514.  
  515.  
  516. {/block:Posts}
  517.  
  518. {/block:IndexPage}
  519.  
  520.  
  521.  
  522.  
  523. <div class="band white">
  524. <div class="container">
  525. <div class="columns twelve offset-by-two">
  526. {block:PermalinkPage}
  527. {block:Posts}
  528. {block:Photo}
  529. {block:Caption}
  530. <div style="padding-top:50px;">{Caption}</div>
  531. {/block:Caption}
  532. {/block:Photo}
  533. {/block:Posts}
  534. {/block:PermalinkPage}
  535. </div><!--/ column-->
  536. </div><!--/ container-->
  537. </div><!--/ main-->
  538.  
  539.  
  540.  
  541.  
  542.  
  543.  
  544. <nav id="nav-arrows" class="nav-arrows">
  545.  
  546. {block:NextPage}
  547. <nav class="nav-arrows right"><a class="nav-arrow-next" href="{NextPage}" id="myLink">▶</a></nav>
  548. {/block:NextPage}
  549.  
  550. {block:PreviousPage}
  551. <nav class="nav-arrows left"><a class="nav-arrow-previous" href="{PreviousPage}" id="myLink">◀</a></nav>
  552. {/block:PreviousPage}
  553.  
  554.  
  555.  
  556.  
  557.  
  558.  
  559. {block:PermalinkPage}
  560. {block:PermalinkPagination}
  561. {block:NextPost}<nav class="left"><a class="nav-arrow-prev" href="{NextPost}">◀</a></nav>{/block:NextPost}
  562. {block:PreviousPost}<nav class="right"><a class="nav-arrow-next" href="{PreviousPost}">▶</a></nav>
  563. {/block:PreviousPost}
  564. {/block:PermalinkPagination}
  565. {/block:PermalinkPage}
  566.  
  567. </nav>
  568.  
  569.  
  570.  
  571.  
  572.  
  573. <footer class="band white">
  574. <div class="container">
  575. <div class="columns eight">
  576.  
  577. <h3>Mek 's a Brew Lad</h3>
  578. <p><strong>A pint 'o mild. Tell thi summat for nowt th'art nesh thee chuffin' nora eeh appens as maybe. Ey up is that thine god's own county. Be reet be reet nah then michael palin bloomin' 'eck gerritetten.</strong> Ah'll learn thi soft southern pansy. Any rooad soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped
  579.  
  580.  
  581. </div><!--/ column-->
  582.  
  583.  
  584.  
  585. <div class="columns eight last">
  586. <h3>Mek 's a Brew Lad</h3>
  587. <p><strong>A pint 'o mild. Tell thi summat for nowt th'art nesh thee chuffin' nora eeh appens as maybe. Ey up is that thine god's own county. Be reet be reet nah then michael palin bloomin' 'eck gerritetten.</strong> Ah'll learn thi soft southern pansy. Any rooad soft southern pansy nobbut a lad mardy bum shu' thi gob face like a slapped
  588. </div><!--/ column-->
  589. </div><!--/ container-->
  590. </footer><!--/ main-->
  591.  
  592.  
  593.  
  594. </div><!-- /st-content -->
  595. </div><!-- /st-pusher -->
  596.  
  597. </div><!-- /st-container -->
  598.  
  599.  
  600.  
  601.  
  602.  
  603. <script type="text/javascript" src="http://static.tumblr.com/m9qxvhq/jbpms5i27/skrollr.js"></script>
  604. <script type="text/javascript">
  605. skrollr.init();
  606. </script>
  607.  
  608.  
  609.  
  610.  
  611.  
  612.  
  613.  
  614.  
  615.  
  616.  
  617.  
  618.  
  619.  
  620.  
  621.  
  622.  
  623. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  624.  
  625. <script>
  626. /*! Fades out the whole page when clicking links */
  627. $('a').click(function(e) {
  628. e.preventDefault();
  629. newLocation = this.href;
  630. $('body').fadeOut('slow', newpage);
  631. });
  632. function newpage() {
  633. window.location = newLocation;
  634. }
  635.  
  636. $(document).ready(function(){
  637.  
  638. /*! Fades in whole page on load */
  639. $('body').css('display', 'none');
  640. $('body').fadeIn(1000);
  641.  
  642. });
  643.  
  644.  
  645. /*! Reloads page on every visit */
  646. function Reload() {
  647. try {
  648. var headElement = document.getElementsByTagName("head")[0];
  649. if (headElement && headElement.innerHTML)
  650. headElement.innerHTML += "<meta http-equiv=\"refresh\" content=\"1\">";
  651. }
  652. catch (e) {}
  653. }
  654. /*! Reloads on every visit in mobile safari */
  655. if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
  656. window.onpageshow = function(evt) {
  657. if (evt.persisted) {
  658. document.body.style.display = "none";
  659. location.reload();
  660. }
  661. };
  662. }
  663. </script>
  664.  
  665.  
  666.  
  667.  
  668.  
  669.  
  670. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  671.  
  672. <script>
  673. $(document).ready(function() {
  674.  
  675. // Some Variables
  676. var noBoxes = $('#holder .box');
  677. var randNumber, prev;
  678. var i = 0;
  679.  
  680. //Run a while loop to go through all the boxes
  681. while(i < noBoxes.length) {
  682.  
  683. // ensure the random number is different every time
  684. do {
  685. randNumber = Math.floor(Math.random() * (4 - 2) + 2); // the random number
  686. } while(randNumber === prev);
  687. prev = randNumber;
  688.  
  689. // If i is 0, it's the first set of boxes, so wrap the first 5 in a wrapper (the header)
  690. if(i == 0) {
  691. noBoxes.slice(0, 0).wrapAll("<div class='wrapper'></div>");
  692. i+=5;
  693. }
  694. // Otherwise..
  695. else {
  696. // If i is 5 it's the second set of boxes, so ensure that the random number isn't 5.
  697. if(i == 5) {
  698. newRand = Math.floor(Math.random() * (3 - 2) + 2);
  699. noBoxes.slice(i, i+newRand).wrapAll("<div class='wrapper'></div>");
  700. i+=newRand;
  701. }
  702. // Then just run the loop normally
  703. else {
  704. noBoxes.slice(i, i+randNumber).wrapAll("<div class='wrapper'></div>");
  705. i+=randNumber;
  706. }
  707.  
  708. }
  709. }
  710.  
  711. // Since the wrappers have been made, run this function for each
  712. $('.wrapper').each(function() {
  713.  
  714. // Get the number of children in this wrapper
  715. var noChildren = $(this).children('.box').length;
  716.  
  717. // An array of the classes we're going to use
  718. var cssClass = [
  719. 'single', // 1 IMAGE PER WRAPPER
  720.  
  721. // 2 IMAGES PER WRAPPER
  722. 'left-smaller', 'left-small', 'left-sma', 'left-s', 'left-same', 'left-b', 'left-bi', 'left-big', 'left-bigger',
  723.  
  724. // 3 IMAGES PER WRAPPER
  725. 'big-small-small', 'small-big-small', 'small-small-big', 'b-s-s', 's-b-s', 's-s-b', 'three-same', 'b-b-s', 'b-s-b', 's-b-b', 'big-big-small', 'big-small-big', 'small-big-big'
  726.  
  727.  
  728.  
  729. ];
  730.  
  731. // If there is only 1 child then add this class
  732. if(noChildren == 1) {
  733.  
  734. $(this).addClass(cssClass[0]);
  735.  
  736. }
  737. else if(noChildren == 2) {
  738.  
  739. // 2 per wrapper, so get a number between 1 and 2, and add this class to this wrapper
  740. var rand = Math.floor(Math.random() * (10 - 1) + 1);
  741. $(this).addClass(cssClass[rand]);
  742.  
  743. }
  744. else if(noChildren == 3) {
  745.  
  746. // 3 per wrapper, same as before
  747. var rand = Math.floor(Math.random() * (23 - 10) + 10);
  748. $(this).addClass(cssClass[rand]);
  749.  
  750. }
  751.  
  752.  
  753.  
  754. });
  755. });
  756. </script>
  757.  
  758.  
  759.  
  760.  
  761.  
  762.  
  763.  
  764. <script type="text/javascript">
  765. //http://detectmobilebrowsers.com/ + tablets
  766. (function(a) {
  767. if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
  768. {
  769. //Add skrollr mobile on mobile devices.
  770. document.write('<script type="text/javascript" src="js/skrollr.mobile.min.js"><\/script>');
  771. }
  772. })(navigator.userAgent||navigator.vendor||window.opera);
  773. </script>
  774.  
  775.  
  776.  
  777. </body>
  778. </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!