Overview The intent of this assignment is to demonstrate your understanding of JavaScript and jQuery. You will be using

Post by **answerhappygod** » Mon Jul 11, 2022 9:49 am

: Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 1 (582.59 KiB) Viewed 46 times

: Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 2 (151.1 KiB) Viewed 46 times

: Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 3 (16.45 KiB) Viewed 46 times

CSS File (gallery.css):

: Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 4 (17.05 KiB) Viewed 46 times

Overview The intent of this assignment is to demonstrate your understanding of JavaScript and jQuery. You will be using an existing open-source front-end CSS framework called Bootstrap. CSS frameworks make it easier and more efficient to develop front-end interfaces that use advanced CSS features. In this assignment, you will build a photo gallery using jQuery for a travel photo sharing site as shown in Figure 1. The required starting files to complete the assignment (which includes the Bootstrap framework) can be found in a compressed file called assign2-start.zip which can be downloaded via Canvas (Assignments → Assignment 2 → assign2-start.zip). Please navigate through the zip file to familiarize yourself with the structure of the files and the Bootstrap framework. & chapter10-project2htmi Share Your Travels Home About Contact Browse The mouseenter handler will add the class "gray" to the moused over image. The mouseenter handler will also add a <div> with id="preview" that will contain a larger version of image and a caption. This preview <div> should also be faded in over 1 second. The mouseleave handler will have to remove the gray class and remove the preview <div> The mousemove handler will have to recalculate the top and left CSS properties based on the mouse position. Submit Chapter 10-project-ended Share Your Travels The images.js file contains an array of image objects (examine data.json to see all the formatted data). Loop through this array outputting the appropriate <img> tags as list items within the provided <ul> element. The alt attribute should be set to the title property of the image object. You are going to create handlers for the mouseenter, mouse leave, and mousemove events of each of these images. The top and left CSS properties of this <div> will have to be offset from the current mouse position. Arch of Septimus Severus Rome, Italy August 15, 2017) Submit The caption displays information for the image.
Instructions 1. Examine assign2.html in the browser and then a source code editor (e.g. Visual Studio Code). You have been supplied with the appropriate CSS (the relevant classes are in gallery.css), html, and JavaScript data files (an array of image objects are in images.js file). The data is minimized in that file. Hence, there is an additional file called data.json which contains the data in an easy-to- read format. The images are supplied in two folders: images/square (for the gallery) and images/medium (for the popup). 2. Loop through the images array and using the appropriate jQuery DOM methods, add the appropriate <img> tags to the supplied <ul class="gallery">> element. The image filenames are contained in the path property of each image object. Set the alt attribute of each <img> to the title property of the image object. 3. Use jQuery to attach handlers for the mouseenter, mouseleave, and mousemove events of the square images in the gallery. 4. For the mouseenter event, use jQuery to add the "gray" class to the square <img> under the mouse. If you examine that class, you will see it sets the filter property to grayscale(). Hint: remember that $(this) within an event handler references the DOM object that generated the event. 5. Also for the mouseenter event, use jQuery to generate a <div> with an id="preview" (the styling for #preview is already defined in gallery.css). Within that <div> add an <img>element that displays the larger version of the image. Underneath that <img> add a <p> element for the caption. The information for the caption and image are contained within the images array. The alt attribute of the square image under the mouse contains the image title. You can search through the images array looking for a match on the title; once a match is found, you have the file path, city, country, and date information. 6. You will need to use jQuery to set the left and top CSS properties for the #preview<div>. You can retrieve the x, y coordinates (via the pageX and pageY properties) of the current mouse position from the event object that is passed to your event handler. You can calculate the new position by offsetting by some amount from the mouse x, y position. 7. Finally, once the #preview <div> is constructed, simply append it to the <body>. 8. For the mouseleave event, remove the "gray" class from the square image under the mouse. Also remove the #preview<div> from the body. 9. For the mousemove event, simply set the left and top CSS properties for the #preview <div> using the same approach as described in step 6.
Testing 10. Verify the code works when mousing over the images. Be sure that the caption is displaying the correct information. 11. Don't worry if the pop-up image is "off screen" when mousing over images on the edges of the browser.
.gallery { } .gallery li{ } list-style-type: none; margin: 0px; padding: 0px; } .gallery img{ margin: 0px; padding: 0px; float: left; z-index: 4; float: left; padding: 0px; position: relative; overflow: hidden; #preview { } position: absolute; padding: 10px 10px 0 10px; display: none; background-color: #424242; } #preview p { color: white; margin-top: 3px; margin-bottom: 3px; } .gray { filter: grayscale (100%); -webkit-filter: grayscale (100%);