API tools faq
paste
enchantingly

Book Recs 01

enchantingly
Aug 24th, 2015
982
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5. Book Recs 01 by Elowen (theghostoflove.tumblr.com)
  6.  
  7. Credit stays intact, please. If you get stuck, feel free to message me! Comments and suggestions are welcome.
  8. -->
  9.  
  10. <head>
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  16.  
  17. <style type="text/css">
  18.  
  19. /*********************THINGS YOU MIGHT WANT TO EDIT*********************/
  20.  
  21. ::selection {
  22. color: #fff /**colour of highlight text**/;
  23. background-color: #000/**colour of highlight background**/;
  24. }
  25. /**Same below as above**/
  26. ::-moz-selection {color: #fff;background-color: #000;}
  27. ::-webkit-selection {color: #fff;background-color: #000;}
  28.  
  29. ::-webkit-scrollbar {width: 6px; height:auto; background: #000;/**colour of scrollbar background**/}
  30. ::-webkit-scrollbar-button {background :#efefef} /**colour of up and down buttons**/
  31. ::-webkit-scrollbar-thumb:vertical {background: #fff;/**colour of scrollbar**/}
  32. ::-webkit-scrollbar-thumb:horizontal {background: transparent;}
  33.  
  34. h3 /**TITLE OF TAGS PAGE**/ {
  35. font-family: 'Clicker Script'; /**font of title**/
  36. font-size: 36px; /**font size of title**/
  37. color: #fcb68f; /**colour of title **/
  38. }
  39.  
  40. body {
  41. background-color: #fcb68f; /**Background colour of main page**/
  42. font: 12px cambria; /**general font size and font-family**/
  43. background-image: url('https://imageurlhere.jpg');
  44. }
  45.  
  46. #fic {
  47. background: #FFA878; /**background colour of main book review**/
  48. color: black; /**font colour of book review**/
  49. }
  50. #fic h1 a {
  51. color: black; /**font colour of title book review**/
  52. background: #FC9860; /**background colour of title book review**/
  53. font:13px 'Times New Roman'; /**font size and font-family of title book review**/
  54. }
  55. #fic h1 a:hover {
  56. border-bottom:1px solid #a51212; /**colour of the underline on title book review**/
  57. }
  58.  
  59. /**These are the main tags you see before clicking 'More+' **/
  60. #tags {
  61. border:1px solid #000; /**underline of link selected**/
  62. background-color:#FFA878; /**background colour of the main tags**/
  63. }
  64. #tags a {
  65. color:black; /**font colour of tag links**/
  66. border-bottom:1px solid transparent;
  67. }
  68. #tags a:hover {border-bottom:1px solid red;/**font colour of tag links on hover**/}
  69. #tags li a.selected {border-bottom:1px solid black; /**what selected page looks like**/}
  70.  
  71. #tags #hidden a:hover {
  72. color:white; /**colour of hidden tag links on hover**/
  73. border-bottom:none;
  74. }
  75. #tags #hidden li a.selected {
  76. color:white; /**colour of selected tag link**/
  77. border:none;
  78. }
  79.  
  80. #hidden {
  81. border-top:1px solid #000; /**top border of hidden links**/
  82. background:#FC9860; /**background colour of hidden links**/
  83. color:red; /**font colour of non-hyperlink text**/
  84. }
  85.  
  86. #hcont #header {
  87. border-bottom:1px solid #4D0101; /**colour of header border**/
  88. border-right:1px solid #4D0101;
  89. border-left:1px solid #4D0101;
  90. background-color:#a51212; /**header background colour**/
  91. }
  92.  
  93.  
  94. #links a {color:#fcb68f; /**colour of header links**/}
  95. #links a:hover {color:#fff; /**colour of header links on hover**/}
  96.  
  97. #container {
  98. background-color:#a51212; /**background colour of the thing that contains all the book recs**/
  99. }
  100.  
  101. /******************THINGS THAT YOU PROBABLY SHOULDN'T EDIT******************/
  102. /************************SCROLL DOWN TO THE <DIVS>**************************/
  103.  
  104. h3 {
  105. text-align:center;
  106. font-weight:normal;
  107. padding-top:27px;
  108. padding-bottom:25px;
  109. width:1100px;
  110. }
  111.  
  112. body {
  113. position: absolute;
  114. margin: 0;
  115. height: 100%; width: 100%;
  116. }
  117.  
  118. a {text-decoration:none;outline:none;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  119.  
  120. a:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  121.  
  122. #tags {
  123. margin-left:-100px;
  124. width:1088px;
  125. padding-top:10px;
  126. margin-top:-218px;
  127. -webkit-transition: all .6s ease-out;
  128. -moz-transition: all .6s ease-out;
  129. transition: all .6s ease-out;
  130. }
  131. #tags a {
  132. display:inline-block;
  133. padding:5px 10px;
  134. margin:0 5px;
  135. text-transform:uppercase;
  136. }
  137. #tags li {display:inline;list-style: none;}
  138. #tags ul {list-style: none;}
  139.  
  140. #hidden {
  141. overflow-y:hidden;
  142. padding:10px;
  143. letter-spacing:1px;
  144. text-transform:uppercase;
  145. -webkit-transition: all .6s ease-out;
  146. -moz-transition: all .6s ease-out;
  147. transition: all .6s ease-out;
  148. }
  149.  
  150. #hidden a {padding:6px;border-bottom:none;}
  151.  
  152. /* ----- HEADER ---- */
  153. #hcont {width:100%;top:-45px;margin: 0 auto; text-align:center;position:absolute;}
  154.  
  155. #hcont #header {
  156. z-index:999999;
  157. text-align:center;
  158. margin-top:0px;
  159. width:1088px;
  160. height:110px;
  161. }
  162.  
  163. #links {z-index:10000;margin-top:-50px;}
  164.  
  165. #container {
  166. width:1090px;
  167. margin-left:-100px;
  168. }
  169.  
  170. /* ----- SORT LINKS -----*/
  171. /* ----- FICS ----- */
  172.  
  173. #stories {
  174. position: absolute;
  175. top: 320px; left:50%;
  176. width: 890px;
  177. margin-left: -445px;
  178. text-align: center;
  179. }
  180.  
  181. .story {
  182. float: left;
  183. margin: 15px;
  184. width: 250px;
  185. display: inline-block;
  186. -webkit-transition: all .6s ease-out;
  187. -moz-transition: all .6s ease-out;
  188. transition: all .6s ease-out;
  189. }
  190.  
  191. #fic img {
  192. display:block;
  193. margin-left:0px;
  194. height:160px;
  195. width:103px;
  196. }
  197. #fictext {
  198. min-height:160px;
  199. width:210px;
  200. position:absolute;
  201. margin-top:-160px;
  202. margin-left:110px;
  203. text-align:justify;
  204. }
  205. #fic {padding:5px;width:320px;}
  206. #fic h1 a {
  207. display:block;
  208. margin:-17px -20px -10px -5px;
  209. letter-spacing:1px;
  210. width:326px;
  211. padding:5px 2px;
  212. line-height:20px;
  213. text-align:center;
  214. border-bottom:1px solid transparent;
  215. -webkit-transition: all .6s ease-out;
  216. -moz-transition: all .6s ease-out;
  217. transition: all .6s ease-out;
  218. }
  219.  
  220. #fic li {
  221. display:inline-block;
  222. list-style:none;
  223. max-width:110px; height: 0px;
  224. padding:0px 5px;
  225. line-height:15px;
  226. overflow:hidden;
  227. margin:10px 0 5px 0px;
  228. -webkit-transition: all .4s ease-out;
  229. -moz-transition: all .4s ease-out;
  230. transition: all .4s ease-out;
  231. }
  232. #fic:hover li{height:15px;}
  233.  
  234. #E {
  235. z-index:99999999999;
  236. font-weight:bold; font-size:14px; font-family:'Montez';
  237. text-align:center;
  238. position:fixed;
  239. bottom:5px; right:5px;
  240. }
  241. #E a {
  242. display:inline-block;
  243. height:20px; width:20px;
  244. background-color:#000;
  245. color:#FFF;
  246. }
  247. #E a:hover {
  248. border-radius:50%;
  249. background-color:#FFF;
  250. color:#000;
  251. }
  252.  
  253. </style>
  254.  
  255. <link href='https://fonts.googleapis.com/css?family=Montez|Clicker+Script' rel='stylesheet' type='text/css'>
  256.  
  257. <script src="https://assets.tumblr.com/assets/scripts/tumblelog.js?_v=6d92575a6d1cddce7fefd8b949f1b4a4"></script>
  258.  
  259. </head>
  260.  
  261. <body>
  262.  
  263. <div id="hcont"><center><div id="header"><h3>TITLE OF PAGE HERE</h3>
  264. <div id="links"> <!--copy and paste a line to add more links-->
  265. <a href="/">home</a> /
  266. <a href="/ask">message</a> /
  267. <a href="/link1">link 1</a> /
  268. <a href="/link2">link 2</a> /
  269. <a href="/link3">link 3</a>
  270. </div> <!--links-->
  271. </div></center></div>
  272.  
  273.  
  274. <div id="stories">
  275.  
  276. <!----- begin sorting links --->
  277. <div class="links">
  278. <div id="tags">
  279. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  280. <center>
  281.  
  282. <!---- these are the ones that will show up on the main page. to add a new "tag", copy this below:
  283.  
  284. <li><a href="#filter" data-option-filter=".tag">tagname</a></li>
  285.  
  286. you can put in anything with one word, or hyphenated. e.g.:
  287.  
  288. <li><a href="#filter" data-option-filter=".angsty">angst</a></li>
  289. <li><a href="#filter" data-option-filter=".high-school">high school</a></li>
  290.  
  291. you will not see the "tag" on the main page, so you can use your own keywords that you'll recognize, like hs - high school or ship names.
  292.  
  293. --->
  294. <li><a href="#filter" data-option-filter="*" class="selected">all books</a></li>
  295.  
  296. <!----- ENTER THEM HERE! ---->
  297. <li><a href="#filter" data-option-filter=".ya">Young Adult</a></li>
  298. <li><a href="#filter" data-option-filter=".childrens">Children's</a></li>
  299. <li><a href="#filter" data-option-filter=".adult">Adult</a></li>
  300. <li><a href="#filter" data-option-filter=".crime">Crime</a></li>
  301. <li><a href="#filter" data-option-filter=".romance">romance</a></li>
  302. <!----- END FILTERS ---->
  303. <li><a id="buttonsend" class="t" style="cursor:pointer; display:inline-block"><span class="t">more +</span><span class="t" style="display:none">less -</span></a></li>
  304. </ul>
  305.  
  306.  
  307. <div id="hidden">
  308. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  309. <center>
  310.  
  311. <!--- these are the hidden ones that you click on "more" to get ---->
  312. Genres:
  313.  
  314. <li><a href="#filter" data-option-filter=".historical-fiction">historical fiction</a></li>
  315. <li><a href="#filter" data-option-filter=".thriller">thriller</a></li>
  316. <li><a href="#filter" data-option-filter=".mystery">mystery</a></li>
  317. <li><a href="#filter" data-option-filter=".drama">drama</a></li>
  318. <li><a href="#filter" data-option-filter=".chick-lit">chick lit</a></li><br>
  319. <li><a href="#filter" data-option-filter=".humour">humour</a></li>
  320. <li><a href="#filter" data-option-filter=".dystopian">dystopian</a></li>
  321. <li><a href="#filter" data-option-filter=".fantasy">fantasy</a></li>
  322. <li><a href="#filter" data-option-filter=".classics">classics</a></li>
  323. <li><a href="#filter" data-option-filter=".adventure">adventure</a></li>
  324. <br>
  325. authors:
  326. <li><a href="#filter" data-option-filter=".jkr">J. K. Rowling</a></li>
  327. <li><a href="#filter" data-option-filter=".john-green">John Green</a></li>
  328. <li><a href="#filter" data-option-filter=".ei">Eva Ibbotson</a></li>
  329. <br>
  330. rating:
  331. <li><a href="#filter" data-option-filter=".3">3 Star</a></li>
  332. <li><a href="#filter" data-option-filter=".4">4 Star</a></li>
  333. <li><a href="#filter" data-option-filter=".5">5 Star</a></li>
  334. <br>
  335.  
  336.  
  337. </ul>
  338.  
  339. </div>
  340. </div>
  341. </div>
  342.  
  343. <!----- end sorting links --->
  344.  
  345. <div id="container" class="clearfix">
  346.  
  347.  
  348. <!--PUT YOUR TAGS IN THE LINE BELOW, E.G. WHERE STORY YA ROMANCE 4 IS. "Story" is default so when someone clicks "all books", they all show up. -->
  349. <div id="fic" class="story ya romance 4">
  350. <!--REPLACE THE GOODREADS LINK BELOW WITH THE GOODREADS LINK YOU WANT-->
  351. <h1><a href="https://www.goodreads.com/book/show/636197.Lucas" target="_blank" title="Goodreads"><i>Lucas <!--book title here--></i> by Kevin Brooks <!--author title here--></a></h1>
  352. <!--IMAGE LINK OF BOOK COVER BELOW - REPLACE WITH THE ONE CURRENTLY THERE, MAKING SURE IT STARTS WITH HTTPS:// -->
  353. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1348122998l/636197.jpg">
  354. <div id="fictext">
  355. <!--Blurb here. May have to shorten it if it overflows the given space-->
  356. Things start to happen when Lucas arrives on the island. Who is he? Where does he come from? What does he want? And why do other people hate him so much? Caitlin's life changes from the moment she sees him. Lucas is the strangest, most beautiful, most unforgettable boy she has ever seen.
  357. </div>
  358. <!--The tags below aren't for the code, but for the person on your page. Make sure every tag starts with <li> and ends with </li> -->
  359. <!--I've noticed the star system is bug-y. You can replace the stars below with asterisks if it plays up for you, or copy-and-paste the stars from a different paragraph in this code. -->
  360. <li>Young Adult</li> <li>Romance</li> <li style="color:#e7e404">★★★★</li>
  361. </div>
  362.  
  363. <!--Do the same above with the rest of the books. I've given examples if it helps to replace the information below. -->
  364. <div id="fic" class="story ya 5">
  365. <h1><a href="https://www.goodreads.com/book/show/4327066-the-perks-of-being-a-wallflower" target="_blank" title="Goodreads"><i>Perks of Being a Wallflower</i> by Stephen Chbosky</a></h1>
  366. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1350048460l/4327066.jpg">
  367. <div id="fictext">
  368. Charlie is a freshman. Shy, introspective, socially awkward, he is a wallflower, caught between trying to live his life and trying to run from it. Charlie is attempting to navigate his way: the world of first dates and mixed tapes, family dramas and new friends, when all one requires is that perfect song on that perfect drive to feel infinite. But Charlie can't stay on the sideline forever. Standing on the fringes of life offers a unique perspective.
  369. </div>
  370. <li>Young Adult</li> <li style="color:#e7e404">★★★★★</li>
  371. </div>
  372.  
  373.  
  374. <div id="fic" class="story ya fantasy dystopian adventure 4">
  375. <h1><a href="https://www.goodreads.com/book/show/12091570-the-hunger-games" target="_blank" title="Goodreads"><i>The Maze Runner</i> by James Dashner</a></h1>
  376. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1367952922l/12382940.jpg">
  377. <div id="fictext">
  378. When the doors of the lift crank open, the only thing Thomas remembers is his first name. But he's not alone. He's surrounded by boys who welcome him to the Glade - a walled encampment at the centre of a bizarre and terrible stone maze. Like Thomas, the Gladers don't know why or how they came to be there - or what's happened to the world outside.
  379. </div>
  380. <li>Young Adult</li> <li>Fantasy</li> <li>Adventure</li> <li>Dystopian</li> <li style="color:#e7e404">★★★★</li>
  381. </div>
  382.  
  383.  
  384. <div id="fic" class="story crime mystery adult jkr 4">
  385. <h1><a href="https://www.goodreads.com/book/show/17684326-the-cuckoo-s-calling" target="_blank" title="Goodreads"><i>A Cuckoo's Calling</i> by Robert Galbraith</a></h1>
  386. <img src="https://d.gr-assets.com/books/1375699998l/17684326.jpg">
  387. <div id="fictext">
  388. Detective Cormoran Strike investigates a supermodel's suicide. John Bristow walks through his door with a story: His sister, the legendary supermodel Lula Landry, known to her friends as the Cuckoo, famously fell to her death a few months earlier. The police ruled it a suicide, but John refuses to believe that. The case plunges Strike into the world of multimillionaire beauties and desperate designers, and introduces him to every variety of pleasure.
  389. </div>
  390. <li>Crime</li> <li>Mystery</li> <li>Adult</li> <li style="color:#e7e404">★★★★★</li>
  391. </div>
  392.  
  393.  
  394. <div id="fic" class="story ya romance drama john-green 5">
  395. <h1><a href="https://www.goodreads.com/book/show/11870085-the-fault-in-our-stars?ac=1" target="_blank" title="Goodreads"><i>The Fault in Our Stars</i> by John Green</a></h1>
  396. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1360206420l/11870085.jpg">
  397. <div id="fictext">
  398. Despite the tumor-shrinking medical miracle that has bought her a few years, Hazel has never been anything but terminal, her final chapter inscribed upon diagnosis. But when a gorgeous plot twist named Augustus Waters suddenly appears at Cancer Kid Support Group, Hazel's story is about to be completely rewritten.
  399. </div>
  400. <li>Young Adult</li> <li>Romance</li> <li>Drama</li> <li style="color:#e7e404">★★★★★</li>
  401. </div>
  402.  
  403.  
  404.  
  405. <div id="fic" class="story fantasy childrens 5">
  406. <h1><a href="https://www.goodreads.com/book/show/420180.The_Little_White_Horse" target="_blank" title="Goodreads"><i>A Little White Horse</i> by Elizabeth Goudge</a></h1>
  407. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1331061299l/420180.jpg">
  408. <div id="fictext">
  409. Orphaned Maria arrives at Moonacre feeling as if she’s entered Paradise. Her new guardian, uncle Benjamin, is funny; the Manor feels like home; every person and animal she meets is like a friend. But there is something sad beneath all of this beauty and comfort—a tragedy that happened years ago, shadowing Moonacre Manor and the town around it—and Maria is determined to learn about it, change it, and give her own life story a happy ending.
  410.  
  411. </div>
  412. <li>Fantasy</li> <li>Children's</li> <li style="color:#e7e404">★★★★★</li>
  413. </div>
  414.  
  415.  
  416. <div id="fic" class="story fantasy ya historical-fiction 5 ea">
  417. <h1><a href="https://www.goodreads.com/book/show/6064144-magic-flutes" target="_blank" title="Goodreads"><i>Magic Flutes</i> by Eva Ibbotson</a></h1>
  418. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1319454685l/6064144.jpg">
  419. <div id="fictext">
  420. Spring, 1922 - Tessa is a beautiful, tiny, dark-eyed princess - who's given up her duties to follow her heart, working for nothing backstage at the Viennese opera. No one knows who she really is, or that a fairytale castle is missing its princess, and Tessa is determined to keep it that way. But secret lives can be complicated. When a wealthy Englishman discovers this bewitching urchin backstage,Tessa's two lives collide - and in escaping her inheritance, she finds her destiny...
  421. </div>
  422. <li>Fantasy</li> <li>Young Adult</li> <li>Historical fiction</li> <li style="color:#e7e404">★★★★★</li>
  423. </div>
  424.  
  425.  
  426. <div id="fic" class="story fantasy ya historical-fiction 5 ea">
  427. <h1><a href="https://www.goodreads.com/book/show/6064144-magic-flutes" target="_blank" title="Goodreads"><i>The Secret Countess</i> by Eva Ibbotson</a></h1>
  428. <img src="https://d.gr-assets.com/books/1334264488l/853737.jpg">
  429. <div id="fictext">
  430. Anna, a young countess, has always lived in St Petersburg. But when revolution tears Russia apart, her family is forced to flee to England. Anna determines to become a housemaid and finds work at the Earl of Westerholme's mansion.
  431.  
  432. Then the young Earl returns home from war - and Anna falls hopelessly in love. But they can never be together: Rupert is engaged to the snobbish and awful Muriel - and anyway, Anna is only a servant.
  433. </div>
  434. <li>Fantasy</li> <li>Young Adult</li> <li>Historical fiction</li> <li style="color:#e7e404">★★★★★</li>
  435. </div>
  436.  
  437.  
  438. <div id="fic" class="story adult chick-lit humour romance 5">
  439. <h1><a href="https://www.goodreads.com/book/show/2523207.Confessions_of_a_Shopaholic" target="_blank" title="Goodreads"><i>Confessions of a Shopaholic</i> by Sophie Kinsella</a></h1>
  440. <img src="https://d202m5krfqbpi5.cloudfront.net/books/1320544770l/2523207.jpg">
  441. <div id="fictext">
  442. Becky Bloomwood has a fabulous flat in London's trendiest neighborhood, a troupe of glamorous socialite friends, and a closet brimming with the season's must-haves. The only trouble is that she can't actually afford it.
  443. Her job writing at Successful Savings not only bores her to tears, it doesn't pay much at all. Becky's only consolation is to buy herself something ... just a little something...
  444.  
  445. </div>
  446. <li>Adult</li> <li>Chick lit</li> <li>Humour</li> <li>Romance</li> <li style="color:#e7e404">★★★★★</li>
  447. </div>
  448.  
  449.  
  450. <!--End of everything you have to edit-->
  451.  
  452.  
  453.  
  454. </div>
  455.  
  456. </div>
  457.  
  458. <div id="E"><a href="https://theghostoflove.tumblr.com" target="_blank" title="Enchantingly">E</a></div>
  459.  
  460. <!---- masonry scripts ---->
  461. <script type="text/javascript" src="https://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  462. <script type="text/javascript">
  463. $(window).load(function () {
  464. var $content = $('#fics');
  465. $content.masonry({itemSelector: '.entry'}),
  466. });
  467. });
  468. });
  469. </script>
  470. <!---- end masonry scripts -->
  471. <!---- hide/unhide scripts -->
  472. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  473. <script language="javascript">
  474. $(document).ready(function() {
  475. $('a#buttonsend').click(function() {
  476. $('.t',this).toggle();
  477. });
  478.  
  479. $("#hidden").css({"height": "0px", "opacity":"0" });
  480.  
  481. $("#buttonsend").toggle(
  482. function () {
  483. $("#hidden").animate({"height": "130px", "opacity":"1.0"}, "slow");
  484. },
  485. function () {
  486. $("#hidden").animate({"height": "0px", "opacity":"0"}, "slow");
  487. });
  488. });
  489. </script>
  490. <!---- end hide/unhide scripts -->
  491. <!------- filter scripts -------->
  492. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  493. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  494. <script>
  495. $(function(){
  496.  
  497. var $container = $('#container');
  498.  
  499. $container.isotope({
  500. itemSelector : '.story'
  501. });
  502.  
  503.  
  504. var $optionSets = $('#tags .option-set'),
  505. $optionLinks = $optionSets.find('a');
  506.  
  507. $optionLinks.click(function(){
  508. var $this = $(this);
  509. // don't proceed if already selected
  510. if ( $this.hasClass('selected') ) {
  511. return false;
  512. }
  513. var $optionSet = $this.parents('.option-set');
  514. $optionSet.find('.selected').removeClass('selected');
  515. $this.addClass('selected');
  516.  
  517. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  518. var options = {},
  519. key = $optionSet.attr('data-option-key'),
  520. value = $this.attr('data-option-filter');
  521. // parse 'false' as false boolean
  522. value = value === 'false' ? false : value;
  523. options[ key ] = value;
  524. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  525. // changes in layout modes need extra logic
  526. changeLayoutMode( $this, options )
  527. } else {
  528. // otherwise, apply new options
  529. $container.isotope( options );
  530. }
  531.  
  532. return false;
  533. });
  534.  
  535.  
  536. });
  537. </script>
  538.  
  539. <!-----end filter scripts------>
  540.  
  541.  
  542. </body>
  543. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!