Useful Stuff About:
Expanding Round Thumbnail to Rectangular Full Size image on Click
Click on an image below to see the gallery animation
This is an example of dynamically resizing images when you click on an image. Click once to resize large and then click again to resize small or click on another image to resize small the current large photo and then resize large the clicked photos. This is done with a jquery click function. This is an example of dynamically resizing images when you click on an image. Click once to resize large and then click again to resize small or click on another image to resize small the current large photo and then resize large the clicked photos. This is done with a jquery click function.
Photo prep:
- Create a folder labeled "gallery" in your project#/images folder
- Make COPIES of all your photos so that you'll still have originals for future use
- Move your COPIED photos in your newly created gallery folder
- Use Shrink-O-Matic to resize all photos with max width of 1000px
- Use NameChanger to rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, etc.
Here's the code that makes this all work:
Scripts needed (copy and paste inside <head>)
<script src="https://www.freestyleacademy.rocks/jquery/minified.js"></script><!--only ONE of these on the page-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.js"></script><!--only ONE of these on the page-->
<script src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script><!--only ONE of these on the page-->
<script src="https://www.freestyleacademy.rocks/jquery/photogallery14.js"></script><!--REQUIRED-->
Here's an example HTML code
<div id="gallery">
<figure><img src="project#/images/gallery/1.jpg" id="pic1"/><figcaption>Photo 1 caption</figcaption></figure>
<figure><img src="project#/images/gallery/2.jpg" id="pic2"/><figcaption>Photo 2 caption</figcaption></figure>
<figure><img src="project#/images/gallery/3.jpg" id="pic3"/><figcaption>Photo 3 caption</figcaption></figure>
<figure><img src="project#/images/gallery/4.jpg" id="pic4"/><figcaption>Photo 4 caption</figcaption></figure>
<figure><img src="project#/images/gallery/5.jpg" id="pic5"/><figcaption>Photo 5 caption</figcaption></figure>
<figure><img src="project#/images/gallery/6.jpg" id="pic6"/><figcaption>Photo 6 caption</figcaption></figure>
<figure><img src="project#/images/gallery/7.jpg" id="pic7"/><figcaption>Photo 7 caption</figcaption></figure>
<figure><img src="project#/images/gallery/8.jpg" id="pic8"/><figcaption>Photo 8 caption</figcaption></figure>
<figure><img src="project#/images/gallery/9.jpg" id="pic9"/><figcaption>Photo 9 caption</figcaption></figure>
<figure><img src="project#/images/gallery/10.jpg" id="pic10"/><figcaption>Photo 10 caption</figcaption></figure>
<figure><img src="project#/images/gallery/11.jpg" id="pic11"/><figcaption>Photo 11 caption</figcaption></figure>
<figure><img src="project#/images/gallery/12.jpg" id="pic12"/><figcaption>Photo 12 caption</figcaption></figure>
<figure><img src="project#/images/gallery/13.jpg" id="pic13"/><figcaption>Photo 13 caption</figcaption></figure>
<figure><img src="project#/images/gallery/14.jpg" id="pic14"/><figcaption>Photo 14 caption</figcaption></figure>
<figure><img src="project#/images/gallery/15.jpg" id="pic15"/><figcaption>Photo 15 caption</figcaption></figure>
<figure><img src="project#/images/gallery/16.jpg" id="pic16"/><figcaption>Photo 16 caption</figcaption></figure>
<figure><img src="project#/images/gallery/17.jpg" id="pic17"/><figcaption>Photo 17 caption</figcaption></figure>
<figure><img src="project#/images/gallery/18.jpg" id="pic18"/><figcaption>Photo 18 caption</figcaption></figure>
<figure><img src="project#/images/gallery/19.jpg" id="pic19"/><figcaption>Photo 19 caption</figcaption></figure>
<figure><img src="project#/images/gallery/20.jpg" id="pic20"/><figcaption>Photo 20 caption</figcaption></figure>
</div>
<div class="clearfloat"><p> </p></div>
Here's the CSS - obviously modify as needed
#gallery {
width:840px;/*adjust as needed*/
padding:10px;/*adjust as needed*/
margin:0 auto;/*To center the gallery*/
background-color:rgba(0,0,0,1.00);/*adjust as needed*/
overflow:auto;/*REQUIRED for background color to display*/
}
#gallery figure {
float: left;
margin: 1px 2px;/*adjust as needed*/
border-radius:50px;/*half of the width to make circle*/
overflow:hidden;/*hides anything outside the circle*/
}
#gallery figure, #gallery figure img {
cursor: pointer;
width:100px;/*should be same as #gallery figure */
height:100px;/*should be same as #gallery figure*/
}
#gallery figure figcaption {
display:none;/*Initially hides all captions*/
color:rgba(255,255,255,1.00);/*text color*/
}