JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x0090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Photogallery with simple thumbnails

Here's a very simple photogallery with overlay captions. Features include:

Gallery of photos from 2017 Santa Clara Vanguard 50th Anniversary Alumni Corps

Black Square
66% Opaque Overlay
White caption text vertically lifted
Thick white border
White Circle
80% Opaque Overlay
Black caption text vertically centered
Thick black round border
Photo 33% wide
Green circle overlay
Red circle border
Photo 33% wide
Red circle overlay
Green circle border
Photo 33% wide
Yellow Square Overlay
Green thin overlay border
Circle photo 25% wide
Captions raised a lot
Margin around pic
Circle photo 25% wide
Captions raised a bit
Margin around pic
Circle photo 25% wide
Captions lowered a bit
Margin around pic
Circle photo 25% wide
Captions lowered a lot
Margin around pic
Square White Overlay
No Border
Caption lowered in square. This caption is a longer one so it is aligned left, not centered. Longer text should be left aligned, not center aligned
This is the 2nd longer sentence for the caption which is also aligned left, not centered.
Square Black Overlay
No Border
Caption raised in square. This caption is a longer one so it is aligned left, not centered. Longer text should be left aligned, not center aligned
This is the 2nd longer sentence for the caption which is also aligned left, not centered.
Photo 100% wide
Rounded corner overlay (not circle, not square)

Preparing your photos to match what the HTML is expecting to find

  1. Duplicate your photos so that you'll always have copies of your original photos.
  2. Move your duplicated photos into a new folder.
  3. Move the folder of duplicated photos into your UsernamE-Media > Documents > Digital Media Files > Websites folder.
  4. Crop your photos to be a square with edges no more than 750px.
  5. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  6. Move your photos in a folder labeled "g1" (required by HTML). If you already have a g1 folder because you've used this gallery before, then create a unique folder, say, g2.
  7. Upload the entire "g#" folder onto the webserver.
  8. Copy and paste the codes below

Here's the HTML Code

  1. On your WordPress webpage, insert a Custom HTML block.
  2. Copy and paste the code in yellow below into the Custom HTML Block
  3. VERY IMPORTANT - Be sure to change the pasted HTML code below with the following:
    • Each small block is needed for each photo. Add/delete as necessary
    • If you want more than 12 photos, copy lines 124-133 below and paste it above the <div class="clearFloats"></div> line for as many new photos you need and make sure to change the newly pasted code src="../g1/#.jpg" matches name of the photos such as 13.jpg, 14.jpg, etc.
    • For each new small block check id="photo#" and id="photoOverlay#" matches the src="../g1/#.jpg"
    • If your photos are in a folder named g2 (instead of g1), then for each small block change the src="../g1/#.jpg" to src="../g2/#.jpg".
    • For each small block, change "Caption Title, "Sub Title 1", "Sub Title 2"
    • For each small block, if you don't want "Sub Title 2", delete the <div class="overlaySubTitle1">Sub Title 2</div> line
    • For each small block, if you don't want "Sub Title 1", delete the <div class="overlaySubTitle1">Sub Title 1</div> line

    <div class="photos">

    <div class="photo" id="photo1">
    <img src="../g1/1.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay1">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo2">
    <img src="../g1/2.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay2">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo3">
    <img src="../g1/3.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay3">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo4">
    <img src="../g1/4.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay4">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo5">
    <img src="../g1/5.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay5">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo6">
    <img src="../g1/6.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay6">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo7">
    <img src="../g1/7.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay7">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo8">
    <img src="../g1/8.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay8">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo9">
    <img src="../g1/9.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay9">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo10">
    <img src="../g1/10.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay10">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo11">
    <img src="../g1/11.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay11">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>

    <div class="photo" id="photo12">
    <img src="../g1/12.jpg" alt=""/>
    <div class="photoOverlay" id="photoOverlay12">
    <div class="titles">
    <div class="overlayCaptionTitle">Caption Title</div>
    <div class="overlaySubTitle1">Sub Title 1</div>
    <div class="overlaySubTitle2">Sub Title 2</div>
    </div>
    </div>
    </div>


    <div class="clearFloats"></div>
    </div>

    Here's the CSS Code

    1. Copy the code in yellow below.
    2. On your WordPress webpage, scroll down to the bottom and expand the "Scripts-n-Styles" section if not already expanded.
    3. In the Styles section of "Scripts-n-Styles", paste in the yellow copied code below.
    4. Click on Update Styles at bottom then click on Update at top right. Then view your page. It should have the default of 2 photos in 1 row with a round overlay and caption text vertically centered. If you don't see the photos, look for and fix possible errors and/or ask for help.
    5. Hover over the images in the example gallery above to determine what kind of styles you want for your gallery. For consistency, choose one style (rather than the multiple styles like the gallery above which is only for the purpose of showing you examples of what you CAN do with styles).
    6. VERY IMPORTANT - In the Styles section of "Scripts-n-Styles", look at lines 7-64 and make the changes to what YOU want for your gallery.
    7. Please ask if there are other kinds of changes you want to make but don't know how to do it.


    .photos *:focus {
    outline:0;
    }
    .photos * {
    box-sizing:border-box;
    }
    .photo {/*How wide is each photo?
    2 across = 50%
    3 across = 33.3%
    4 across = 25%
    5 across = 20%
    etc.*/
    width: 50%;
    }
    .photo img {/*Square or round photo?
    round = 50%
    square = 0%
    */
    border-radius: 0%;
    }
    .photoOverlay {/*What color do you want the overlay background? Use hexidecimal.
    white = #ffffff
    black = #000000
    etc.*/
    background-color: #000000;
    /*How do you want to style the border of the overlay*/
    border: 10px #fff solid;
    border-radius: 50%;/*circle = 50%, 0% = square*/
    }
    .photoOverlay:hover {/*How transparent do you want the overlay?
    80% opaque = 0.8
    65% opaque = 0.65
    47% opaque = 0.47
    etc.*/
    opacity: 0.65;
    }
    .titles {/*How do you want to change the VERTICAL position of overlay titles?
    0% = vertically centered
    10% higher = 10%
    25% higher = 25%
    40% lower = -40%
    etc.*/
    margin-bottom: 0%;
    }
    .titles div {/*What color do you want the overlay text? Use hexidecimal.
    white = #ffffff
    black = #000000
    etc.*/
    color: #FFFFFF;
    }
    .overlayCaptionTitle {/*How do you want to style the Caption Title*/
    font-size: 2.1rem;
    padding-bottom: 20px;
    text-align: center;/*center, left, or right*/
    }
    .overlaySubTitle1 {/*How do you want to style the Sub Title 1*/
    font-size: 1.4rem;
    padding-bottom: 10px;
    text-align: center;/*center, left, or right*/
    }
    .overlaySubTitle2 {/*How do you want to style the Sub Title 2*/
    font-size: 1.1rem;
    text-align: center;/*center, left, or right*/
    }
    /*-------Don't change anything below here------------*/
    .photos {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    z-index: 0;
    }
    .photo {
    float: left;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
    .photo img {
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    }
    .photoOverlay {
    box-sizing: border-box;
    z-index: 3;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    -webkit-transition: all 500ms ease-in-out 0s;
    -o-transition: all 500ms ease-in-out 0s;
    transition: all 500ms ease-in-out 0s;
    }
    .photoOverlay:hover {
    cursor: pointer;
    }
    .titles {
    z-index: 2;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    }
    .titles div {
    width: 100% !important;
    height: auto;
    max-height: 2em;
    display: block;
    padding-right: 10px;
    padding-left: 10px;
    }
    .clearFloats {
    width: 100%;
    clear: both;
    height: 0px;
    }
    @media screen and (max-width:480px){
    .photo {
    width: 100%;
    }
    }