Advertisement
yLii

Infinite Isotope 17

Jan 7th, 2017
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.67 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title}</title>
  5.  
  6.  
  7. <script src="http://static.tumblr.com/iuvoef7/bXomx943d/jquery-1.7.1.min.js"></script>
  8.  
  9. <!--don't understand why this script doesn't work -->
  10. <script src="http://static.tumblr.com/iuvoef7/hshmx93xt/jquery.isotope.min.js"></script>
  11.  
  12. <!-- for some reason this one works -->
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  14.  
  15. <!--cellsbycolumn-->
  16. <script src="https://raw.githubusercontent.com/metafizzy/isotope-cells-by-column/master/cells-by-column.js"></script>
  17.  
  18. <!--cellsbyrow-->
  19. <script src="https://raw.githubusercontent.com/metafizzy/isotope-cells-by-row/master/cells-by-row.js"></script>
  20.  
  21. <!--fitcolumns-->
  22. <script src="https://raw.githubusercontent.com/metafizzy/isotope-fit-columns/master/fit-columns.js"></script>
  23.  
  24. <!--masonryhorizontal-->
  25. <script src="https://raw.githubusercontent.com/metafizzy/isotope-masonry-horizontal/master/masonry-horizontal.js"></script>
  26.  
  27.  
  28. <!--horizontal horiz-->
  29. <script src="https://raw.githubusercontent.com/metafizzy/isotope-horizontal/master/horizontal.js"></script>
  30.  
  31.  
  32.  
  33. <!--infinite scroll -->
  34. <script src="http://static.tumblr.com/iuvoef7/tIEmx9449/jquery.infinitescroll.min.js"></script>
  35.  
  36.  
  37. <!--smooth scrolling-->
  38. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  39.  
  40.  
  41. <script>
  42.  
  43. //main function, called isotope
  44.  
  45. var isotope = $(function(){
  46. var $container = $('#content');
  47. $container.imagesLoaded(function(){
  48. $container.isotope({
  49. itemSelector : '.box',
  50. layoutMode : '{select:Layout Type}',
  51. masonry: {
  52. gutter: {text:Gutter Width}
  53. }
  54. });
  55. });
  56.  
  57.  
  58. //infinite scroll and callback
  59.  
  60.  
  61.  
  62. $container.infinitescroll({
  63. navSelector : '#page_nav',
  64. nextSelector : '#page_nav a',
  65. itemSelector : '.box',
  66. loading: {
  67. loadingText : '',
  68. finishedMsg: 'You have reached the end of the internet.',
  69. img: 'http://i.imgur.com/qkKy8.gif'
  70. }
  71. },
  72.  
  73.  
  74.  
  75.  
  76. // call Isotope as a callback
  77. function ( newElements ) {
  78. var $newElems = jQuery( newElements ).hide(); // hide to begin with
  79. $( newElements ).find('.photo-slideshow').pxuPhotoset({
  80. lightbox: true,
  81. rounded: false,
  82. gutter: ' {text:Gutter Width}px',
  83. borderRadius: '0px',
  84. highRes : true,
  85. captions : true,
  86. photoset: '.photo-slideshow',
  87. photoWrap: '.photo-data',
  88. photo: '.pxu-photo'
  89. });
  90. // ensure that images load before adding to masonry layout
  91. $newElems.imagesLoaded(function(){
  92. $newElems.fadeIn(); // fade in when ready
  93. $container.isotope( 'insert', $newElems );
  94.  
  95.  
  96. });
  97. }
  98.  
  99.  
  100.  
  101. );
  102.  
  103. {block:ifManualInfiniteScroll}
  104. //manual infinite scroll
  105. $(window).unbind('.infscr');
  106. $('.load-more').click(function(){
  107. $container.infinitescroll('retrieve');
  108. return false
  109. {/block:ifManualInfiniteScroll}
  110. });
  111.  
  112.  
  113.  
  114.  
  115. }); //ending main function
  116.  
  117. // unbind normal behavior. needs to occur after normal infinite scroll setup.
  118.  
  119.  
  120.  
  121.  
  122. $(document).ready(isotope);
  123.  
  124. </script>
  125.  
  126. <!--Responsive photosets-->
  127. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  128. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  129.  
  130. <script>
  131. $(document).ready(function(){
  132. $('.photo-slideshow').pxuPhotoset({
  133. lightbox: true,
  134. rounded: false,
  135. gutter: ' {text:Gutter Width}px',
  136. borderRadius: '0px',
  137. highRes : true,
  138. captions : true,
  139. photoset: '.photo-slideshow',
  140. photoWrap: '.photo-data',
  141. photo: '.pxu-photo'
  142. });
  143. });
  144. </script>
  145.  
  146.  
  147.  
  148.  
  149. <script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
  150. <script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>
  151. <script>
  152. $(document).ready(function () {
  153. $.localScroll();
  154. });
  155. </script>
  156.  
  157.  
  158. <!--Syndex -->
  159. <script src="https://static.tumblr.com/bfhsl6l/8S6mqga6q/syndex.js"></script>
  160.  
  161.  
  162.  
  163. <meta name="image:Background" content="" />
  164. <meta name="image:Lollipop Background" content="" />
  165. <meta name="image:Quote Background" content="" />
  166. <meta name="image:HeaderBackground" content="" />
  167.  
  168. <meta name="color:Background" content="#f5f5f5" />
  169. <meta name="color:Lightbox Background" content="#fff" />
  170. <meta name="color:Links" content="#619251" />
  171. <meta name="color:Text highlight" content="#d83e5c" />
  172. <meta name="color:Lollipop" content="#000000" />
  173. <meta name="color:Lollipop Hover" content="#b7512e" />
  174. <meta name="color:Hover" content="#b7512e" />
  175. <meta name="color:Scrollbar" content="#fed3f2" />
  176.  
  177. <meta name="font:Header Font" content="Arial" />
  178.  
  179.  
  180. <meta name="text:Post margin" content="10px" />
  181. <meta name="text:Columns" content="4" />
  182.  
  183.  
  184.  
  185. <meta name="text:Font size" content='0.8em'/>
  186. <meta name="text:Google Analytics ID" content=''/>
  187. <meta name="text:Twitter Username" content=''/>
  188.  
  189. <meta name="if:Post Details" content="0" />
  190. <meta name="if:Fade" content="1" />
  191. <meta name="if:Head Space" content="1" />
  192. <meta name="if:Horizontal" content="0" />
  193. <meta name="if:Infinite Scroll" content="1" />
  194. <meta name="if:Manual Infinite Scroll" content="1" />
  195. <meta name="if:Post Padding" content="0" />
  196. <meta name="if:Sidebar" content="0" />
  197. <meta name="if:Stack Photoset" content="0" />
  198.  
  199.  
  200.  
  201. <meta name="select:Content Width" content="30%" />
  202. <meta name="select:Content Width" content="40%" />
  203. <meta name="select:Content Width" content="50%" />
  204. <meta name="select:Content Width" content="60%" />
  205. <meta name="select:Content Width" content="70%" />
  206. <meta name="select:Content Width" content="80%" />
  207. <meta name="select:Content Width" content="90%" />
  208. <meta name="select:Content Width" content="100%" />
  209.  
  210.  
  211. <meta name="select:Fade Opacity" content="0.1" />
  212. <meta name="select:Fade Opacity" content="0.2" />
  213. <meta name="select:Fade Opacity" content="0.3" />
  214. <meta name="select:Fade Opacity" content="0.4" />
  215. <meta name="select:Fade Opacity" content="0.5" />
  216. <meta name="select:Fade Opacity" content="0.6" />
  217. <meta name="select:Fade Opacity" content="0.7" />
  218. <meta name="select:Fade Opacity" content="0.8" />
  219. <meta name="select:Fade Opacity" content="0.9" />
  220. <meta name="select:Fade Opacity" content="1.0" />
  221.  
  222. <meta name="select:Float" content="margin:auto" title="Align Center" />
  223. <meta name="select:Float" content="float:left" title="Align Left" />
  224. <meta name="select:Float" content="float:right" title="Align Right" />
  225.  
  226.  
  227.  
  228.  
  229. <meta name="select:SideFloat" content="left" title="Left Sidebar" />
  230. <meta name="select:SideFloat" content="right" title="Right Sidebar" />
  231.  
  232.  
  233. <meta name="select:Layout Type" content="cellsByColumn" title="Cells by Column" />
  234. <meta name="select:Layout Type" content="cellsByRow" title="Cells by Row" />
  235. <meta name="select:Layout Type" content="fitColumns" title="Fit Columns" />
  236. <meta name="select:Layout Type" content="fitRows" title="Fit Rows" />
  237. <meta name="select:Layout Type" content="horiz" title="Horizontal" />
  238. <meta name="select:Layout Type" content="masonry" title="Masonry" />
  239. <meta name="select:Layout Type" content="masonryHorizontal" title="Masonry Horizontal" />
  240. <meta name="select:Layout Type" content="vertical" title="Vertical" />
  241.  
  242. <meta name="select:if Layout Type" content="ifHoriz" title="Horizontal" />
  243.  
  244.  
  245. <!--Post Width in relation to Content Width -->
  246. <meta name="select:Post Width" content="16%" />
  247. <meta name="select:Post Width" content="16.66%" />
  248. <meta name="select:Post Width" content="19%" />
  249. <meta name="select:Post Width" content="20%" />
  250. <meta name="select:Post Width" content="25%" />
  251. <meta name="select:Post Width" content="30%" />
  252. <meta name="select:Post Width" content="32%" />
  253. <meta name="select:Post Width" content="32.75%" />
  254. <meta name="select:Post Width" content="33.33%" />
  255. <meta name="select:Post Width" content="40%" />
  256. <meta name="select:Post Width" content="50%" />
  257. <meta name="select:Post Width" content="60%" />
  258. <meta name="select:Post Width" content="70%" />
  259. <meta name="select:Post Width" content="75%" />
  260. <meta name="select:Post Width" content="80%" />
  261. <meta name="select:Post Width" content="90%" />
  262. <meta name="select:Post Width" content="100%" />
  263.  
  264.  
  265. <meta name="text:Gutter Width" content="" />
  266.  
  267.  
  268.  
  269.  
  270.  
  271. <link rel="shortcut icon" href="{Favicon}">
  272. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  273. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  274.  
  275.  
  276.  
  277.  
  278.  
  279. <style type="text/css">
  280.  
  281.  
  282. @font-face {font-family:"Mayo";src:url('http://static.tumblr.com/m9qxvhq/dD6mhcpd0/mayonaise-condensed.otf');}
  283. @font-face {font-family:"Blake";src:url('http://static.tumblr.com/m9qxvhq/bnRmhedq1/blake2.ttf');}
  284. @font-face {font-family:"Sugah";src:url('http://static.tumblr.com/m9qxvhq/Dghmhi6ct/frenchsugar.ttf');}
  285. @font-face {font-family:"Sachiko";src:url('http://static.tumblr.com/m9qxvhq/UTEmhi6ks/sachiko.ttf');}
  286. @font-face {font-family:"Buffet";src:url('http://static.tumblr.com/m9qxvhq/0V2mhl3je/buffet_script.ttf');}
  287. @font-face {font-family:"Accent";src:url('http://static.tumblr.com/m9qxvhq/mc9mhlhm3/accent.ttf');}
  288. @font-face {font-family:"Barkentina";src:url('http://static.tumblr.com/m9qxvhq/CH5mhn23p/barkentina_1.otf');}
  289.  
  290.  
  291. ::-webkit-scrollbar {width: 8px; height: 4px; background: {color:Background}; opacity:0.5;}
  292. ::-webkit-scrollbar-thumb { background-color: {color:Scrollbar}; -webkit-border-radius: 2ex; }
  293. ::-moz-scrollbar {width: 8px; height: 4px; background: {color:Background}; }
  294. ::-moz-scrollbar-thumb { background-color: {color:Scrollbar}; -moz-border-radius: 2ex; }
  295. ::-o-scrollbar {width: 8px; height: 4px; background: {color:Background}; }
  296. ::-o-scrollbar-thumb { background-color: {color:Scrollbar}; -o-border-radius: 2ex; }
  297.  
  298.  
  299.  
  300.  
  301. ::selection {background: #d83e5c;color: #fff;}
  302. ::-moz-selection {background: #d83e5c;color: #fff;}
  303.  
  304.  
  305.  
  306. html {
  307. width:100%;
  308. }
  309.  
  310.  
  311.  
  312. body {
  313. cursor:url(''), crosshair;
  314. background: {color:Background};
  315. width:100%;
  316.  
  317.  
  318. }
  319.  
  320.  
  321. {block:IfHeadSpace}
  322. .headspace{
  323. width:100%;
  324. height:300px;
  325. text-align:center;
  326. vertical-align:middle;
  327. font-size:50px;
  328. {/block:IfHeadSpace}
  329. font-family:{font:Header Font};
  330. }
  331.  
  332.  
  333. #content {
  334.  
  335. {block:IfNotHorizontal}
  336. width:{select:Content Width};
  337. {select:Float};
  338. {/block:IfNotHorizontal}
  339. {block:IfHorizontal}
  340. height:{select:Content Width};
  341. vertical-align:middle;
  342. {/block:IfHorizontal}
  343. }
  344.  
  345.  
  346. {block:{select:if Layout Type}}
  347. {/block:{select:if Layout Type}}
  348.  
  349.  
  350.  
  351. a {
  352. cursor:inherit;
  353. }
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360. #nav {
  361. float: left;
  362. margin-top: 20px;
  363. position: fixed;
  364. z-index:1000;
  365. right:0px;
  366. margin-right:auto;
  367. position:fixed;
  368. }
  369.  
  370. #nav a {
  371. text-decoration: none;
  372. font-size: 15px;
  373. line-height: 25px;
  374. color: #595959;
  375. }
  376.  
  377. #nav a:hover {
  378. color: #393939;
  379. }
  380.  
  381. #nav a:active {
  382. color: #151515;
  383. }
  384.  
  385.  
  386. .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
  387. #infscr-loading {display:none;}
  388. .navigation {display:none!important;}
  389.  
  390.  
  391.  
  392. .isotope-item {
  393. z-index: 2;
  394. }
  395.  
  396. .isotope-hidden.isotope-item {
  397. pointer-events: none;
  398. z-index: 1;
  399. }
  400.  
  401. .isotope,
  402. .isotope .isotope-item {
  403. /* change duration value to whatever you like */
  404. -webkit-transition-duration: 0.8s;
  405. -moz-transition-duration: 0.8s;
  406. transition-duration: 0.8s;
  407. }
  408.  
  409. .isotope {
  410. -webkit-transition-property: height, width;
  411. -moz-transition-property: height, width;
  412. transition-property: height, width;
  413. }
  414.  
  415. .isotope .isotope-item {
  416. -webkit-transition-property: -webkit-transform, opacity;
  417. -moz-transition-property: -moz-transform, opacity;
  418. transition-property: transform, opacity;
  419. }
  420.  
  421.  
  422.  
  423. .box {
  424. cursor:inherit;
  425. {block:IfNotHorizontal}
  426. float: left;
  427. width:{select:Post Width};
  428. {/block:IfNotHorizontal}
  429.  
  430. {block:IfHorizontal}
  431. height:400px;
  432. {/block:IfHorizontal}
  433.  
  434. margin-bottom:{text:Gutter Width}px;
  435. {block:IfFade}
  436. opacity:{select:Fade Opacity};
  437. -webkit-transition-duration: 0.8s;
  438. -moz-transition-duration: 0.8s;
  439. transition-duration: 0.8s;
  440. {/block:IfFade}
  441.  
  442. {block:ifPostPadding}
  443. padding-top:200px;
  444. padding-bottom:200px;
  445.  
  446. {/block:ifPostPadding}
  447.  
  448.  
  449.  
  450. }
  451.  
  452.  
  453.  
  454. .box:hover {
  455. {block:IfFade}
  456. opacity:1.0;
  457. -webkit-transition-duration: 0.8s;
  458. -moz-transition-duration: 0.8s;
  459. transition-duration: 0.8s;
  460. {/block:IfFade}
  461. }
  462.  
  463.  
  464.  
  465.  
  466.  
  467. .text {
  468. font-size:10%;
  469. }
  470.  
  471. .photo {
  472.  
  473. }
  474.  
  475. .photoset{
  476.  
  477. }
  478.  
  479. .photoset-wrap {}
  480. .photoset-wrap img { display: none; width:100%; }
  481. .photoset-wrap img:first-child { display: block; width:100%; }
  482.  
  483.  
  484. .photocount, .photocount a {
  485. right:0px;
  486. bottom:0px;
  487. position:absolute;
  488. font-size:10px;
  489. font-family:;
  490. color:{color:Background};
  491. }
  492.  
  493.  
  494. {block:IfHorizontal}
  495. .photo-slideshow {
  496. width:500px;
  497. }
  498. {/block:IfHorizontal}
  499.  
  500.  
  501. #vignette, .vignette{opacity:0!important;}.lightbox-caption {color:#000;}
  502. #tumblr_lightbox,.tmblr-lightbox{background:rgba({RGBcolor:Lightbox Background},0.8)!important;}
  503. #tumblr_lightbox img, .lightbox-image {box-shadow:none!important;border-radius:0px!important; }
  504.  
  505.  
  506. .pagination {
  507. height:10vh;
  508. width:100%;
  509. background:cyan;
  510. bottom:0px;
  511. }
  512.  
  513. .load-more {
  514. text-align:center;
  515. background:#f0f0f0;
  516. margin:0;
  517. padding:0;
  518. border:0;
  519. font:;
  520. color:#9f9f9f;
  521.  
  522.  
  523. }
  524.  
  525.  
  526. {block:ifSidebar}
  527. {/block:ifSidebar}
  528. .sidebar {
  529. {select:SideFloat}:0px;
  530. float:{select:SideFloat};
  531. width:calc(100% - {select:Content Width} );
  532. background-color:cyan;
  533.  
  534. }
  535.  
  536.  
  537.  
  538.  
  539. .portrait {
  540. vertical-align:middle;
  541. border-radius:35px;
  542. opacity:0.7;
  543. -webkit-transition-duration: 0.8s;
  544. -moz-transition-duration: 0.8s;
  545. transition-duration: 0.8s;
  546. }
  547.  
  548.  
  549. .portrait:hover {
  550. opacity:1.0;
  551. border-radius:0px;
  552. -webkit-transition-duration: 0.8s;
  553. -moz-transition-duration: 0.8s;
  554. transition-duration: 0.8s;
  555.  
  556.  
  557. }
  558.  
  559.  
  560.  
  561.  
  562.  
  563. </style>
  564.  
  565.  
  566.  
  567.  
  568.  
  569.  
  570.  
  571.  
  572.  
  573.  
  574. </head>
  575.  
  576.  
  577.  
  578.  
  579.  
  580.  
  581.  
  582.  
  583.  
  584.  
  585.  
  586.  
  587. <body>
  588.  
  589.  
  590.  
  591.  
  592. {block:IfHeadSpace}
  593. <div class="headspace"><a href="{BlogURL}">{Title}</a></div>
  594. {/block:IfHeadSpace}
  595.  
  596. <a href="#targetname" name="-targetname" >Take me to GENERAL QUESTIONS</a>
  597.  
  598.  
  599.  
  600.  
  601.  
  602. <div id="content">
  603. {block:Posts}
  604.  
  605.  
  606. <!-- {block:Text}
  607. <div class="box text">
  608. {Title}
  609. {Body}
  610. </div>
  611. {/block:Text} -->
  612.  
  613.  
  614.  
  615. {block:Photo}
  616.  
  617. <a href="#">
  618. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="box photo" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body', 'html', 'img').toggleClass('tumblr_lightbox_active'); return false" />
  619. </a>
  620. {/block:Photo}
  621.  
  622.  
  623.  
  624.  
  625.  
  626.  
  627. {block:Photoset}
  628. <div class="box">
  629. {block:ifPostDetails}
  630. <h4>{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}</h4>
  631. {Caption}
  632. {/block:ifPostDetails}
  633. {block:ifNotStackPhotoset}
  634. <!--preset code to abide by pxu -->
  635. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  636.  
  637. {block:Photos}
  638. <div class="photo-data">
  639. <div class="pxu-photo">
  640. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  641. </div>
  642. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
  643. </a>
  644. </div>
  645. {/block:Photos}
  646. </div>
  647. {block:ifNotStackPhotoset}
  648.  
  649.  
  650.  
  651. {block:ifStackPhotoset}
  652. {block:IndexPage}
  653. <div class="photoset-wrap">
  654. {block:Photos}
  655. <!-- <a href="#"> for some reason loads all images in photoset-->
  656. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false" />
  657. <!-- </a> -->
  658.  
  659. {/block:Photos}
  660. <div class="photocount"><a href="{Permalink}">{PhotoCount}</a></div>
  661. </div>
  662. {/block:IndexPage}
  663. {/block:ifStackPhotoset}
  664.  
  665.  
  666.  
  667.  
  668. {block:PermalinkPage}
  669. <center>{Photoset}</center>
  670. {/block:PermalinkPage}
  671.  
  672.  
  673. </div>
  674. {/block:Photoset}
  675.  
  676.  
  677. {/block:Posts}
  678. </div>
  679.  
  680.  
  681.  
  682.  
  683. <a name="targetname" href="#-targetname">hello</a>
  684.  
  685.  
  686.  
  687. {block:ifSidebar}
  688. {block:IndexPage}
  689. <div class="sidebar">
  690.  
  691. <center><img src="{PortraitURL-64}" class="portrait" /></center>
  692.  
  693. </div>
  694. {block:IndexPage}
  695. {/block:ifSidebar}
  696.  
  697.  
  698.  
  699. <div class="navigation">
  700. {block:Pagination}
  701. {block:NextPage}
  702. <p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>
  703. {/block:NextPage}
  704. {block:PreviousPage}
  705. <a style="float:left" href="{PreviousPage}">? Newer</a></p>
  706. {/block:PreviousPage}
  707. {/block:Pagination}
  708. </div>
  709.  
  710.  
  711. {block:ifManualInfiniteScroll}
  712. {block:Pagination}
  713. <div class="pagination">
  714. <button class="load-more">load more</button>
  715. </div>
  716. {/block:Pagination}
  717. {/block:ifManualInfiniteScroll}
  718.  
  719.  
  720.  
  721.  
  722.  
  723.  
  724. </body>
  725. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement