{"id":793,"date":"2023-03-06T14:40:49","date_gmt":"2023-03-06T14:40:49","guid":{"rendered":"https:\/\/thoth.dk\/?page_id=793"},"modified":"2024-09-04T08:56:25","modified_gmt":"2024-09-04T08:56:25","slug":"aos-and-a-jquery-event","status":"publish","type":"page","link":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/","title":{"rendered":"AOS and a jQuery Event"},"content":{"rendered":"\n<p class=\"per_roed wp-block-paragraph\">In this tutorial you will learn to use <a href=\"https:\/\/releases.jquery.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">jQuery<\/a> with <a href=\"https:\/\/michalsnik.github.io\/aos\/\" target=\"_blank\" rel=\"noreferrer noopener\">AOS<\/a>. It is asumed that jQuery is available. If not please add the jQuery CDN either to your WordPress in general (<a href=\"https:\/\/thoth.dk\/index.php\/jquery-and-wordpress\/\" data-type=\"page\" data-id=\"615\">see this tutorial<\/a>), or add the CDN code to your page. In this case I&#8217;ve loaded jQuery already.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First add the AOS CDN:<\/p>\n\n\n\n<link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\">\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;link href=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.css\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now add an image, and add an HTML anchor to the image (id) in the block settings:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aafe31933f3b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aafe31933f3b\" class=\"wp-block-image aligncenter size-full wp-lightbox-container\" id=\"imgMagus\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg\" alt=\"Manga programmer\" class=\"wp-image-689\" title=\"\" srcset=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg 512w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer-300x300.jpeg 300w, https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer-150x150.jpeg 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Click the IMAGE above, and see AOS in action.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After the image, towards the bottom of your page\/post add the AOS CDN JavaScript.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n  AOS.init();\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<script src=\"https:\/\/unpkg.com\/aos@2.3.1\/dist\/aos.js\"><\/script>\n<script>\n  AOS.init();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Now add jQuery for a click event on the image:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;script&gt;\n$(document).ready(function(){\n\n$('#imgMagus').click(function(){\n\n   $('#imgMagus')\n    .attr('data-aos', 'fade-up')\n    .attr('data-aos-anchor-placement','center-bottom');\n\n})\n\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The jQuery code is straight foreward. The selector selects the <strong>#imgMagus<\/strong> id. Then a few attributes are defined by .attr() by key value pairs. According to the documentation, the data-aos is the actual effect. Anchor-placement will define how the movement will be.<\/p>\n\n\n\n<script>\n$(document).ready(function(){\n\n$('#imgMagus').click(function(){\n\n   $('#imgMagus')\n    .attr('data-aos', 'fade-up')\n    .attr('data-aos-anchor-placement','center-bottom');\n\n})\n\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial you will learn to use jQuery with AOS. It is asumed that jQuery is available. If not please add the jQuery CDN either to your WordPress in general (see this tutorial), or add the CDN code to your page. In this case I&#8217;ve loaded jQuery already. First add the AOS CDN: Now [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-793","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AOS and a jQuery Event - Wordpress og WooCommerce<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AOS and a jQuery Event - Wordpress og WooCommerce\" \/>\n<meta property=\"og:description\" content=\"In this tutorial you will learn to use jQuery with AOS. It is asumed that jQuery is available. If not please add the jQuery CDN either to your WordPress in general (see this tutorial), or add the CDN code to your page. In this case I&#8217;ve loaded jQuery already. First add the AOS CDN: Now [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/\" \/>\n<meta property=\"og:site_name\" content=\"Wordpress og WooCommerce\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-04T08:56:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimeret l\u00e6setid\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/\",\"url\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/\",\"name\":\"AOS and a jQuery Event - Wordpress og WooCommerce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/programmer.jpeg\",\"datePublished\":\"2023-03-06T14:40:49+00:00\",\"dateModified\":\"2024-09-04T08:56:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/programmer.jpeg\",\"contentUrl\":\"https:\\\/\\\/thoth.dk\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/programmer.jpeg\",\"width\":512,\"height\":512,\"caption\":\"Manga Guy\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/index.php\\\/aos-and-a-jquery-event\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thoth.dk\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AOS and a jQuery Event\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thoth.dk\\\/#website\",\"url\":\"https:\\\/\\\/thoth.dk\\\/\",\"name\":\"Wordpress og WooCommerce\",\"description\":\"Syv kreative dage med WordPress og WooCommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thoth.dk\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AOS and a jQuery Event - Wordpress og WooCommerce","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/","og_locale":"da_DK","og_type":"article","og_title":"AOS and a jQuery Event - Wordpress og WooCommerce","og_description":"In this tutorial you will learn to use jQuery with AOS. It is asumed that jQuery is available. If not please add the jQuery CDN either to your WordPress in general (see this tutorial), or add the CDN code to your page. In this case I&#8217;ve loaded jQuery already. First add the AOS CDN: Now [&hellip;]","og_url":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/","og_site_name":"Wordpress og WooCommerce","article_modified_time":"2024-09-04T08:56:25+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimeret l\u00e6setid":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/","url":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/","name":"AOS and a jQuery Event - Wordpress og WooCommerce","isPartOf":{"@id":"https:\/\/thoth.dk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/#primaryimage"},"image":{"@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/#primaryimage"},"thumbnailUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg","datePublished":"2023-03-06T14:40:49+00:00","dateModified":"2024-09-04T08:56:25+00:00","breadcrumb":{"@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/"]}]},{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/#primaryimage","url":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg","contentUrl":"https:\/\/thoth.dk\/wp-content\/uploads\/2023\/02\/programmer.jpeg","width":512,"height":512,"caption":"Manga Guy"},{"@type":"BreadcrumbList","@id":"https:\/\/thoth.dk\/index.php\/aos-and-a-jquery-event\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thoth.dk\/"},{"@type":"ListItem","position":2,"name":"AOS and a jQuery Event"}]},{"@type":"WebSite","@id":"https:\/\/thoth.dk\/#website","url":"https:\/\/thoth.dk\/","name":"Wordpress og WooCommerce","description":"Syv kreative dage med WordPress og WooCommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thoth.dk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"}]}},"_links":{"self":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/comments?post=793"}],"version-history":[{"count":24,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/793\/revisions"}],"predecessor-version":[{"id":2937,"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/pages\/793\/revisions\/2937"}],"wp:attachment":[{"href":"https:\/\/thoth.dk\/index.php\/wp-json\/wp\/v2\/media?parent=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}