Advertisement
kawaiibuu

Gemstone

Mar 17th, 2015
2,133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.12 KB | None | 0 0
  1. <!--
  2.  
  3. Gemstone
  4.  
  5. Created on Firefox
  6. Optimized for Firefox, Chrome, and Mobile
  7. Started March 11 2015
  8. All scripts made by softwaring.tumblr.com
  9.  
  10. Created by softwaring.tumblr.com
  11. Download at jubileethemes.tumblr.com
  12.  
  13. -->
  14. <!DOCTYPE HTML>
  15. <html><head>
  16. <meta charset="utf-8">
  17. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  18. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  19.  
  20. <title>
  21. {Title}
  22. </title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}
  27. <meta name="description" content="{MetaDescription}" />
  28. {/block:Description}
  29.  
  30. {block:Hidden}
  31. <meta name="color:Background" content="#FFF"/>
  32. <meta name="color:Background top" content="#D1D0EB"/>
  33. <meta name="color:Background bottom" content="#fcebd5"/>
  34. <meta name="color:Content borders" content="#FFF"/>
  35. <meta name="color:Content background" content="#FFF"/>
  36. <meta name="color:Links" content="#525252"/>
  37. <meta name="color:Text" content="#525252"/>
  38. <meta name="color:Title text" content="#525252"/>
  39. <meta name="color:Sidebar text" content="#525252"/>
  40. <meta name="color:Selected text" content="#E9CED2"/>
  41. <meta name="color:Selected text background" content="#FFF"/>
  42.  
  43. <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
  44.  
  45. <meta name="if:Captions" content="0"/>
  46. <meta name="if:Floating sidebar" content="0"/>
  47. <meta name="if:Infinite scroll" content="0"/>
  48. <meta name="if:Profile tab" content="1"/>
  49.  
  50. <meta name="image:Sidebar" content=""/>
  51. <meta name="image:Background" content=""/>
  52.  
  53. <meta name="select:Background style" content="default" title="Default"/>
  54. <meta name="select:Background style" content="fullscreen-background" title="Fullscreen Background"/>
  55. <meta name="select:Background style" content="pattern-background" title="Tiled Background"/>
  56. <meta name="select:Background style" content="gradient" title="Gradient"/>
  57.  
  58. <meta name="select:Content bg opacity" content="1" title="Solid" />
  59. <meta name="select:Content bg opacity" content="0.5" title="Half" />
  60. <meta name="select:Content bg opacity" content="0.25" title="Semi-Transparent" />
  61. <meta name="select:Content bg opacity" content="0" title="Transparent" />
  62.  
  63. <meta name="select:Photo effect opacity" content="1" title="Solid" />
  64. <meta name="select:Photo effect opacity" content="0.5" title="Half" />
  65. <meta name="select:Photo effect opacity" content="0.25" title="Semi-Transparent" />
  66. <meta name="select:Photo effect opacity" content="0" title="Transparent" />
  67.  
  68. <meta name="text:Content width" content="400"/>
  69. <meta name="text:Long about" content="Put more info here!"/>
  70. <meta name="text:Read more message" content="Continue reading..."/>
  71. {/block:Hidden}
  72.  
  73. <style>
  74. iframe#tumblr_controls {
  75. opacity: 0.4!important; top: 10px !important;
  76. margin: 0 0 0 0; right: 10px !important;
  77. position: fixed !important;
  78. -webkit-filter: invert(100%)!important;
  79. -moz-filter: invert(100%)!important;
  80. -o-filter: invert(100%)!important;
  81. -ms-filter: invert(100%)!important;
  82. filter: invert(100%)!important; }
  83.  
  84. body {
  85. font: 12px/1.25em {font:Body};
  86. color: {color:text};
  87. -webkit-font-smoothing: antialiased;
  88. -moz-osx-font-smoothing: grayscale;
  89.  
  90. cursor: default; }
  91.  
  92. .default {
  93. background:{color:background}; }
  94.  
  95. .gradient {
  96. background:fixed;
  97. background-image: -o-linear-gradient(bottom, {color:background bottom}, {color:background top} );
  98. background-image: -moz-linear-gradient(bottom, {color:background bottom}, {color:background top});
  99. background-image: -webkit-linear-gradient(bottom, {color:background bottom}, {color:background top});
  100. background-image: -ms-linear-gradient(bottom, {color:background bottom}, {color:background top});
  101. background-image: linear-gradient(bottom, {color:background bottom}, {color:background top}); }
  102.  
  103. .pattern-background {
  104. background: url({image:background})top left fixed repeat; }
  105.  
  106. .fullscreen-background {
  107. background: url({image:background})center center fixed no-repeat;
  108. -webkit-background-size: cover;
  109. -moz-background-size: cover;
  110. -o-background-size: cover;
  111. background-size: cover; }
  112.  
  113. a { text-decoration: none; color: {color:links}; cursor: pointer; }
  114.  
  115. h1 { text-transform: uppercase; font-weight: 300; font-size: 16px;
  116. text-align: center; margin: -10px -10px 10px -10px;
  117. border-bottom: 1px solid {color:Content borders}; padding: 15px; }
  118. h2 { text-transform: uppercase; font-weight: 300; font-size: 14px;
  119. text-align: center; }
  120.  
  121. blockquote { border-left: 1px solid {color:Content borders};
  122. padding: 0px 10px; margin: 2px 10px; }
  123.  
  124. .label { text-transform: uppercase; font-weight: 300; font-size: 14px; padding: 10px; font-style: italic;
  125. border-bottom: 1px solid {color:Content borders};
  126. margin: 10px -25px 10px; }
  127.  
  128. #wrapper {
  129. width: calc({text:Content width}px + 20px);
  130. min-width: calc(200px + 20px); max-width: calc(1200px + 20px);
  131. margin: 37px auto -25px;
  132. padding: 25px 0;
  133. border: 1px solid {color:Content borders}; border-top: none; border-bottom: none;
  134. background: rgba({RGBcolor:Content background}, {select:Content bg opacity}); }
  135.  
  136. #post {
  137. width: calc({text:Content width}px - 20px);
  138. min-width: calc(200px - 20px); max-width: calc(1200px - 20px);
  139. margin: 25px 10px;
  140. padding: 10px;
  141. position: relative; overflow: hidden;
  142. border: 1px solid {color:Content borders};
  143. background: rgba({RGBcolor:Content background}, {select:Content bg opacity}); }
  144.  
  145. .imagperma {
  146. position: absolute;
  147. width: calc(100% - 20px);
  148. bottom: 0px;
  149. padding: 5px 10px;
  150. border-top: 1px solid {color:Content borders};
  151. background: rgba({RGBcolor:Content background}, .75);
  152. text-transform: uppercase; font-size: 10px;
  153. letter-spacing: 1px; text-align: center;
  154. opacity: 0;
  155. -webkit-transition: all 0.2s ease-out;
  156. -moz-transition: all 0.2s ease-out;
  157. transition: all 0.2s ease-out; }
  158.  
  159. #post:hover .imagperma {
  160. opacity: 1;
  161. -webkit-transition: all 0.2s ease-out;
  162. -moz-transition: all 0.2s ease-out;
  163. transition: all 0.2s ease-out; }
  164.  
  165. #post li { list-style: square; padding: 0px 10px; margin: 2px 5px; }
  166.  
  167. .textpermalinks {
  168. padding: 10px; opacity: 0;
  169. border-top: 1px solid {color:Content borders};
  170. background: rgba({RGBcolor:Content background}, .75);
  171. position: absolute;
  172. margin: -25px -10px;
  173. width: calc(100% - 20px);
  174. text-transform: uppercase; font-size: 10px;
  175. letter-spacing: 1px; -webkit-transition: all 0.2s ease-out;
  176. -moz-transition: all 0.2s ease-out;
  177. transition: all 0.2s ease-out; }
  178.  
  179. #post:hover .textpermalinks {
  180. opacity: 1;
  181. -webkit-transition: all 0.2s ease-out;
  182. -moz-transition: all 0.2s ease-out;
  183. transition: all 0.2s ease-out; }
  184.  
  185. .textpermalinks #reblog {
  186. float: right;
  187. border-left: 1px solid {color:Content borders};
  188. padding: 10px 0px 10px 10px; margin-top: -10px; }
  189.  
  190. .qs { font-size: 10px; text-transform: uppercase; text-align: right; }
  191.  
  192. #screen {
  193. z-index: -999999;
  194. height: calc(100% + 30px); width: calc(100% + 30px);
  195. position: fixed; opacity: {select:Photo effect opacity};
  196. -webkit-filter: blur(5px); -moz-filter: blur(5px);
  197. -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
  198. top: -10px; left: -10px;
  199. right: -10px; bottom: -10px;
  200. background-image:url('http://assets.tumblr.com/images/x.gif?v=1')
  201. center center fixed no-repeat; background-size: cover; }
  202.  
  203. .video { padding-bottom: 25px; }
  204. .video iframe { width: 100%!important; height: 100%!important; }
  205. :focus { outline:none; }
  206. ::-moz-focus-inner { border:0; }
  207. .photoset a:first-child { display:block !important;
  208. border:0 !important; padding:0 !important; }
  209. .photoset a { display:none; }
  210. ::selection { background: {color:selected text background};
  211. color: {color:selected text}; }
  212. ::-moz-selection { background: {color:selected text background};
  213. color: {color:selected text}; }
  214. ::-webkit-selection { background: {color:selected text background};
  215. color: {color:selected text}; }
  216.  
  217. .topnavigation {
  218. width: calc({text:Content width}px - 20px);
  219. min-width: calc(200px - 20px); max-width: calc(1200px - 20px);
  220. position:fixed; top: 0px; padding: 0px 20px;
  221. margin-left: -1px;
  222. border: 1px solid {color:Content borders}; border-top: none;
  223. background: rgba({RGBcolor:Content background}, {select:Content bg opacity});
  224. z-index: 1000; }
  225.  
  226. .topnavigation .menu {
  227. border-top: 1px solid {color:Content borders};
  228. padding: 10px 10px; margin: 0px -20px -20px;
  229. height: 35px; text-transform: uppercase; font-size: 10px;
  230. text-align: center; letter-spacing: 1px;
  231. color: {color:Title text}; }
  232.  
  233. #profile {display: none; position:absolute; width: calc(100% - 10px);}
  234.  
  235. .hidden {
  236. width: calc(100% - 20px);
  237. height: 150px; display: none ;
  238. overflow: auto;
  239. position:relative;
  240. text-align: left;
  241. padding: 10px; }
  242.  
  243. .posi {
  244. border-top: 1px solid {color:Content borders};
  245. border-bottom: 1px solid {color:Content borders};
  246. width: 150px; text-align: center;
  247. padding: 10px; margin: 12px -10px 0px; }
  248.  
  249. .side {
  250. position: fixed; width: 150px;
  251. padding: 10px; color: {color:sidebar text};
  252. border: 1px solid {color:Content borders};
  253. background: rgba({RGBcolor:Content background}, {select:Content bg opacity});
  254. {block:iffloatingsidebar}
  255. top: 100px;
  256. margin-left: -200px;
  257. {/block:iffloatingsidebar}
  258. {block:ifnotfloatingsidebar}
  259. border-right: none;
  260. margin-left: -171px;
  261. top: 36px;
  262. {/block:ifnotfloatingsidebar} }
  263.  
  264. .side img {
  265. width: 112%;
  266. margin: -10px -11px 7px -10px;
  267. border-bottom: 1px solid {color:Content borders}; }
  268.  
  269. .side a { color: {color:sidebar text}; }
  270.  
  271. .side li {
  272. display: inline-block;
  273. text-transform: uppercase;
  274. padding: 0px 2.5px;
  275. font: 8px calibri; letter-spacing: 2px; }
  276.  
  277. .side .description {
  278. padding: 10px 10px 0px;
  279. margin: 0px -10px; }
  280.  
  281. .aud {
  282. background: white;
  283. padding: 10px; margin: -10px -10px 10px; }
  284.  
  285. .prag {
  286. position:absolute;
  287. bottom: -30px; right: 0px;
  288. text-align: center; }
  289.  
  290. .prag li {
  291. border: 1px solid {color:Content borders};
  292. background: rgba({RGBcolor:Content background}, {select:Content bg opacity}); padding: 5px; }
  293.  
  294. .asker-question {
  295. margin: -10px -10px 10px -10px;
  296. border-bottom: 1px solid {color:Content borders}; padding: 15px;
  297. }
  298.  
  299. .caption { {block:ifnotcaptions}display:none;{/block:ifnotcaptions} padding: 10px; }
  300.  
  301.  
  302. @media screen and (max-width: 480px) {
  303.  
  304. html { -webkit-text-size-adjust: none;
  305. background: {color:background}; }
  306.  
  307. body { font: 12px/1.25em {font:Body}; color: {color:text};
  308. background: transparent!important; }
  309.  
  310. #wrapper { width: 90%; margin-top: -20px; }
  311.  
  312. #post { width: 90%!important; }
  313.  
  314. #post img { width: 100%!important; }
  315.  
  316. .side { display:none!important; }
  317.  
  318. .topnavigation { display:none!important; } }
  319.  
  320. {CustomCSS}
  321. </style>
  322. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  323. <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
  324. </head>
  325. <body class="{select:background style}">
  326. <div id="screen"></div>
  327.  
  328. <div id="wrapper">
  329.  
  330. <div class="topnavigation">
  331. <div class="hidden">
  332. <div id="profile">
  333. {text:long about}
  334. <!-- this is your pop up profile you can add images or links here or use the provided meta tags -->
  335. </div> </div>
  336. <div class="menu"> {title} </div>
  337. </div>
  338.  
  339. <div class="side">
  340. {block:ifsidebarimage}
  341. <center>
  342. <img src="{image:sidebar}"/>
  343. </center>
  344. {/block:ifsidebarimage}
  345. <center>
  346. <a href="/"><li>home</li></a>
  347. <a href="/ask"><li>ask</li></a>
  348. <a href="/archive"><li>index</li></a>
  349. <a href="http://jubileethemes.tumblr.com" title="theme credit"><li>html</li></a>
  350. </center>
  351. {block:ifprofiletab}
  352. <div class="posi">
  353. <a href="#" class="profile"><li>profile</li></a>
  354. <a class="profile2" style="display: none;"><li>close</li></a>
  355. </div>
  356. {/block:ifprofiletab}
  357. {Block:Description}
  358. <div class="description">
  359. {description}
  360. </div>
  361. {/Block:Description}
  362.  
  363. {block:ifnotinfinitescroll}
  364. {block:Pagination}
  365. <div class="prag">
  366. {block:PreviousPage}
  367. <a href="{PreviousPage}">
  368. <li>back</li>
  369. </a>
  370. {/block:PreviousPage}
  371.  
  372. {block:NextPage}
  373. <a href="{NextPage}">
  374. <li>forward</li>
  375. </a>
  376. {/block:NextPage}
  377. </div>
  378. {/block:Pagination}
  379. {/block:ifnotinfinitescroll}
  380.  
  381. {block:ifinfinitescroll}
  382. {block:Pagination}
  383. <div class="prag">
  384. {block:NextPage}
  385. <div id="clicker" style="color: {color:Sidebar text}; cursor: pointer;">
  386. <li>load previous posts</li>
  387. <a href="{NextPage}" id="nextpage" style="display: none;">next</a>
  388. {/block:NextPage}
  389. </div></div>
  390. {/block:Pagination}
  391. {/block:ifinfinitescroll}
  392. </div>
  393.  
  394. {block:Posts}
  395. {block:ContentSource}
  396. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  397. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  398. {/block:SourceLogo}
  399. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  400. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  401. <div id="post" style="
  402. {block:Panorama}padding: 0px; width: {text:Content width}px; min-width: 200px;{/block:Panorama}
  403. {block:Photo}padding: 0px; width: {text:Content width}px; min-width: 200px;{/block:Photo}
  404. {block:Photoset}padding: 0px; width: {text:Content width}px; min-width: 200px;{/block:Photoset}
  405. {block:Video}padding: 0px; width: {text:Content width}px; min-width: 200px;{/block:Video} ">
  406.  
  407. {block:Text}
  408. <div class="text">
  409.  
  410. {block:Title}
  411. <h1>{Title}</h1>
  412. {/block:Title}
  413.  
  414. {Body}
  415.  
  416. {block:More}
  417. <a href="{Permalink}">{text:read more message}</a>
  418. {/block:More}
  419.  
  420. </div>
  421. {/block:Text}
  422.  
  423. {block:Photo}
  424. {block:IndexPage}<div class="imagperma">
  425. <a href="{Permalink}">{NoteCount}</a>
  426. <a href="{ReblogURL}" target="_blank" class="details">/ reblog</a>
  427. </div>{/block:IndexPage}
  428. {block:PermalinkPage} {LinkOpenTag} {/block:PermalinkPage}
  429.  
  430. <img src="{PhotoURL-HighRes}" style="width: 100%; margin-bottom: -2px;" alt="{PhotoAlt}" onmouseover="$(this).changebackground('{PhotoURL-HighRes}')"/>
  431.  
  432. {block:PermalinkPage} {LinkCloseTag} {/block:PermalinkPage}
  433. {/block:Photo}
  434.  
  435. {block:Panorama}
  436. {block:PermalinkPage} {LinkOpenTag} {/block:PermalinkPage}
  437.  
  438. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" onmouseover="$(this).changebackground('{PhotoURL-Panorama}')"/>
  439.  
  440. {block:PermalinkPage} {LinkCloseTag} {/block:PermalinkPage}
  441. {/block:Panorama}
  442.  
  443. {block:Quote}
  444. <div class="text">
  445.  
  446. <h1>{Quote}</h1>
  447.  
  448. {block:Source}
  449. <div class="qs">{Source}</div>
  450. {/block:Source}
  451. </div>
  452. {/block:Quote}
  453.  
  454. {block:Link}
  455. <div class="text">
  456. <h1><a href="{URL}" class="link" {Target}>{Name}</a></h1>
  457.  
  458. {block:Description}
  459. {Description}
  460. {/block:Description}
  461. </div>
  462. {/block:Link}
  463.  
  464. {block:Chat}
  465. <div class="text">
  466. {block:Title}
  467. <h1>{Title}</h1>
  468. {/block:Title}
  469.  
  470. {block:Lines}
  471. <li class="{Alt} user_{UserNumber}" style="list-style:none;">
  472. {block:Label}
  473. <div class="label">{Label}</div>
  474. {/block:Label}
  475. <center>{Line}</center>
  476. </li>
  477. {/block:Lines}
  478. </div>
  479. {/block:Chat}
  480.  
  481. {block:Video}
  482. <div class="video">{VideoEmbed-700}</div>
  483. {/block:Video}
  484.  
  485. {block:Audio}
  486. <div class="aud">
  487. <center>{AudioPlayerWhite}</center>
  488. </div>
  489. <div class="qs">
  490. {block:TrackName} {TrackName} /{/block:TrackName}
  491. {block:Artist} {Artist} {/block:Artist}
  492. {block:PlayCount}/ {PlayCountWithLabel} {/block:PlayCount}
  493. </div>
  494. {/block:Audio}
  495.  
  496. {block:Answer}
  497. <div class="text">
  498.  
  499. <h1>{lang:Asker asked}</h1>
  500.  
  501.  
  502. <div class="asker-question">
  503. {Question}
  504. </div>
  505.  
  506. {block:Answerer}
  507. <h1>
  508. {Answerer} {lang:Replies}
  509. </h1>
  510. <div class="answerer-answer">
  511. {Answer}
  512. </div>
  513. {/block:Answerer}
  514.  
  515. <div style="padding: 10px;">{Replies}</div>
  516. </div>
  517. {/block:Answer}
  518.  
  519. {block:Photoset}
  520. {block:IndexPage}<div class="imagperma">
  521. <a href="{Permalink}">{NoteCount}</a>
  522. <a href="{ReblogURL}" target="_blank" class="details">/ reblog</a>
  523. </div>{/block:IndexPage}
  524. <div class="photoset">
  525. {block:Photos}
  526. <img src="{PhotoURL-HighRes}" style="width: 100%; margin-bottom: -3px;"
  527. onmouseover="$(this).changebackground('{PhotoURL-HighRes}')"
  528. {block:Caption}alt="{Caption}"{/block:Caption}>
  529. {/block:Photos}
  530. </div>
  531. {/block:Photoset}
  532.  
  533. {block:IndexPage}
  534.  
  535. {block:Caption}
  536. <div class="caption">{Caption}</div>
  537. {/block:Caption}
  538.  
  539. <div class="textpermalinks" style="
  540. {block:Panorama}display: none;{/block:Panorama}
  541. {block:Photo}display: none;{/block:Photo}
  542. {block:Photoset}display: none;{/block:Photoset}
  543. {block:Video}position: absolute; margin-top: -25px; width: calc(100% - 20px); margin-left: 0px; padding: 5px 10px; background: transparent;{/block:Video}
  544. ">
  545. <a href="{Permalink}">{ShortMonth} {DayofMonth} {Year}</a>
  546. <a href="{ReblogURL}" target="_blank" class="details" id="reblog" style="{block:Video}border-left: none;{/block:Video}">reblog</a>
  547. </div>
  548. {/block:IndexPage}
  549.  
  550. {block:PermalinkPage}
  551. {block:Caption}
  552. <div class="caption">{Caption}</div>
  553. {/block:Caption}
  554. <center style="font: 10px calibri; text-transform: uppercase;">{TimeAgo} on {Month} {DayofMonth}{DayofMonthSuffix} {Year}<br>
  555. {NoteCountWithLabel}<br>
  556. {block:HasTags}
  557. {block:Tags}<a href="{TagURL}" title="see more posts tagged {Tag}">#{Tag}</a> {/block:Tags}<br>
  558. {/block:HasTags}
  559. {block:RebloggedFrom}
  560. VIA / <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  561. SRC / <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  562. </center>
  563. {block:PermalinkPagination}
  564. <div style="margin-top: 5px; border-top: 1px solid {color:Content borders}; padding: 5px 5px 0px 5px; text-align: left;">
  565. {block:PreviousPost}
  566. <a href="{PreviousPost}">
  567. {lang:Previous post}
  568. </a>
  569. {/block:PreviousPost}
  570.  
  571. {block:NextPost}
  572. <a href="{NextPost}" style="float: right;">
  573. {lang:Next post}
  574. </a>
  575. {/block:NextPost}
  576. </div>
  577. {/block:PermalinkPagination}
  578. {block:PostNotes}<div style="margin-top: 5px; border-top: 1px solid {color:Content borders}; padding-top: 5px; text-align: justify;">{PostNotes}</div>{/block:PostNotes}
  579. </div>
  580. {/block:PermalinkPage}
  581.  
  582. </div>
  583. {/block:Posts}
  584. <script>
  585. $(document).ready(function() {
  586. $.fn.changebackground = function(msg) { $("#screen").css("background-image", "url("+msg+")"); };
  587. });
  588. $("a.profile" ).click(function() {
  589. $("#wrapper").animate({"margin-top":"207px"},400);
  590. $(".hidden").slideDown(400);
  591. $("#profile").fadeIn(800);
  592. $("a.profile2").fadeIn(200);
  593. $("a.profile").fadeOut(200);
  594. });
  595. $("a.notes").click(function(){
  596. $(".pagenotes").animate({opacity:"toggle", height: "toggle"}, 300);
  597. });
  598. $("a.profile2" ).click(function() {
  599. $("#wrapper").animate({"margin-top":"37px"},800);
  600. $(".hidden").slideUp(800);
  601. $("#profile").fadeOut(400);
  602. $("a.profile").fadeIn(200);
  603. $("a.profile2").fadeOut(200);
  604. });
  605. </script>
  606. <script src="http://static.tumblr.com/mqkrxog/293nfwao1/masonry.js"></script>
  607. <script src="http://static.tumblr.com/mqkrxog/7g3nfwaof/masonry1.js"></script>
  608. <script src="http://static.tumblr.com/mqkrxog/y5Ongpsyr/infinite.js"></script>
  609. <script type="text/javascript">
  610. $(document).ready(function() {
  611. var $container = $('#wrapper');
  612. $container.imagesLoaded( function(){
  613. $container.masonry({
  614. itemSelector: '#post'
  615. });
  616. });
  617. $container.infinitescroll({
  618. loading: {
  619. selector: null,
  620. speed: 'fast',
  621. start: undefined
  622. },
  623. navSelector : 'a#nextpage',
  624. nextSelector : 'a#nextpage',
  625. itemSelector : '#post',
  626. bufferPx : 1250
  627. },
  628. function( newElements ) {
  629. var $newElems = $( newElements );
  630. $newElems.hide();
  631. $newElems.imagesLoaded(function(){
  632. $container.masonry( 'appended', $newElems, {isAnimated: true}, function(){$newElems.animate({opacity:'toggle' }, 800);});
  633. });
  634. });
  635. jQuery(window).unbind('.infscr');
  636. jQuery('#clicker').click(function(){
  637. jQuery('#wrapper').infinitescroll('retrieve');
  638. return false;
  639. });
  640. });
  641. </script
  642. </body>
  643. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement