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.
- Large image and caption is displayed when you hover over the each thumbnail
- The main page will animate to a blur when you hover over a thumbnail to reveal the larger image
- Larger images reposition themselves vertically middle of the browser screen
- Large images reposition themselves relative to the mouse so that they don't display off the right edge of the browser screen
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).
Preparing your photos to match what the script is expecting to find
- Duplicate your photos so that you'll always have copies of your original photos
- Crop and/or resize your duplicated photos with a maximum HEIGHT between 450px and 600px
- Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
- 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;
}