API tools faq
paste
Advertisement
HendrixRPH

Google Images Theme

HendrixRPH
Aug 16th, 2015
1,438
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Google Images theme made by hendrixrph. Google belongs to google, obviously. Special thanks to oriongunning for creation gridder.js which was invaluable in making this. Feel free to edit whatever you want, but don't redistribute or remove credit. Thank you!
  8.  
  9. -->
  10.  
  11. <title>Not Actually Google Images</title>
  12. <link href="http://static.tumblr.com/tm8oez9/bOUnt7e0g/jquery.gridder.min.css" rel="stylesheet">
  13. <link rel="shortcut icon" href="{Favicon}">
  14.  
  15. <style>
  16. * {
  17. box-sizing:border-box;
  18. margin:0;
  19. padding:0;
  20. }
  21.  
  22. body {
  23. background:#f1f1f1;
  24. }
  25.  
  26. .header {
  27. width:100%;
  28. min-width:400px;
  29. height:59px;
  30. background:#f1f1f1;
  31. border-bottom:1px solid #e5e5e5;
  32. font-family:arial, sans-serif;
  33. }
  34.  
  35. .logo {
  36. padding-left:13px;
  37. padding-right:10px;
  38. padding-top:16px;
  39. float:left;
  40. }
  41.  
  42. .logo img {
  43. height:30px;
  44. }
  45.  
  46. .searchbar {
  47. float:left;
  48. width:70%;
  49. height:30px;
  50. max-width:550px;
  51. background:white;
  52. border:1px solid #d9d9d9;
  53. border-top-color:#c0c0c0;
  54. margin-left:10px;
  55. margin-top:15px;
  56. padding:5px 8px;
  57. color:#222;
  58. font-size:16px;
  59. }
  60.  
  61. .linksbar {
  62. height:60px;
  63. border-bottom:1px solid #e5e5e5;
  64. font-family:arial, sans-serif;
  65. background:#fff;
  66. }
  67.  
  68. .linksbar ul {
  69. list-style-type:none;
  70. height:60px;
  71. margin-left:120px;
  72. float:left;
  73. }
  74.  
  75. .linksbar ul li {
  76. display:block;
  77. float:left;
  78. margin:8px;
  79. padding:8px;
  80. font-size:13px;
  81. margin-top:12px;
  82. }
  83.  
  84. .linksbar ul li a {
  85. color:#777;
  86. text-decoration:none;
  87. }
  88.  
  89. .linksbar ul li a:hover {
  90. color:#222;
  91. }
  92.  
  93. .highlightedlink {
  94. font-weight:bold;
  95. color:#dd4b39!important;
  96. border-bottom:3px solid #dd4b39;
  97. padding-bottom:21px!important;
  98. }
  99.  
  100. .entries {
  101. text-align:center;
  102. background:#f1f1f1;
  103. margin:10px auto;
  104. width:1250px;
  105. }
  106.  
  107. .gridder {
  108. width:1250px;
  109. margin:0;
  110. padding:0;
  111. }
  112.  
  113. .gridder-list {
  114. display:inline-block;
  115. position:relative;
  116. cursor:pointer;
  117. }
  118.  
  119. .gridder-list:nth-child(n) {
  120. margin-bottom:1%!important;
  121. margin-right:1%!important;
  122. }
  123.  
  124. .hoverbar {
  125. background:rgba(51,51,51,0.8);
  126. position:absolute;
  127. z-index:10;
  128. width:200px;
  129. top:184px;
  130. height:16px;
  131. left:0;
  132. padding:2px 4px;
  133. color:#fff;
  134. font-size:11px;
  135. font-family:arial, sans-serif;
  136. text-align:left;
  137. display:none;
  138. }
  139.  
  140. .gridder-list:hover .hoverbar {
  141. display:block;
  142. }
  143.  
  144. .gridder-list img {
  145. width:200px;
  146. height:200px;
  147. }
  148.  
  149. .gridder-show {
  150. height:450px;
  151. width:100%;
  152. background:#222;
  153. margin-bottom:10px;
  154. }
  155.  
  156. .gridder-padding {
  157. height:0px;
  158. width:100%;
  159. }
  160.  
  161. .gridder-close {
  162. position:absolute;
  163. top:0;
  164. right:0;
  165. padding:25px;
  166. color:#aaa;
  167. font-family:arial, sans-serif;
  168. font-size:20px;
  169. text-decoration:none;
  170. }
  171.  
  172. .gridder-nav {
  173. box-shadow:0 1px 0 rgba(255,255,255,.06),
  174. 1px 1px 0 rgba(255,255,255,.03),
  175. -1px -1px 0 rgba(0,0,0,.02),
  176. inset 1px 1px 0 rgba(255,255,255,.05);
  177. display:block;
  178. height:87px;
  179. width:40px;
  180. position:absolute;
  181. top:178px;
  182. background:#454545;
  183. border:1px solid #141414;
  184. background-image:-webkit-linear-gradient(top,#3e3e3e,#333);
  185. background-image:-moz-linear-gradient(top,#3e3e3e,#333);
  186. background-image:linear-gradient(top,#3e3e3e,#333);
  187. color:#aaa;
  188. font-family:arial, sans-serif;
  189. text-decoration:none;
  190. font-size:30px;
  191. text-align:center;
  192. line-height:87px;
  193. }
  194.  
  195. .gridder-nav:hover {
  196. background-image: -webkit-linear-gradient(top,#4e4e4e,#474747);
  197. background-image: -moz-linear-gradient(top,#4e4e4e,#474747);
  198. background-image: linear-gradient(top,#4e4e4e,#474747);
  199. }
  200.  
  201. .next {
  202. right:0;
  203. }
  204.  
  205. .prev {
  206. left:0;
  207. }
  208.  
  209.  
  210. .contentwrapper {
  211. width:1100px;
  212. height:400px;
  213. margin:25px auto;
  214. }
  215.  
  216. .image {
  217. width:700px;
  218. float:left;
  219. text-align:center;
  220. height:100%;
  221. border-right:1px solid #121212;
  222. }
  223.  
  224. .image img {
  225. max-width:650px;
  226. max-height:400px;
  227. position: relative;
  228. top: 50%;
  229. transform: translateY(-50%);
  230. box-shadow:0 5px 35px rgba(0,0,0,.65);
  231. }
  232.  
  233. .openinfo {
  234. border-left:1px solid #2a2a2a;
  235. width:400px;
  236. float:left;
  237. padding-top:20px;
  238. padding-left:20px;
  239. text-align:left;
  240. font-family:Arial, sans-serif;
  241. }
  242.  
  243. .openinfo h2 {
  244. color:#d6d6d6;
  245. font-size:22px;
  246. font-weight:normal;
  247. }
  248.  
  249. .subtitle {
  250. color:#7d7d7d;
  251. font-size:13px;
  252. }
  253.  
  254. .caption {
  255. font-size:13px;
  256. margin:6px 0;
  257. color:#888;
  258. }
  259.  
  260. .links {
  261. list-style-type:none;
  262. margin-top:15px;
  263. }
  264.  
  265. .links a li {
  266. box-sizing:content-box;
  267. display:inline-block;
  268. width:52px;
  269. height:29px;
  270. padding:0 8px;
  271. box-shadow:0 1px 0 rgba(255,255,255,.06),
  272. 1px 1px 0 rgba(255,255,255,.03),
  273. -1px -1px 0 rgba(0,0,0,.02),
  274. inset 1px 1px 0 rgba(255,255,255,.05);
  275. border:1px solid #141414;
  276. background:#454545;
  277. background-image:-webkit-linear-gradient(top,#3e3e3e,#333);
  278. background-image:-moz-linear-gradient(top,#3e3e3e,#333);
  279. background-image:linear-gradient(top,#3e3e3e,#333);
  280. margin-right:10px;
  281. text-decoration:none;
  282. font-weight:bold;
  283. font-size:11px;
  284. color:#bbb;
  285. line-height:29px;
  286. text-align:center;
  287. }
  288.  
  289. .links a li:hover {
  290. background-image: -webkit-linear-gradient(top,#4e4e4e,#474747);
  291. background-image: -moz-linear-gradient(top,#4e4e4e,#474747);
  292. background-image: linear-gradient(top,#4e4e4e,#474747);
  293. }
  294.  
  295. .related {
  296. margin-top:15px;
  297. border-top:1px solid #2a2a2a;
  298. box-shadow:0 -1px #121212;
  299. padding-top:15px;
  300. }
  301.  
  302. .related p {
  303. color:#9f9f9f;
  304. font-size:13px;
  305. margin-bottom:3px;
  306. }
  307.  
  308. .relimgs img {
  309. display:inline-block;
  310. height:80px;
  311. width:80px;
  312. margin:3px;
  313. }
  314.  
  315. .relimgs img:hover {
  316. outline:1px solid #ddd;
  317. outline-offset:1px;
  318. }
  319. </style>
  320.  
  321. </head>
  322. <body>
  323.  
  324. <div class="header">
  325. <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png"></div>
  326. <div class="searchbar">google images theme</div> <!-- The text that will go in the searchbar. -->
  327. </div>
  328. <div class="linksbar">
  329. <ul> <!-- Links in the top bar. Pleae don't remove the credit! -->
  330. <li><a href="#">Dash</a></li>
  331. <li class="highlightedlink">Images</li>
  332. <li><a href="#">Main</a></li>
  333. <li><a href="#">Link 1</a></li>
  334. <li><a href="#">Link 2</a></li>
  335. <li><a href="#">Link 3</a></li>
  336. <li><a href="http://hendrixrph.tumblr.com">Credit</a></li>
  337. </ul>
  338. </div>
  339.  
  340. <div class="filtersbar"></div>
  341.  
  342. <div class="entries">
  343. <ul class="gridder">
  344.  
  345. <li class="gridder-list" data-griddercontent="#content1"> <!-- Make sure that the thing in data-griddercontent is unique and matches the ID of the content container that you want to show up when you click the image. If you don't change this for every entry and match it to the content, it won't work! Also, the # at the beginning is required.-->
  346. <img src="http://www.placehold.it/200" /> <!-- The square image in the "search". 200x200 px. -->
  347. <div class="hoverbar">character name</div> <!-- the text that appears when you hover over the image. It can be whatever you want, but keep it to one line. -->
  348. </li>
  349.  
  350. <li class="gridder-list" data-griddercontent="#content2"> <!-- Make sure that the thing in data-griddercontent is unique and matches the ID of the content container that you want to show up when you click the image. If you don't change this for every entry and match it to the content, it won't work! Also, the # at the beginning is required.-->
  351. <img src="http://www.placehold.it/200" /> <!-- The square image in the "search". 200x200 px. -->
  352. <div class="hoverbar">character name</div> <!-- the text that appears when you hover over the image. It can be whatever you want, but keep it to one line. -->
  353. </li>
  354.  
  355. </ul>
  356.  
  357.  
  358.  
  359.  
  360. <!-- This is where you put all the images and text that come up in the slide-out box things when you click on the images. -->
  361.  
  362.  
  363. <!-- BEGIN COPY/PASTE -->
  364. <div id="content1" class="gridder-content"> <!-- Make sure to match the id to what you put under data-griddercontent for this image, but without the # -->
  365. <div class="contentwrapper">
  366. <div class="image">
  367. <img src=""> <!-- This is the big image that will come up on the left of the box. It can be any size and will be resized to fit right. -->
  368. </div>
  369. <div class="openinfo">
  370. <h2>Item #1</h2> <!-- The title on the right side. -->
  371. <div class="subtitle">fakeurl.com - 650 x 400 - Search by image</div> <!-- The text under the title on the right side. by default I have it set up with the information that's usually on google images, but you can put whatever you want here (age, label, whether they're open, etc.)-->
  372. <div class="caption">caption goes here, keep this to a line or two.</div>
  373. <ul class="links"> <!-- The button links. Make these whatever you want. -->
  374. <a href="#"><li>Full Bio</li></a>
  375. <a href="#"><li>Ship Tag</li></a>
  376. </ul>
  377. <div class="related">
  378. <p>Related images:</p>
  379. <!-- These are your related images! You can use these for other pictures of the person, aesthetic pictures, whatever. If you don't want them at all, delete everythin from <div class="related"> to the END RELATED comment. Related images are 80x80.-->
  380. <div class="relimgs">
  381. <img src="http://www.placehold.it/80">
  382. <img src="http://www.placehold.it/80">
  383. <img src="http://www.placehold.it/80">
  384. <img src="http://www.placehold.it/80">
  385. <img src="http://www.placehold.it/80">
  386. <img src="http://www.placehold.it/80">
  387. <img src="http://www.placehold.it/80">
  388. <img src="http://www.placehold.it/80">
  389. </div><!-- END RELIMGS -->
  390. </div><!-- END RELATED -->
  391. </div><!-- END OPENINFO -->
  392. </div><!-- END CONTENTWRAPPER -->
  393. </div>
  394. <!-- END COPY/PASTE -->
  395.  
  396. <!-- BEGIN COPY/PASTE -->
  397. <div id="content2" class="gridder-content"> <!-- Make sure to match the id to what you put under data-griddercontent for this image, but without the # -->
  398. <div class="contentwrapper">
  399. <div class="image">
  400. <img src=""> <!-- This is the big image that will come up on the left of the box. It can be any size and will be resized to fit right. -->
  401. </div>
  402. <div class="openinfo">
  403. <h2>Item #2</h2> <!-- The title on the right side. -->
  404. <div class="subtitle">fakeurl.com - 650 x 400 - Search by image</div> <!-- The text under the title on the right side. by default I have it set up with the information that's usually on google images, but you can put whatever you want here (age, label, whether they're open, etc.)-->
  405. <div class="caption">caption goes here, keep this to a line or two.</div>
  406. <ul class="links"> <!-- The button links. Make these whatever you want. -->
  407. <a href="#"><li>Full Bio</li></a>
  408. <a href="#"><li>Ship Tag</li></a>
  409. </ul>
  410. <div class="related">
  411. <p>Related images:</p>
  412. <!-- These are your related images! You can use these for other pictures of the person, aesthetic pictures, whatever. If you don't want them at all, delete everythin from <div class="related"> to the END RELATED comment. Related images are 80x80.-->
  413. <div class="relimgs">
  414. <img src="http://www.placehold.it/80">
  415. <img src="http://www.placehold.it/80">
  416. <img src="http://www.placehold.it/80">
  417. <img src="http://www.placehold.it/80">
  418. <img src="http://www.placehold.it/80">
  419. <img src="http://www.placehold.it/80">
  420. <img src="http://www.placehold.it/80">
  421. <img src="http://www.placehold.it/80">
  422. </div><!-- END RELIMGS -->
  423. </div><!-- END RELATED -->
  424. </div><!-- END OPENINFO -->
  425. </div><!-- END CONTENTWRAPPER -->
  426. </div>
  427. <!-- END COPY/PASTE -->
  428.  
  429.  
  430.  
  431. </div>
  432.  
  433. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  434. <script src="http://www.oriongunning.com/demo/gridder/js/jquery.gridder.js"></script>
  435. <script>
  436. $(function() {
  437.  
  438. // Call Gridder
  439. $('.gridder').gridderExpander({
  440. scroll: true,
  441. scrollOffset: 30,
  442. scrollTo: "panel", // panel or listitem
  443. animationSpeed: 400,
  444. animationEasing: "swing",
  445. showNav: true, // Show Navigation
  446. nextText: "〉", // Next button text
  447. prevText: "〈", // Previous button text
  448. closeText: "X", // Close button text
  449. onStart: function(){
  450. //Gridder Inititialized
  451. },
  452. onContent: function(){
  453. //Gridder Content Loaded
  454. },
  455. onClosed: function(){
  456. //Gridder Closed
  457. }
  458. });
  459.  
  460. });
  461. </script>
  462. </body>
  463. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!