Lab 3 – 15/09/2020

Badger Website

Today, I worked on the Gallery page. Finishing its main content and responsive flex-box layout, allowing the images to wrap to new lines as the window increases and decreases in size while maintaining the aspect ratio of the images.

I built the pop-up menu, with a working close button. It will show the image in the black area, and an information pane, when it is hovered over (not yet implemented – the pane will remain mostly opaque until hovered over). The table of information and the download link will be populated with information based on what’s stored in the JavaScript dictionary for the image clicked on.

Using Javascript this keyword. A function can be called which gets the id of the image clicked. This is passed into the dictionary to locate all the information on that image. (dictionary shown below). JavaScript can then unpack this information and append them to the html table, add the download link to the “download Image” link, and set the preview to the file path of the image. Also removing this content when the pane is closed.

Leave a Reply

Your email address will not be published. Required fields are marked *