Back to list of all resources

Poloraid Photogallery

from http://demo.marcofolio.net/polaroid_photo_viewer

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="http://www.google.com/jsapi"></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">

  </div>

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>
  </div>

 

Here's the CSS - obviously modify as needed


#gallery {
width:100%;
height:100vh;
position:relative;
}
.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;
cursor:pointer;
}
.polaroid p {
text-align: center;
font-family: Georgia, serif;
font-size: 20px;
color: #2E2E2E;
margin-top: 15px;
}