API tools faq
paste
Guest User

Treehouse

a guest
Feb 27th, 2017
340
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta charset="UTF-8">
  6. <title>Interactive Photo Gallery</title>
  7. <style>img {width: 250px;} input{margin: 10px 0; width: 300px}p{display:none;}</style>
  8. </head>
  9. <body>
  10. <div id="content">
  11. <input type="type" placeholder="search..." name="text-search" data-search>
  12. <div class="filtr-container">
  13. <div class="filtr-item" data-category="1" data-sort="unu">
  14. <a href="img/01.jpg" title="Hay Bales" data-filter="all" data-lightbox="portfolio" data-type="vegan pizza" data-title="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
  15. <img src="img/01.jpg" class="name" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields.">
  16. <p>I love hay bales. Took this snap on a drive through the countryside past some straw fields.</p>
  17. </a>
  18. </div>
  19. <div class="filtr-item" data-category="1, 2" data-sort="doi">
  20. <a href="img/02.jpg" title="Lake" data-lightbox="portfolio" data-title="The lake was so calm today. We had a great view of the snow on the mountains from here.">
  21. <img src="img/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here.">
  22. <p>The lake was so calm today. We had a great view of the snow on the mountains from here.</p>
  23. </a>
  24. </div>
  25. <div class="filtr-item" data-category="1, 3" data-sort="trei">
  26. <a href="img/03.jpg" title="Canyon" data-lightbox="portfolio" data-title="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
  27. <img src="img/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below.">
  28. <p>I hiked to the top of the mountain and got this picture of the canyon and trees below.</p>
  29. </a>
  30. </div>
  31. <div class="filtr-item" data-category="1" data-sort="patru">
  32. <a href="img/04.jpg" title="Iceberg" data-lightbox="portfolio" data-title="It was amazing to see an iceberg up close, it was so cold but didn’t snow today.">
  33. <img src="img/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today.">
  34. <p>It was amazing to see an iceberg up close, it was so cold but didn’t snow today.</p>
  35. </a>
  36. </div>
  37. <div class="filtr-item" data-category="1" data-sort="cinci">
  38. <a href="img/05.jpg" title="Desert" data-lightbox="portfolio" data-title="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.">
  39. <img src="img/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.">
  40. <p>The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons.</p>
  41. </a>
  42. </div>
  43. <div class="filtr-item" data-category="1" data-sort="sase">
  44. <a href="img/06.jpg" title="Fall" data-lightbox="portfolio" data-title="Fall is coming, I love when the leaves on the trees start to change color.">
  45. <img src="img/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color.">
  46. <p>Fall is coming, I love when the leaves on the trees start to change color.</p>
  47. </a>
  48. </div>
  49. <div class="filtr-item" data-category="1" data-sort="sapte">
  50. <a href="img/07.jpg" title="Plantation" data-lightbox="portfolio" data-title="I drove past this plantation yesterday, everything is so green!">
  51. <img src="img/07.jpg" alt="I drove past this plantation yesterday, everything is so green!">
  52. <p>I drove past this plantation yesterday, everything is so green!</p>
  53. </a>
  54. </div>
  55. <div class="filtr-item" data-category="1" data-sort="opt">
  56. <a href="img/08.jpg" title="Dunes" data-lightbox="portfolio" data-title="My summer vacation to the Oregon Coast. I love the sandy dunes!">
  57. <img src="img/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!">
  58. <p>My summer vacation to the Oregon Coast. I love the sandy dunes!</p>
  59. </a>
  60. </div>
  61. <div class="filtr-item" data-category="1" data-sort="noua">
  62. <a href="img/09.jpg" title="Countryside Lane" data-lightbox="portfolio" data-title="We enjoyed a quiet stroll down this countryside lane.">
  63. <img src="img/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane.">
  64. <p>We enjoyed a quiet stroll down this countryside lane.</p>
  65. </a>
  66. </div>
  67. <div class="filtr-item" data-category="1" data-sort="zece">
  68. <a href="img/10.jpg" title="Sunset" data-lightbox="portfolio" data-title="Sunset at the coast! The sky turned a lovely shade of orange.">
  69. <img src="img/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange.">
  70. <p>Sunset at the coast! The sky turned a lovely shade of orange.</p>
  71. </a>
  72. </div>
  73. <div class="filtr-item" data-category="1" data-sort="unspe">
  74. <a href="img/11.jpg" title="Cave" data-lightbox="portfolio" data-title="I did a tour of a cave today adn the view of the landscape below was breathtaking.">
  75. <img src="img/11.jpg" alt="I did a tour of a cave today adn the view of the landscape below was breathtaking.">
  76. <p>I did a tour of a cave today adn the view of the landscape below was breathtaking.</p>
  77. </a>
  78. </div>
  79. <div class="filtr-item" data-category="1" data-sort="doispe">
  80. <a href="img/12.jpg" title="Bluebells" data-lightbox="portfolio" data-title="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.">
  81. <img src="img/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.">
  82. <p>I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in.</p>
  83. </a>
  84. </div>
  85. </div>
  86. </div>
  87. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  88. <script type="text/javascript" src="jquery.filterizr.min.js"></script>
  89. <script>
  90. (function($){
  91. $(document).ready(function(){
  92. var filterizd = $('.filtr-container').filterizr({});
  93. });
  94. })(jQuery);
  95. </script>
  96. </body>
  97. </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!