- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 1 (397.75 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 2 (220.1 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 3 (20.82 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 4 (93.36 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 5 (30.86 KiB) Viewed 27 times
(gallery.css):
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 6 (26.98 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 7 (68.37 KiB) Viewed 27 times
- Overview The Intent Of This Assignment Is To Demonstrate Your Understanding Of Javascript And Jquery You Will Be Using 8 (7.27 KiB) Viewed 27 times
All editing should be within the files I provided, but the htmlis the most
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. rigure 1: Nockup or Assigntment 2
Instructions 1. Examine assign 2.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-toread 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 -imgs tags to the supplied < class="gallery"' element. The image filenames are contained in the path property of each image object. Set the alt attribute of each 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 eimgs under the mouse. If you examine that class, you will see it sets the filter property to grayscale0. 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 edivs add an 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 imagetitle. 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 #previewudiv >. 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 sbody>. 8. For the mouseleave event, remove the "gray" class from the square image under the mouse. Also remove the "previewedivs from the body. 9. For the mousemove event, simply set the left and top CSS properties for the Hpreview edivs 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.
/html>
.caption-style-2 . caption-text \{ z-index: 10; color: #fff; position: absolute; width: 225px; height: 225px; text-align: center; top:20px;