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 x5090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

For non-touch computers: Hover only gallery - no clicking
For touch mobile devices: Click to show large images

Here's a very simple photogallery that reveals the larger photo and captions when you hover over the thumbnail for computers.

BUT since mobile touch devices DO NOT react to a hover state, this gallery changes itself to show larger photos and captions as an overlay using FancyBox when you touch a thumbnail. The only way to check this is to look at this example page with a mobile touch device (phone or tablet).

Photo 1 caption
Photo 2 caption
Photo 3 caption
Photo 4 caption
Photo 5 caption
Photo 6 caption
Photo 7 caption
Photo 8 caption
Photo 9 caption
Photo 10 caption
Photo 11 caption
Photo 12 caption
Photo 13 caption
Photo 14 caption
Photo 15 caption
Photo 16 caption
Photo 17 caption
Photo 18 caption
Photo 19 caption
Photo 20 caption

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

  1. Duplicate your photos so that you'll always have copies of your original photos
  2. Crop and/or resize your duplicated photos with a maximum HEIGHT between 450px and 600px
  3. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  4. Move your photos into your Websites/project#/photogallery folder - create the folder if needed.

Scripts needed (copy and paste inside <head>)-CHECK THAT YOU DON'T HAVE DUPLICATE LINES


<script src="https://www.freestyleacademy.rocks/jquery/modernizr.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script src="https://www.freestyleacademy.rocks/fancybox/mousewheel.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox.css" media="screen" />
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.css" media="screen" />
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-buttons.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-media.js"></script>
<link rel="stylesheet" href="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.css" media="screen" />
<script src="https://www.freestyleacademy.rocks/fancybox/fancybox-thumbs.js"></script>
<script src="https://www.freestyleacademy.rocks/fancybox/fancyboxCustom.js"></script>
<!-- Needed by for easing -->
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/css-transform.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/animate-css-rotate-scale.js"></script>
<script src="https://www.freestyleacademy.rocks/jquery/transit.js"></script><!--See https://ricostacruz.com/jquery.transit/-->
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/photogallery10.js"></script><--VERY IMPORTANT!!!!!!!-->

Here's the HTML Code

VERY IMPORTANT - Be sure to change the HTML code below with the correct project# instead of projectX and also the CAPTION for each photo


<div id="allThumbnails">
<div class="thumbnailImage"><img src="photogalleries/images/1.jpg" alt="Photo 1 caption" id="photo1"></div>
<div class="thumbnailImage"><img src="photogalleries/images/2.jpg" alt="Photo 2 caption" id="photo2"></div>
<div class="thumbnailImage"><img src="photogalleries/images/3.jpg" alt="Photo 3 caption" id="photo3"></div>
<div class="thumbnailImage"><img src="photogalleries/images/4.jpg" alt="Photo 4 caption" id="photo4"></div>
<div class="thumbnailImage"><img src="photogalleries/images/5.jpg" alt="Photo 5 caption" id="photo5"></div>
<div class="thumbnailImage"><img src="photogalleries/images/6.jpg" alt="Photo 6 caption" id="photo6"></div>
<div class="thumbnailImage"><img src="photogalleries/images/7.jpg" alt="Photo 7 caption" id="photo7"></div>
<div class="thumbnailImage"><img src="photogalleries/images/8.jpg" alt="Photo 8 caption" id="photo8"></div>
<div class="thumbnailImage"><img src="photogalleries/images/9.jpg" alt="Photo 9 caption" id="photo9"></div>
<div class="thumbnailImage"><img src="photogalleries/images/10.jpg" alt="Photo 10 caption" id="photo10"></div>
<div class="thumbnailImage"><img src="photogalleries/images/11.jpg" alt="Photo 11 caption" id="photo11"></div>
<div class="thumbnailImage"><img src="photogalleries/images/12.jpg" alt="Photo 12 caption" id="photo12"></div>
<div class="thumbnailImage"><img src="photogalleries/images/13.jpg" alt="Photo 13 caption" id="photo13"></div>
<div class="thumbnailImage"><img src="photogalleries/images/14.jpg" alt="Photo 14 caption" id="photo14"></div>
<div class="thumbnailImage"><img src="photogalleries/images/15.jpg" alt="Photo 15 caption" id="photo15"></div>
<div class="thumbnailImage"><img src="photogalleries/images/16.jpg" alt="Photo 16 caption" id="photo16"></div>
<div class="thumbnailImage"><img src="photogalleries/images/17.jpg" alt="Photo 17 caption" id="photo17"></div>
<div class="thumbnailImage"><img src="photogalleries/images/18.jpg" alt="Photo 18 caption" id="photo18"></div>
<div class="thumbnailImage"><img src="photogalleries/images/19.jpg" alt="Photo 19 caption" id="photo19"></div>
<div class="thumbnailImage"><img src="photogalleries/images/20.jpg" alt="Photo 20 caption" id="photo20"></div>
</div>

Here's the CSS Code - modify as needed for your design


*:focus {
outline:0;
}
#allThumbnails {
position:relative;
width:100%;
height:auto;
background-color:#000000;
}
.thumbnailImage {
width:120px;
height:auto;
margin:20px;
padding:5px;
border:1px solid #B3B1B1;
float:left;
position:relative;
z-index:10000;
border-radius:10px;
}
.thumbnailImage img {
width:120px;
height:auto;
cursor:pointer;
position:relative;
z-index:10001;
border-radius:10px;
}
#large_pic{
width:800px;
height:auto;
background-color: #3C3B3B;
position:absolute;
z-index:10002;
text-align:center;
padding:0;
color:#C3C3C3;
border-radius:20px;
font-family: Verdana;
}
#large_pic img{
width: 100%;
position:relative;
z-index:10003;
border-radius:20px;
}