Scribd
Upload
6 views3 pages

Lab 8 HW

Uploaded by

lovemysilf2017
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views3 pages

Lab 8 HW

Uploaded by

lovemysilf2017
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

University of Jeddah

College of Computer Science and Engineering


Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

]CLO 2.2[ --------------------------------------------------


------------------------------------------------
LAB ACTIVITY #8 : JavaScript For Web
Total Marks: 1

Objectives
The objective of this lab is to learn about how
 Demonstrating understanding of jQuery library and its usage.
 Practicing DOM manipulation using jQuery.
 Implementing an interactive image gallery with navigation.
 Enhancing user experience by providing image previews and captions.
 Applying event handling techniques for image selection and navigation.

By completion of the lab the students should be able to:


 Implement client-side application logic using JavaScript

Lab Requirements
 Notepad++
 VS Code.
 jQuery
 JavaScript reference.

Deliverables
There web pages: index.html, gallery.css, gallery.js, image1.jpeg, image2.jpeg,
image3.jpeg

1
University of Jeddah
College of Computer Science and Engineering
Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

]CLO 2.2[ --------------------------------------------------


------------------------------------------------

Lab Assessment

Task: Interactive Image Gallery with jQuery


Your task is to create a simple interactive image gallery using jQuery. The image
gallery should allow users to navigate through a collection of images. The gallery
should provide previous/next navigation buttons for a seamless browsing experience.
Requirements:
1. Find any three images that you like to use for this lab homework.
2. Initially, only the first image should be visible, while the rest are hidden.
3. Implement navigation buttons to move between the images: Previous and
Next.
4. When the Previous button is clicked, the current image should be hidden, and
the previous image in the collection should be displayed.
5. When the Next button is clicked, the current image should be hidden, and the
next image in the collection should be displayed.
6. Implement a circular navigation, so when the first image is displayed and the
Previous button is clicked, it should navigate to the last image, and vice versa.
7. Add appropriate event handlers to handle button clicks.
8. Style the image gallery and navigation buttons using CSS to make it visually
appealing.

2
University of Jeddah
College of Computer Science and Engineering
Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

]CLO 2.2[ --------------------------------------------------


------------------------------------------------

Screen shots:

You might also like