WBG310 Lab 3 Week 5 – Part A – Image Gallery, Part B – Horizontal Menu – code with screenshots – Perfect Solution – Instant Delivery

Lab Price = $65
Please feel free to send us your queries at: support@iqrajavaid.com
Payment methods

Add to Cart

Buy Now

View Cart


Problem Statement

Lab Steps
Part 1: Create an Image Gallery
STEP 1: Collect or Create Images
1. Collect or create six images. You can use http://library.devry.edu/ (Links to an external site.) and log into the Britannica Online, or you also may choose from your own collection of images.
2. Choose six images that are at least 600 pixels in one dimension. The images can be part of a theme, or they can be random selections.
STEP 2: Prepare and Optimize
1. Use an image processing program to process the images and place the collection into a folder. Change the name of the images to match the sequence in which they will appear in your gallery.
2. Create thumbnail versions of each image, between 75 and 100 pixels, at the largest dimension.
TIP: Thumbnail galleries look better if you have even dimensions for all thumbnails. Making all thumbnails 75 x 75 will improve the look of your initial gallery, but it may mean cropping the thumbnails to obtain this uniformity. Don’t skew the proportions to get an even size!
HINT: A suggested folder structure for your images would be to create an images folder and create large and thumb folders within. This is not completely necessary, as long as you understand how to maintain the structure so that all your links work correctly.
3. Optimize all images for the Web. Choose 80% high-quality, JPEG for photos.
STEP 3: Build a Gallery Page
1. Create a thumbnail gallery of images from the ones created in the previous steps. Link them to the larger versions of the images. Save the file as gallery.html.
STEP 4: Locate and Link the Appropriate jQuery Libraries
1. Link the appropriate jQuery libraries and plugins to your gallery page.
2. Add the code to make the images open in an overlay. Include code to cycle through the images while the overlay is active.
STEP 5: Style the Page and Zip Your Files
1. Create a style sheet that is appropriate for the page. Link the CSS file in the head of the document.
2. When the gallery works as expected, zip all of your files together and submit your assignment.
Part 2: Create a Navigation Menu
STEP 1: Categorize Your Information
1. Create a list of navigation topics (and subtopics) that you would include in your website. Include the following in your list.
• Home
• About
• Contact
• FAQ
• Product
o Product name 1
o Product name 2
• Service
o Service name 1
o Service name 2
STEP 2: Create the Unordered List
1. Create an HTML page and style it appropriately. Save the file as menu.html.
2. Create the unordered list that contains the items from the previous step. Make sure that you have nested the lists properly for the hiding and revealing of menu items.
STEP 3: Set Styles for the List
1. Create a style section in your styles for the following attributes.
• Remove the bullets from the list items.
• Display the items side by side.
• Hide the submenu items.
2. Add link tags to the list items, and set the href value to “#.”
STEP 4: Locate and Link the Appropriate jQuery Libraries
1. Link the appropriate jQuery libraries and plugins to your navigation menu page.
2. Add the code to make the menu items behave like a drop-menu.
STEP 5: Link One Page
1. When you have the menu working properly for drop-list behavior, save the menu page as product.html. Place a heading below the menu that declares the product name listed in your menu.
2. Return to the original menu page and link the product to the appropriate menu selection in the list, replacing the “#” href value.
STEP 6: Style the Page and Zip Your Files
1. Create a style sheet that is appropriate for the page. Link the CSS file in the head of the document.
2. When the menu works as expected, zip all of your files together, and submit your assignment.

Relevant Material
Screenshots
Lab 3: Gallery
Lab 3: Gallery
Lab 3: Modal Overlay
Lab 3: Modal Overlay
Lab 3: Menu
Lab 3: Menu
Instructions
* If you want to purchase multiple products then click on “Buy Now” button which will give you ADD TO CART option.Please note that the payment is done through PayPal.
* You can also use 2CO option if you want to purchase through Credit Cards/Paypal but make sure you put the correct billing information otherwise you wont be able to receive any download link.
* Your paypal has to be pre-loaded in order to complete the purchase or otherwise please discuss it with us at support@iqrajavaid.com.
* As soon as the payment is received, download link of the solution will automatically be sent to the address used in selected payment method.
* Please check your junk mails as the download link email might go there and please be patient for the download link email. Sometimes, due to server congestion, you may receive download link with a delay.
* All the contents are compressed in one zip folder.
* In case if you get stuck at any point during the payment process, please immediately contact us at support@iqrajavaid.com and we will fix it with you.
* We try our best to reach back to you on immediate basis. However, please wait for atleast 8 hours for a response from our side. Afterall, we are humans.
* Comments/Feedbacks are truely welcomed and there might be some incentives for you for the next lab/quiz/assignment.
* In case of any query, please donot hesitate to contact us at support@iqrajavaid.com.
* MOST IMPORTANT Please use the tutorials as a guide and they need NOT to be used for any submission. Just take help from the material.
******************************************** Good Luck ***************************************************
Privacy Policy
We take your privacy seriously and will take all measures to protect your personal information.
Any personal information received will only be used to fill your order. We will not sell or redistribute your information to anyone.
Refund Policy
Incase you face any issues with the tutorial, please free to contact us on support@iqrajavaid.com
We will try our best to resolve the issue and if still persists we can discuss for a refund in case its required.
Payment Details
Lab Price = $65
Please feel free to send us your queries at: support@iqrajavaid.com
Payment methods

Add to Cart

Buy Now

View Cart