{"id":35136,"date":"2022-02-22T12:35:59","date_gmt":"2022-02-22T12:35:59","guid":{"rendered":"https:\/\/assignmenttutors.net\/blog\/creating-an-image-gallery-application-cs208\/"},"modified":"2022-02-22T12:35:59","modified_gmt":"2022-02-22T12:35:59","slug":"creating-an-image-gallery-application-cs208","status":"publish","type":"post","link":"https:\/\/assignmenttutors.net\/blog\/creating-an-image-gallery-application-cs208\/","title":{"rendered":"Creating an image gallery application | CS208"},"content":{"rendered":"<div>\n<p>Starting with the downloadable assignment files, write the Javascript needed for the application. Use the book and lectures as a guide. In this exercise, you\u2019ll develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application below.<\/p>\n<p>1. \u00a0You\u2019ll find the HTML, CSS, and image files for this application in the week 6 folder<\/p>\n<p>You\u2019ll also find an empty JavaScript file named image_gallery.js. You can add your code to this file. Customize the interface with your first and last names.<\/p>\n<p>2. \u00a0In the JavaScript file, add an event handler for the ready() event method.<\/p>\n<p>3. \u00a0Use the each() method to run a function for each &lt;a&gt; element in the unordered list of items. Then, add jQuery code that gets the URL and caption for each image and preloads the image. You can get the URL from the href attribute of the &lt;a&gt; element, and you can get the caption from the title attribute.<\/p>\n<p>4. \u00a0Add an event handler for the click event of each link. The function for this event handler should accept a parameter named evt. The jQuery code for this event handler should display the image and caption for the link that was clicked. In addition, it should use the evt parameter to cancel the default action of the link.\u00a0<\/p>\n<p>5. \u00a0Add a jQuery statement that moves the focus to the first link on the page when the page is loaded.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Starting with the downloadable assignment files, write the Javascript needed for the application. Use the book and lectures as a guide. In this exercise, you\u2019ll develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application below. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-35136","post","type-post","status-publish","format-standard","hentry","category-education"],"_links":{"self":[{"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/posts\/35136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/comments?post=35136"}],"version-history":[{"count":0,"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/posts\/35136\/revisions"}],"wp:attachment":[{"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/media?parent=35136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/categories?post=35136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/assignmenttutors.net\/blog\/wp-json\/wp\/v2\/tags?post=35136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}