API tools faq
paste
Guest User

wookmark

a guest
Jul 19th, 2016
107
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.31 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  7. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  8.  
  9. <!-- CSS Reset -->
  10. <link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
  11.  
  12. <!-- Global CSS for the page and tiles -->
  13. <link rel="stylesheet" href="../css/main.css">
  14.  
  15. </head>
  16.  
  17. <body>
  18. <div class="container">
  19. <ul class="nav nav-tabs">
  20. <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  21. <li><a data-toggle="tab" href="#menu1">Page</a></li>
  22. </ul>
  23.  
  24. <div class="tab-content">
  25. <div id="home" class="tab-pane fade in active">
  26.  
  27. <ul class="tiles-wrap animated" id="wookmark1">
  28. <!-- These are our grid blocks -->
  29. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
  30. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
  31. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
  32. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
  33. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
  34. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
  35. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
  36. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
  37. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
  38. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
  39. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
  40. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
  41. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li>
  42. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li>
  43. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li>
  44. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li>
  45. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li>
  46. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li>
  47. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li>
  48. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li>
  49. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li>
  50. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li>
  51. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li>
  52. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li>
  53. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li>
  54. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li>
  55. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li>
  56. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li>
  57. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li>
  58. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li>
  59. <!-- End of grid blocks -->
  60. </ul>
  61.  
  62. </div>
  63. <div id="menu1" class="tab-pane fade">
  64.  
  65. <ul class="tiles-wrap animated" id="wookmark2">
  66. <!-- These are our grid blocks -->
  67. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
  68. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
  69. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
  70. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
  71. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
  72. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
  73. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
  74. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
  75. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
  76. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
  77. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
  78. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
  79. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li>
  80. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li>
  81. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li>
  82. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li>
  83. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li>
  84. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li>
  85. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li>
  86. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li>
  87. <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li>
  88. <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li>
  89. <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li>
  90. <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li>
  91. <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li>
  92. <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li>
  93. <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li>
  94. <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li>
  95. <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li>
  96. <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li>
  97. <!-- End of grid blocks -->
  98. </ul>
  99.  
  100. </div>
  101.  
  102. </div>
  103. </div>
  104.  
  105. <!-- Include the plug-in -->
  106. <script src="../wookmark.js"></script>
  107.  
  108. <!-- Once the page is loaded, initalize the plug-in. -->
  109. <script type="text/javascript">
  110. window.onload = function () {
  111. var wookmark1 = new Wookmark('#wookmark1', {
  112. outerOffset: 10, // Optional, the distance to the containers border
  113. itemWidth: 210 // Optional, the width of a grid item
  114. });
  115.  
  116. var wookmark2 = new Wookmark('#wookmark2', {
  117. outerOffset: 10, // Optional, the distance to the containers border
  118. itemWidth: 210 // Optional, the width of a grid item
  119. });
  120. };
  121. </script>
  122.  
  123. </body>
  124. </html>
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!