Wednesday, January 11th

Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org

Week Eighteen

Today’s Notes

Today is an EHS B Day
Milton Early Release – not an Early Release for BFA
Break will be at 11am today due to visitors
Five Visitors Today: 5 Minute Rotations
- Ryan
- Garrett
- Kaden
- Finn
- Hayden
  - Show your very favorite piece of work and/or demo a concept/skill that is useful to know in the CAWD program
Graphic Literacy WorkKeys Assessment – Thursday, January 12th @ 10:00am Room E109
- Finn, Andy, Eric, Tom, Hayden, Lance
Public Issues midterm Study Session from 1:30-2:00 today (Lance and Emmit you are excused at 1:25
Schuyler(11:30am), Eli(11:00am), Tom(11:00am) – Wednesday, January 11th
- Black Pants
- White Top
- Resume in hand
- Arrive 10 minutes before your scheduled time (refer to your email)
- Job Skill Technical Standards
- Job Interview Technical Standards

9:40 Attendance

9:45 Photo Lightbox with CSS

Lightbox Definition: a lightbox popup is a window overlay that appears on top of a webpage, blocking some of the content on the page. When a popup appears, the background is often dimmed and disabled, meaning that site visitors cannot interact with other content on the website.

Let’s work together and code a custom lightbox. I built an example last night for your reference and you may use my images to get started. You can substitute your own later if you like. Photos are in Cawd2Dailies folder.

Remember, before break we built another image gallery that included a hover effect. An image gallery is a great way for you to display your work. The one we will do together today will be done with only HTML and CSS.

<!--HTML CODE -->
<body>
    <h1>Lightbox Example</h1>
    <section class="img-container">
        <!-- we are going to put the images in the anchor tag -->
        <a href="#img1"><img src="images/leaves.jpeg" alt="leaves"></a>
        <a href="#img2"><img src="images/pinecone.jpeg" alt="pinecone"></a>
        <a href="#img3"><img src="images/school.jpeg" alt="school"></a>
    </section>

    <!-- /* img container hidden with css */ -->

    <a href="#" class="lightbox" id="img1">
        <span class="imageone"></span>
        <figcaption>Leaves during peak</figcaption>
    </a>

    <a href="#" class="lightbox" id="img2">
        <span class="imagetwo"></span>
        <figcaption>Pinecone Season</figcaption>
    </a>

    <a href="#" class="lightbox" id="img3">
        <span class="imagethree"></span>
        <figcaption>School in color</figcaption>
    </a>
    
</body>

/* CSS CODE */
img{
    max-height:50vh; /*sets the max height of all images to 50% of browser*/
    max-width:100%;
}

section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    gap: 1em;
}

/* lightbox markup */
.imageone{
    background-image: url("../images/leaves.jpeg");
}
.imagetwo{
    background-image: url("../images/pinecone.jpeg");
}
.imagethree{
    background-image: url("../images/school.jpeg");
}

.lightbox{
    display:none; /* default to hidden*/

    /* overlay for the entire screen */
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:999;/* z-index only works on positioned elements */
    padding:1em;/* to create some padding around the lightbox image*/
    background: rgba(0,0,0,.9);/* creates a translucent background*/
}
/* now to unhide the lightbox we'll use a target */
/* using :target will highlight the active HTML anchor which allows us to keep the lightbox visible  */
.lightbox:target{
    display: block;
}

.lightbox >span{
    display: block; /* this will display the image in the span */
    max-width: 80%; /*sets the size of the image and makes it responsive*/
    height: 80%;
    background-position: center; /* centers the image */
    background-repeat: no-repeat; /* prevents repeating the image */
    background-size: contain; /*keeps the image in the container */
    margin: 0 auto; /* centers the image */
   
}
figcaption{
    color: white;
    text-decoration: none;
    text-align: center;
   
}