bychloethemes

You've Got Something Theme - by Chloe

Aug 11th, 2015
875
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.72 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. You've Got Something Theme by Chloe | @dontbrag | @bychloethemes
  12. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistribute.
  13.  
  14. For html help go to @htmlqueens
  15.  
  16. -->
  17. <meta name="image:Background" content="http://static.tumblr.com/b879f6f077133de33d3aa4b0f01ab261/yxfeliq/9K0nsiqdp/tumblr_static_bt8btiyybpk40wkk8kso0gock.png" />
  18.  
  19. <meta name="color:Background" content="#fff" />
  20. <meta name="color:Scrollbar" content="#000" />
  21. <meta name="color:Scrollbar Background" content="#9cdfed" />
  22. <meta name="color:Blog Border" content="#9cdfed" />
  23. <meta name="color:Header Text" content="#000" />
  24. <meta name="color:Header Links" content="#000" />
  25. <meta name="color:Text" content="#000" />
  26. <meta name="color:Links" content="#666" />
  27. <meta name="color:Post Backgrounds" content="#fff" />
  28. <meta name="color:Post Borders" content="#666" />
  29. <meta name="color:Post Accent" content="#eee" />
  30.  
  31. <meta name="if:Tiled Background" content="1"/>
  32. <meta name="if:Sign Off Asks" content="" />
  33.  
  34. <meta name="text:Link 1" content="" />
  35. <meta name="text:URL 1" content="" />
  36. <meta name="text:Link 2" content="" />
  37. <meta name="text:URL 2" content="" />
  38. <meta name="text:Link 3" content="" />
  39. <meta name="text:URL 3" content="" />
  40. <meta name="text:Ask Sign Off" content="your name xx" />
  41.  
  42. {block:Description}
  43. <meta name="description" content="{MetaDescription}" />
  44. {/block:Description}
  45. <meta charset="utf-8">
  46. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  47. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  48. <title>{text:Tab Title}</title>
  49. <link rel="shortcut icon" href="{Favicon}">
  50. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  51. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  52. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  53. <link href='//fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
  54. <link href='//fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
  55. <style type="text/css">
  56. ::-webkit-scrollbar {
  57. background-color: {color:Scrollbar Background};
  58. height: 5px;
  59. width: 5px;
  60. }
  61. ::-webkit-scrollbar-thumb {
  62. background-color: {color:Scrollbar};
  63. width: 5px;
  64. height: 5px;
  65. }
  66. #tumblr_controls {
  67. right:12px!important;
  68. top:12px!important;
  69. position:fixed!important;
  70. margin: 0 0 0 0!important;
  71. }
  72. body {
  73. background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}
  74. no-repeat center center fixed;
  75. -webkit-background-size: cover;
  76. -moz-background-size: cover;
  77. -o-background-size: cover;
  78. background-size: cover;
  79. {/block:IfNotTiledBackground}
  80. {block:IfTiledBackground}
  81. repeat fixed;
  82. {/block:IfTiledBackground}
  83. color: {color:Text};
  84. font-family: 'Raleway', sans-serif;
  85. font-size: 12px;
  86. margin: 0;
  87. padding: 0;
  88. }
  89. iframe, img, embed, object, video {
  90. max-width: 100%;
  91. }
  92. img {
  93. height: auto;
  94. width: auto;
  95. vertical-align:middle;
  96. }
  97. blockquote {
  98. border-left:1px solid {color:Post Borders};
  99. margin:0 0 0 15px;
  100. padding:0 0 0 5px;
  101. }
  102. a:link, a:visited {
  103. color:{color:Links};
  104. text-decoration:none;
  105. }
  106. a:hover, a:active {
  107. text-decoration:line-through;
  108. }
  109. a:focus {
  110. outline:none;
  111. }
  112. b, strong {
  113. font-weight:600;
  114. }
  115. hr {
  116. height:1px;
  117. background:{color:Post Borders};
  118. border:0;
  119. }
  120. h1 {
  121. font-weight:400;
  122. }
  123. cite {
  124. margin-top:3px;
  125. display:block;
  126. text-align:right;
  127. }
  128. #topping {
  129. position:fixed;
  130. z-index:999999999;
  131. width:100%;
  132. height:10px;
  133. left:0px;
  134. top:0px;
  135. }
  136. #lefting {
  137. position:fixed;
  138. z-index:999999999;
  139. width:10px;
  140. height:100%;
  141. left:0px;
  142. top:0px;
  143. }
  144. #righting {
  145. position:fixed;
  146. z-index:999999999;
  147. width:10px;
  148. height:100%;
  149. right:0px;
  150. top:0px;
  151. }
  152. #botting {
  153. position:fixed;
  154. z-index:999999999;
  155. width:100%;
  156. height:10px;
  157. left:0px;
  158. bottom:0px;
  159. }
  160. #botting, #righting, #lefting, #topping {
  161. background:{color:Blog Border};
  162. }
  163. .credit {
  164. width:14px;
  165. height:13px;
  166. color: {color:Post Borders};
  167. position:fixed;
  168. bottom: 15px;
  169. right: 15px;
  170. line-height: 14px;
  171. font-size:12px;
  172. text-transform: uppercase;
  173. padding:3px 4px;
  174. overflow: hidden;
  175. z-index:999999999999999999;
  176. text-align:left;
  177. -webkit-transition: all 0.5s ease-in-out;
  178. -moz-transition: all 0.5s ease-in-out;
  179. -o-transition: all 0.5s ease-in-out;
  180. transition: all 0.5s ease-in-out;
  181. }
  182. .fa-diamond {
  183. right:4px;
  184. position:absolute;
  185. }
  186. .credit:hover {
  187. width:126px;
  188. background:#000;
  189. color:#fff;
  190. -webkit-transition: all 0.5s ease-in-out;
  191. -moz-transition: all 0.5s ease-in-out;
  192. -o-transition: all 0.5s ease-in-out;
  193. transition: all 0.5s ease-in-out;
  194. }
  195. .credit a {
  196. color:#fff;
  197. text-decoration: none;
  198. }
  199. .credit .mine {
  200. opacity:0;
  201. visibility:hidden;
  202. }
  203. .credit:hover .mine {
  204. opacity: 1;
  205. visibility: visible;
  206. -webkit-transition: all 0.5s ease-in-out 0.5s;
  207. -moz-transition: all 0.5s ease-in-out 0.5s;
  208. -o-transition: all 0.5s ease-in-out 0.5s;
  209. transition: all 0.5s ease-in-out 0.5s;
  210. }
  211. .header {
  212. width:600px;
  213. padding:10px;
  214. margin:30px auto;
  215. color:{color:header Text};
  216. text-align:center;
  217. }
  218. .header h1 {
  219. margin:0;
  220. text-align:center;
  221. font-size:30px;
  222. }
  223. .header a {
  224. color:{color:header Links};
  225. }
  226. ul.navlinks {
  227. padding:0;
  228. list-style-type:none;
  229. text-align:center;
  230. margin:0;
  231. }
  232. ul.navlinks li {
  233. display:inline-block;
  234. margin:0;
  235. }
  236. ul.navlinks li:after {
  237. content:' · ';
  238. margin:0 3px;
  239. }
  240. ul.navlinks li:first-child:before {
  241. content:' · ';
  242. margin:0 3px;
  243. }
  244. .content {
  245. {block:IndexPage}
  246. width:1007px;
  247. {/block:IndexPage}
  248. {block:PermalinkPage}
  249. width:542px;
  250. {/block:PermalinkPage}
  251. margin:20px auto 0 auto;
  252. }
  253. article {
  254. {block:IndexPage}
  255. width:250px;
  256. margin:30px;
  257. padding:10px;
  258. {/block:IndexPage}
  259. {block:PermalinkPage}
  260. width:500px;
  261. margin:20px 0;
  262. padding:20px;
  263. {/block:PermalinkPage}
  264. background:{color:Post Backgrounds};
  265. border:1px solid {color:Post Borders};
  266. box-shadow:3px 3px rgba(200,200,200,0.5);
  267. }
  268. article h1 {
  269. margin:0;
  270. }
  271. article p {
  272. margin:3px 0;
  273. }
  274. article ul {
  275. padding:0;
  276. margin-left:30px;
  277. }
  278. .photoset {
  279. margin-bottom:-1px;
  280. }
  281. .short h1 {
  282. font-size:2em;
  283. }
  284. .medium h1 {
  285. font-size:1.5em;
  286. }
  287. .long h1 {
  288. font-size:1em;
  289. }
  290. ul.chat-list {
  291. list-style-type:none;
  292. padding:0;
  293. margin:0;
  294. }
  295. ul.chat-list li {
  296. margin:3px 0;
  297. padding:3px 0;
  298. }
  299. ul.chat-list li.even {
  300. background:{color:Post Accent};
  301. }
  302. span.label {
  303. font-weight:bold;
  304. }
  305. .album-art img {
  306. {block:IndexPage}
  307. width:70px;
  308. height:70px;
  309. {/block:IndexPage}
  310. {block:PermalinkPage}
  311. height:500px;
  312. width:500px;
  313. text-align:center;
  314. {/block:PermalinkPage}
  315. }
  316. .audio-info {
  317. position:absolute;
  318. left:88px;
  319. top:10px;
  320. line-height:16px;
  321. min-height:70px;
  322. border-left:1px solid {color:Post Borders};
  323. padding-left:5px;
  324. margin-bottom:10px;
  325. }
  326. .tumblr_audio_player {
  327. {block:IndexPage}
  328. height: 30px;
  329. width: 30px;
  330. position: absolute;
  331. top: 30px;
  332. left: 30px;
  333. border-radius: 50%;
  334. opacity: 0.8;
  335. {/block:IndexPage}
  336. {block:PermalinkPage}
  337. width:500px;
  338. height:40px;
  339. {/block:PermalinkPage}
  340. }
  341. .asks, .asks2 {
  342. margin-bottom:10px;
  343. }
  344. .asks {
  345. float:left;
  346. margin-right:15px;
  347. }
  348. .asks2 {
  349. float:right;
  350. margin-left:15px;
  351. }
  352. .question, .question2 {
  353. margin-bottom:10px;
  354. background:{color:Post Accent};
  355. padding:4px;
  356. {block:PermalinkPage}
  357. line-height:18px;
  358. {/block:PermalinkPage}
  359. }
  360. .question {
  361. {block:IndexPage}
  362. margin-left:55px;
  363. {/block:IndexPage}
  364. {block:PermalinkPage}
  365. margin-left:83px;
  366. {/block:PermalinkPage}
  367. }
  368. .question:before {
  369. content:"";
  370. width: 0;
  371. height: 0;
  372. border-style: solid;
  373. z-index:7;
  374. border-color: transparent {color:Post Accent} transparent transparent;
  375. position:absolute;
  376. {block:IndexPage}
  377. border-width: 4px 10px 4px 0px;
  378. left:55px;
  379. {/block:IndexPage}
  380. {block:PermalinkPage}
  381. border-width: 7px 11px 7px 0px;
  382. left:92px;
  383. {/block:PermalinkPage}
  384. }
  385. .question2 {
  386. {block:IndexPage}
  387. margin-right:55px;
  388. {/block:IndexPage}
  389. {block:PermalinkPage}
  390. margin-right:83px;
  391. {/block:PermalinkPage}
  392. }
  393. .question2:before {
  394. content:"";
  395. width: 0;
  396. height: 0;
  397. border-style: solid;
  398. z-index:7;
  399. border-color: transparent transparent transparent {color:Post Accent};
  400. position:absolute;
  401. {block:IndexPage}
  402. border-width: 4px 0px 4px 10px;
  403. right:55px;
  404. {/block:IndexPage}
  405. {block:PermalinkPage}
  406. border-width: 7px 0px 7px 11px;
  407. right:92px;
  408. {/block:PermalinkPage}
  409. }
  410. .question2 p {
  411. display:inline;
  412. margin:0;
  413. }
  414. #signature {
  415. font-size: 1.4em;
  416. font-family: 'Nothing You Could Do', cursive;
  417. text-align: right;
  418. }
  419. ul.permas {
  420. padding:0;
  421. list-style-type:none;
  422. margin:0;
  423. text-align:center;
  424. height:0;
  425. overflow:hidden;
  426. font-size:10px;
  427. -webkit-transition: all 0.4s ease-in-out;
  428. -moz-transition: all 0.4s ease-in-out;
  429. -o-transition: all 0.4s ease-in-out;
  430. transition: all 0.4s ease-in-out;
  431. }
  432. ul.permas li {
  433. display:inline-block;
  434. }
  435. article:hover ul.permas {
  436. height:14px;
  437. margin-top:10px;
  438. -webkit-transition: all 0.4s ease-in-out;
  439. -moz-transition: all 0.4s ease-in-out;
  440. -o-transition: all 0.4s ease-in-out;
  441. transition: all 0.4s ease-in-out;
  442. }
  443. ol.notes {
  444. list-style-type: none;
  445. margin:0 5px 0 0;
  446. padding:0;
  447. }
  448.  
  449. ol.notes li.note {
  450. padding:0;
  451. text-align:left;
  452. line-height:16px;
  453. width:100%;
  454. border:0;
  455. border-radius:0;
  456. background:transparent;
  457. border-bottom:1px solid {color:Post Borders};
  458. padding-bottom:8px;
  459. padding-top:8px;
  460. }
  461. ol.notes li.note:last-child {
  462. border-bottom:0;
  463. }
  464. ol.notes li.note img.avatar {
  465. display:none;
  466. }
  467.  
  468. ol.notes li.note span.action {
  469. font-weight: normal;
  470. }
  471.  
  472. ol.notes li.note .answer_content {
  473. font-weight: normal;
  474. }
  475. #infscr-loading {
  476. position:absolute;
  477. bottom:-10px;
  478. width:200px;
  479. margin-left:50%;
  480. left:-100px;
  481. text-align:center;
  482. color:{color:Post Borders};
  483. }
  484. #infscr-loading img{
  485. display:none;
  486. }
  487. </style>
  488. </head>
  489. <body>
  490. <div id="topping"></div>
  491. <div id="lefting"></div>
  492. <div id="righting"></div>
  493. <div id="botting"></div>
  494. <div class="header">
  495. <h1><a href="/">{Title}</a></h1>
  496. {block:Description}<p>{Description}</p>{/block:Description}
  497. <ul class="navlinks">
  498. <li><a href="/">home</a></li>
  499. {block:AskEnabled}
  500. <li><a href="/ask">ask</a></li>
  501. {/block:AskEnabled}
  502. {block:SubmissionsEnabled}
  503. <li><a href="/submit">submit</a></li>
  504. {/block:SubmissionsEnabled}
  505. {block:HasPages}
  506. {block:Pages}
  507. <li><a href="{URL}">{Label}</a></li>
  508. {/block:Pages}
  509. <br>
  510. {/block:HasPages}
  511. {block:IfLink1}
  512. <li><a href="{text:URL 1}">{text:Link 1}</a></li>
  513. {/block:IfLink1}
  514. {block:IfLink2}
  515. <li><a href="{text:URL 2}">{text:Link 2}</a></li>
  516. {/block:IfLink2}
  517. {block:IfLink3}
  518. <li><a href="{text:URL 3}" >{text:Link 3}</a></li>
  519. {/block:IfLink3}
  520. <li><a href="/archive">archive</a></li>
  521. <li><a href="http://dontbrag.tumblr.com" target="_blank">theme</a></li>
  522. </ul>
  523. {block:Pagination}
  524. <div class="pagination" style="visibility:hidden;">
  525. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  526. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  527. </div>
  528. {/block:Pagination}
  529. </div>
  530. <div class="content">
  531. {block:Posts}
  532. {block:PermalinkPagination}
  533. <article>
  534. <center>Posted on {DayOfWeek} the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year} at {12Hour}:{Minutes}{AmPm} with {NoteCountWithLabel}.</center>
  535. </article>
  536. {/block:PermalinkPagination}
  537. <article>
  538. {block:Text}
  539. <div class="text">
  540. {block:Title}<h1>{Title}</h1>{block:Title}
  541. <p>{Body}</p>
  542. </div>
  543. {/block:Text}
  544.  
  545. {block:Photo}
  546. <div class="photo">
  547. <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  548. </div>
  549. {/block:Photo}
  550.  
  551. {block:Photoset}
  552. <div class="photoset">
  553. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  554. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  555. </div>
  556. {/block:Photoset}
  557.  
  558. {block:Quote}
  559. <div class="quote {Length}">
  560. <h1>&ldquo;{Quote}&rdquo;</h1>
  561. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  562. </div>
  563. {/block:Quote}
  564.  
  565. {block:Link}
  566. <div class="link">
  567. <h1>&#8627;<a href="{URL}" {Target}>{Name}</a></h1>
  568. {block:IndexPage}
  569. {block:Description}<p>{Description}</p>{/block:Description}
  570. {/block:IndexPage}
  571. </div>
  572. {/block:Link}
  573.  
  574. {block:Chat}
  575. <div class="chat">
  576. {block:Title}<h1>{Title}</h1>{/block:Title}
  577. <ul class="chat-list">
  578. {block:Lines}
  579. <li class="{Alt}">
  580. {block:Label}<span class="label">{Label}</span>{/block:Label}
  581. {Line}</li>
  582. {/block:Lines}
  583. </ul>
  584. </div>
  585. {/block:Chat}
  586.  
  587. {block:Audio}
  588. <div class="audio">
  589. {block:AlbumArt}
  590. <div class="album-art">
  591. <img src="{AlbumArtURL}">
  592. </div>
  593. {/block:AlbumArt}
  594. {block:IndexPage}
  595. <div class="audio-info" {block:AudioEmbed}style="display:none;"{/block:AudioEmbed}>
  596. Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  597. Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  598. Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
  599. Plays: {FormattedPlayCount}</div>
  600. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  601. {/block:IndexPage}
  602. {block:PermalinkPage}
  603. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  604. {/block:PermalinkPage}
  605. {block:IndexPage}
  606. {block:AudioEmbed}{AudioEmbed-250}{/block:AudioEmbed}
  607. {/block:IndexPage}
  608. {block:PermalinkPage}
  609. {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
  610. {/block:PermalinkPage}
  611. </div>
  612. {/block:Audio}
  613.  
  614. {block:Video}
  615. <div class="video">
  616. {block:IndexPage}{Video-250}{/block:IndexPage}
  617. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  618. </div>
  619. {block:Video}
  620.  
  621. {block:Answer}
  622. <div class="answer">
  623. <img class="asks" src="{block:IndexPage}{AskerPortraitURL-40}{/block:IndexPage}{block:PermalinkPage}{AskerPortraitURL-64}{/block:PermalinkPage}">
  624. <div class="question">{lang:Asker asked 2}: {Question}</div>
  625. <hr style="visibility:hidden;width:100%;margin:0;">
  626. {block:Answerer}
  627. <img class="asks2" src="{block:IndexPage}{AnswererPortraitURL-40}{/block:IndexPage}{block:PermalinkPage}{AnswererPortraitURL-64}{/block:PermalinkPage}">
  628. <div class="question2">{Answerer} replied: {Answer}</div>
  629. <hr style="visibility:hidden;width:100%;">
  630. {/block:Answerer}
  631. {Replies}
  632. {block:IfSignOffAsks}
  633. <div id="signature" {block:Answerer}style="display:none;"{/block:Answerer}>-{text:Ask Sign Off}</div>
  634. {/block:IfSignOffAsks}
  635. </div>
  636. {/block:Answer}
  637.  
  638. {block:IndexPage}
  639. <ul class="permas">
  640. <li><a href="{Permalink}">{NoteCount}</a></li>
  641. <li>&middot;</li>
  642. <li><a href="{ReblogURL}">Reblog</a></li>
  643. {block:RebloggedFrom}<li>&middot;</li>
  644. <li><a href="{ReblogParentURL}">Via</a></li>
  645. {/block:RebloggedFrom}
  646. {block:ContentSource}<li>&middot;</li>
  647. <li><a href="{SourceURL}">Source</a></li>
  648. {/block:ContentSource}
  649. </ul>
  650. {/block:IndexPage}
  651. </article>
  652. {block:PermalinkPage}
  653. {block:Photo}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photo}
  654.  
  655. {block:Photoset}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photoset}
  656.  
  657. {block:Link}{block:Description}<article>{Description}</article>{/block:Description}{/block:Link}
  658.  
  659. {block:Audio}
  660. <article>
  661. Artist: <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  662. Title: <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  663. Album: <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br>
  664. Plays: {FormattedPlayCount}{/block:PlayCount}</article>
  665. {block:Caption}<article>{Caption}</article>{/block:Caption}
  666. {/block:Audio}
  667.  
  668. {block:Video}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Video}
  669.  
  670. {block:HasTags}
  671. <article id="tags">
  672. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
  673. </article>{/block:HasTags}
  674. {block:PostNotes}
  675. <article id="notes" class="postnotes">
  676. {PostNotes}
  677. </article>
  678. {/block:PostNotes}
  679. {/block:PermalinkPage}
  680. {/block:Posts}
  681. </div>
  682. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  683. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  684. <script type="text/javascript">
  685.  
  686. $(function(){ // shorthand document.ready()
  687. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  688. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  689. var lbArray = []; // create blank array.
  690. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  691. lbArray.push(arrayContents); // push the set into the array.
  692. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  693. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  694. });
  695. });
  696. });
  697. </script>
  698. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  699. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  700. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  701. <!--Code for infinite scroll and grid layout-->
  702. <script>
  703. (function() {
  704. var $tumblelog = $('.content');
  705.  
  706. $tumblelog.imagesLoaded( function(){
  707. $tumblelog.masonry({
  708. columnWidth: function( containerWidth ) {
  709. return containerWidth / 100;
  710. }
  711. });
  712. });
  713. $tumblelog.infinitescroll({
  714. navSelector : ".pagination",
  715. nextSelector : ".pagination a:last",
  716. itemSelector : "article",
  717. bufferPx : 50,
  718. done : "",
  719. loading: {
  720. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  721. img : "",
  722. msg: null,
  723. msgText: "<p><i class='fa fa-spinner fa-pulse fa-3x'></i></p>"
  724. },
  725. },
  726. function( newElements ) {
  727. var $newElems = $( newElements ).css({ opacity: 0 });
  728. $newElems.imagesLoaded(function(){
  729. $newElems.animate({ opacity: 1 });
  730. $tumblelog.masonry( 'appended', $newElems);
  731. });
  732. $(function(){ // shorthand document.ready()
  733. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  734. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  735. var lbArray = []; // create blank array.
  736. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  737. lbArray.push(arrayContents); // push the set into the array.
  738. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  739. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  740. });
  741. });
  742. });
  743.  
  744. }
  745. );
  746. })();
  747. </script>
  748. <div class="credit">
  749. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  750. </div>
  751. </body>
  752. </html>
Advertisement
Add Comment
Please, Sign In to add comment