Back to list of all resources

Poloraid Photogallery


Preparing your photos to match what the CSS 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 dimensions of 335x275 pixels
  3. Rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
  4. Move your photos to your Websites/project#/images folder
  5. Download this polaroid image for use as the border around your photos - download here and move it to your Websites/project#/images folder
  6. Copy and paste the codes below

Scripts needed (copy and paste inside <head>)

Check that you only have ONE of each line in your <head> - in other words, don't duplicate any of the lines of code below

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/jquery/photogallery11.js"></script>

Here's the HTML code

Inside your article or section, create a SINGLE div that will hold all the polaroids - or copy and paste the code below

<div id="gallery">


You will need the following code FOR EACH OF YOUR PHOTOS which should all be the same size for best results - just copy, paste INSIDE the <div id="gallery"> element and modify the # for the correct number of your thumbnails, give each photo a proper alt tag description and give each photo a short caption.

<div class="polaroid"> <img src="../images/#.jpg" alt="CHANGE THIS!!!" />
<p>Caption for the photo</p>


Here's the CSS - obviously modify as needed

#gallery {
.polaroid {
width: 368px;
height: 376px;
background-image: url(../images/polaroid-bg.png);
position: absolute;
.polaroid img {
width: 335px;
height: 275px;
margin: 25px 0 0 15px;
.polaroid p {
text-align: center;
font-family: Georgia, serif;
font-size: 20px;
color: #2E2E2E;
margin-top: 15px;