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

  1. Duplicate your photos so that you'll always have copies of your original photos!!!!!!!
  2. Include your caption in the photo itself
  3. Crop and/or resize your duplicated photos with a maximum width of 1500px
  4. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  5. Move your images into a projectX/images/gallery folder
  6. Copy and paste the codes below

NO Scripts needed

Here's the HTML code


<div id="allStrips">
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/1.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/2.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/3.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/4.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/5.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/6.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/7.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/8.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/9.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/10.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/11.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/12.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/13.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/14.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/15.jpg"/></figure>
</div>
<div class="stripGallery"> <a class="galleryArrow" href="#">&darr;</a>
<figure> <img src="projectX/images/gallery/16.jpg"/></figure>
</div>
</div>

Here's the CSS - obviously modify as needed


#allStrips {
width:1280px;
height:800px;
position:relative;
margin:0 auto;
padding:20px;
overflow:visible;
}
#allStrips a {
text-decoration: none;
color: rgba(251,251,251,1.00);
}
#allStrips a:hover {
opacity: 0.5;
color:rgba(255,255,255,1.00);
}
#allStrips a:active {
position: relative;
top: 1px;
opacity: 0.3;
}
/* galleryArrow */
.stripGallery .galleryArrow {
font-size: 3em;
line-height: 2.7em;
text-align: center;
position: fixed;
width: 80px;
height: 80px;
top: 100px;
display: none;
}
.stripGallery:hover .galleryArrow {
display: block;
}
/* Strip Gallery ------------------------------------------------- */
.stripGallery {
width: 80px;
overflow: hidden;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
padding-top: 0px;
float: left;
-webkit-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-moz-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-ms-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
-o-transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
transition: padding-top 0.2s cubic-bezier(0, 1, 0, 1);
}
.stripGallery:hover {
z-index: 1;
position: relative;
overflow: visible;
padding-top: 80px;
-webkit-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-ms-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
-o-transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
transition: padding-top 0.5s cubic-bezier(0, 0.75, 0, 1);
}
.stripGallery figure {
text-align:center;
}
.stripGallery figure img{
margin-left: -80px;
}
.stripGallery:hover figure img {
margin-left: 0px;
box-shadow: 0px 2px 20px rgba(0,0,0,0.5);
border-radius: 30px;
border-top-left-radius: 0px;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-moz-transition: -moz-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-ms-transition: -ms-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
-o-transition: -o-transform 0.2s cubic-bezier(0, 0.75, 0, 1);
transition: transform 0.2s cubic-bezier(0, 0.75, 0, 1);
}
.stripGallery div {
min-width: 80px;
min-height: 105px;
}