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:

Expanding Photos when clicked

Click on any image below to see gallery display 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:

  1. Create a folder labeled "gallery" in your project#/images folder
  2. Make COPIES of all your photos so that you'll still have originals for future use
  3. Move your COPIED photos in your newly created gallery folder
  4. Use Shrink-O-Matic to resize all photos with max width of 1000px
  5. 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/photogallery13.js"></script><!--REQUIRED-->

Here's an example HTML code


<div id="gallery">
<figure><img src="project#/images/gallery/1.jpg" width="150" id="pic1"/><figcaption>Photo 1 caption</figcaption></figure>
<figure><img src="project#/images/gallery/2.jpg" width="150" id="pic2"/><figcaption>Photo 2 caption</figcaption></figure>
<figure><img src="project#/images/gallery/3.jpg" width="150" id="pic3"/><figcaption>Photo 3 caption</figcaption></figure>
<figure><img src="project#/images/gallery/4.jpg" width="150" id="pic4"/><figcaption>Photo 4 caption</figcaption></figure>
<figure><img src="project#/images/gallery/5.jpg" width="150" id="pic5"/><figcaption>Photo 5 caption</figcaption></figure>
<figure><img src="project#/images/gallery/6.jpg" width="150" id="pic6"/><figcaption>Photo 6 caption</figcaption></figure>
<figure><img src="project#/images/gallery/7.jpg" width="150" id="pic7"/><figcaption>Photo 7 caption</figcaption></figure>
<figure><img src="project#/images/gallery/8.jpg" width="150" id="pic8"/><figcaption>Photo 8 caption</figcaption></figure>
<figure><img src="project#/images/gallery/9.jpg" width="150" id="pic9"/><figcaption>Photo 9 caption</figcaption></figure>
<figure><img src="project#/images/gallery/10.jpg" width="150" id="pic10"/><figcaption>Photo 10 caption</figcaption></figure>
<figure><img src="project#/images/gallery/11.jpg" width="150" id="pic11"/><figcaption>Photo 11 caption</figcaption></figure>
<figure><img src="project#/images/gallery/12.jpg" width="150" id="pic12"/><figcaption>Photo 12 caption</figcaption></figure>
<figure><img src="project#/images/gallery/13.jpg" width="150" id="pic13"/><figcaption>Photo 13 caption</figcaption></figure>
<figure><img src="project#/images/gallery/14.jpg" width="150" id="pic14"/><figcaption>Photo 14 caption</figcaption></figure>
<figure><img src="project#/images/gallery/15.jpg" width="150" id="pic15"/><figcaption>Photo 15 caption</figcaption></figure>
<figure><img src="project#/images/gallery/16.jpg" width="150" id="pic16"/><figcaption>Photo 16 caption</figcaption></figure>
<figure><img src="project#/images/gallery/17.jpg" width="150" id="pic17"/><figcaption>Photo 17 caption</figcaption></figure>
<figure><img src="project#/images/gallery/18.jpg" width="150" id="pic18"/><figcaption>Photo 18 caption</figcaption></figure>
<figure><img src="project#/images/gallery/19.jpg" width="150" id="pic19"/><figcaption>Photo 19 caption</figcaption></figure>
<figure><img src="project#/images/gallery/20.jpg" width="150" id="pic20"/><figcaption>Photo 20 caption</figcaption></figure>
</div>
<div class="clearfloat"><p>&nbsp;</p></div>

Here's the CSS - obviously modify as needed


#gallery {
width:770px;/*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:none;
}
#gallery figure img {
cursor: pointer;
width:150px;
height:100px;
}
#gallery figure figcaption {
display:none;/*Initially hides all captions*/
color:rgba(255,255,255,1.00);/*caption text color - adjust as needed*/
}