Back to list of all resources

Poloraid Photogallery

from https://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="https://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;
}