Galleries and Drop-Downs

Goal

By the end of today, you will be able to:

1. Create a gallery of images
2. Create a generic event handler for clicking on the gallery items
3. attach it to images in the gallery
4. Start the implementation of a drop-down menu

Recap

We learned about galleries and drop-downs.

Galleries

• The gallery consists of a set of small versions (thumbnails) of the images we want the user to choose from.
• We also have a place for the large version to be. Its initial value is unimportant, though you should still make it look nice.
• The basic mechanism of the gallery behavior is:
  1. The user clicks on the gallery image
  2. An event handler runs
  3. The event handler figures out the URL for the large version of the image that was clicked on.
  4. The event handler sets the src attribute of the large img. That causes the large image to be displayed there.
• One good way to determine the URL for the large version is to store it on the thing that was clicked on, which will then be bound to this.

Our Destination

We're going to build an image gallery using jsfiddle. (I'll demo what we will build.)

Quiz Question Nr. 1

In the reading, we used an attribute named data-bigsrc. That attribute is defined by:

1. The HTML5 standard

2. The DOM

3. The programmer

4. All of the above

Quiz Question Nr. 2

If you make the thumbnails like this:

  <img src="big-version.jpg" alt="caption">

With CSS like this:

  #gallery img { width: 25% }

Wouldn't that avoid all the hassle with the data-bigsrc attribute?

1. Yes, but the gallery images would be the wrong size

2. Yes, but the gallery images would be slow to load

3. Yes, but the gallery images would have the wrong ALT

4. Yes, this is a perfectly good solution

Why Thumbnails?

A big picture, say from a digital camera, might be bigger than your screen. Let's suppose it's at least 1000px by 1000px and 250 KB in size. A thumbnail that is 200px by 200px is 1/25th the screen size and probably 1/25th the file size, too, so under 10KB in file size. It will therefore load from the server 25 times faster than the big version. So, thumbnails are worth the effort of creating them.

Quiz Question Nr. 3

In the code in the reading, we used the special variable this. It means:

1. The element we modify

2. The element we get the data from

3. The element in the DOM that the event happened to

4. None of the above

Exercise 1: Build a Gallery of Images

The first step is building our image gallery. We'll use images from this directory. Take a look at the filenames there and view some of the pictures. Note that the URLs will all start with http://cs.wellesley.edu/~cs110/reading/potterpics/

Let's start by creating all the HTML we will need. Starting with this image gallery v1 using jsfiddle.

• Add several additional thumbnails.
• Add the HTML for our enlargement image.
• The thumbnails are still a little big; use CSS to reduce them so that they'll all fit in the rendered area.
• Give an ID to whatever elements need it. Which ones do?
• No JavaScript (yet)!

Your solution might look like this:

Exercise 2: Write the event handler

With a partner, draft some code for the event handler function. You can go back to your image gallery v2.

Here are the conceptual steps:

• Write a function to do the work:
  • It grabs the bigsrc attribute off this. Hint: use the jQuery .attr() method.
  • Set the src attribute for the enlargement image. Use the .attr() method again.
• Attach that function to all four thumbnail images.

When you're ready to test, do this:

• Go to the gear icon at the upper right of the JavaScript box and open the settings. Where it says Frameworks & Extensions, choose jQuery 1.11.0.
• Add your code to the JS box
• Run the code and test the behavior of the gallery.
• Did it work?

Your solution might look like this:

function galleryClick() {
    var bigsrc = $(this).attr("data-bigsrc");
    $("#big img").attr("src", bigsrc);
}   

// Attach to every gallery image
$("#gallery img").click(galleryClick);
  

Exercise 3: Captions

This is a good start, but it lacks captions. Add that behavior. Here's a starting point: image gallery v3.

Your solution might look like this:

Drop-Downs Recap

• Drop-down menus have a click behavior that is a toggle: click once on the header, and the menu appears. Click again, and it disappears.
• The event handler function doesn't have any memory; it doesn't know whether it's a first click or a second click.
• It can, however, figure out whether the menu is showing. If it's showing, hide it. If it's hidden, show it.
• It can figure out whether the menu is showing by looking at the value of the display property. If it's display:none, the menu is hidden.

Drop-Downs

Our drop-downs will use a click to open/close the menu, unlike the rollover menus that have been common for many years. Our reasoning is that menus that use clicking will be more mobile-friendly.

Today, we'll keep things very specific. You'll get to more general approaches in lab.

Quiz Question Nr. 4

In the drop-down menu below, how did we get the page to not jump around when we show/hide the menu?

1. The menu is display:relative and its parent is display:absolute

2. The menu is display:absolute and its parent is display:relative

3. The menu is display:fixed

4. The menu is display:static

Example Drop-Down Menu

Click on the "Favorite Things" text

• Favorite Things:
  • raindrops on roses
  • whiskers on kittens
  • bright copper kettles
  • warm woolen mittens

Exercise 5: A Simple Drop-Down

Try the following using the menu above.

1. Open the Chrome Inspector and inspect the menu. What is its ID?
2. Toggle it by clicking on the header. How does the menu element change?
3. Toggle it again. How does it change this time?
4. Try typing the following code into the Chrome Inspector:

   $("#menu1").css("display");

5. Toggle the header and try that code again. Do this several times.

Draft some code for this drop-down. You'll need

• A function that does all the work
• The function should read the value of the display property and act accordingly, namely:
  • if it's closed, open it using .show(), and
  • if it's open, close it using .hide().
• Remember to attach the function to the header.

Your code might look like this:

Copy it to this jsfiddle and get the code to work.

Your result might look like this:

Summary

We hope that after these activities you have a good understanding of:

• Galleries and how to create them.
• Drop-downs and how to set them up.

Solutions

Will be posted later, visit again after .

1. C
2. B
3. C
4. B