Summer Service Trip
2013 in Nicaragua
Preparing your photos to match what the HTML/CSS/Scipts is expecting to find
- Duplicate your photos so that you'll always have copies of your original photos!!!!!!!
- Crop and/or resize your duplicated photos with maximum dimensions of 1000 pixels in width or height
- Move your photos to your Websites/project#/images folder
- If you want circular large photos like the example above, use Photoshop Clipping Masks to create the images - watch this video to learn how. In Photoshop, Save for Web as .png files to preserve the transparency around your circular image. Rename your photos in a sequence 1.png, 2.png, 3.png, 4.png, ...
- If you simply want rectangular large photos, rename your photos in a sequence 1.jpg, 2.jpg, 3.jpg, 4.jpg, ...
- 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="/jquery/minified.js"></script><!--ONLY ONE of these on the page-->
<!--neede for displaying large images in FancyBox method-->
<link rel="stylesheet" href="/fancybox/fancybox.css" media="screen" />
<link rel="stylesheet" href="/fancybox/fancybox-buttons.css" media="screen" />
<link rel="stylesheet" href="/fancybox/fancybox-thumbs.css" media="screen" />
<script type="text/javascript" src="/fancybox/mousewheel.js"></script>
<script type="text/javascript" src="/fancybox/fancybox.pack.js"></script>
<script type="text/javascript" src="/fancybox/fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancybox/fancybox-media.js"></script>
<script type="text/javascript" src="/fancybox/fancybox-thumbs.js"></script>
<script type="text/javascript" src="/fancybox/fancyboxCustom.js"></script>
<script src="/jquery/circletype.js"></script><!--needed for text to be placed in a circle-->
<script src="/jquery/circlePlugins.js"></script><!--needed for text to be placed in a circle-->
<script><!--These are variable that you can change for the distribution of thumbnails in a circle-->
var radius1, image1, container1, angle1, width1, height1;
var radius2, image2, container2, angle2, width2, height2;
var radius3, image3, container3, angle3, width3, height3, windowH=$(window).height();
var circle3Total, circle2Total, totalImages, captions=[];
circle3Total = 28;//How many images in the outermost circle?
circle2Total = 16;//How many images in the 2nd circle from outside?
//Note: all remaining images will be placed in the innermost circle.
radius1 = 210;//Radius of innermost circle in pixels
radius2 = 310;//Radius of 2nd circle in pixels
radius3 = 410;//Radius of outmost circle in pixels
angle1 = -1.57;//Starting 1st image position in circle offset from default 3 o'clock on circle in RADIANS!!!
angle2 = -1.72;//Starting 1st image position in circle offset from default 3 o'clock on circle in RADIANS!!!
angle3 = -1.57;//Starting 1st image position in circle offset from default 3 o'clock on circle in RADIANS!!!
$(document).ready(function(e) {
var textRadius=130;//in pixels
$("#topCircleText").circleType({radius: textRadius});//sets target text in a specified radius circle
$("#bottomCircleText").circleType({radius: textRadius, dir: -1});//sets target text in a specified radius circle COUNTER CLOCKWISE
$("a[rel=imageGroup]").fancybox({
'padding':'0'//this removes the default white box border around large images
});
});
</script>
<script src="/jquery/imagesInCircles.js"></script><!--MUST be last in the list of scripts-->
Here's the HTML code
Inside your article or section, copy and paste the code below - change the captions for each photo
<div id="circularGalleryBox">
<div class="imageContainer" id="imageContainer0">
<div id="logo"><a href="/"><img src="project#/images/centerImage.png" width="#" height="#" border="0"></a></div>
<span class="circleText" id="topCircleText">Text along the top of center circle</span>
<span class="circleText" id="bottomCircleText">Text along the bottom of center circle</span>
</div>
<div class="imageInCircle">
<a href="project#/images/1.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/1.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/2.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/2.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/3.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/3.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/4.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/4.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/5.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/5.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/6.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/6.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/7.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/7.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/8.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/8.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/9.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/9.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/10.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/10.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/11.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/11.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/12.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/12.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/13.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/13.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/14.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/14.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/15.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/15.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/16.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/16.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/17.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/17.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/18.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/18.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/19.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/19.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/20.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/20.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/21.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/21.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/22.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/22.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/23.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/23.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/24.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/24.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/25.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/25.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/26.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/26.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/27.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/27.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/28.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/28.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/29.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/29.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/30.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/30.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/31.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/31.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/32.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/32.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/33.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/33.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/34.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/34.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/35.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/35.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/36.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/36.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/37.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/37.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/38.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/38.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/39.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/39.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/40.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/40.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/41.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/41.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/42.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/42.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/43.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/43.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/44.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/44.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/45.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/45.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/46.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/46.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/47.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/47.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/48.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/48.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/49.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/49.png" />
</a>
</div>
<div class="imageInCircle">
<a href="project#/images/50.png" rel="imageGroup" title="Image Caption">
<img src="project#/images/50.png" />
</a>
</div>
</div>
Copy and paste the code below just above your </body> tag at the bottom of your HTML code
<style>
.fancybox-skin {
background-color: rgba(0,0,0,0.0); /*makes the default color under large image transparent*/
}
</style>
<!--This is needed for Firefox to properly display grayscale-->
<svg version="1.1" xmlns="https://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
<filter id="saturate">
<feColorMatrix type="saturate" values="1"/>
</filter>
</svg>
Here's the CSS - obviously modify as needed
#circularGalleryBox {
width: 930px;
height: 930px;
position: relative;
margin: 0 auto;
clear:both;
}
#allImageInCircleContainers {
width: 930px;
height: 930px;
margin-top: 0px;
background-color:rgba(0,0,0,0.80);
border-radius:465px;
}
#imageContainer0 {
width: 250px;
height: 250px;
padding-top:0px;
position: absolute;
top: 350px;
left: 365px;
z-index: 400;
border-radius:0px;
}
#logo {
position:absolute;
top:0;
left:0;
width:100%;
padding-left:10px;
padding-top:10px;
}
.circleText {
left:50%;
color:#fff;
}
#topCircleText {
top:-10px;
}
#bottomCircleText {
top:260px;
}
.imageInCircleContainer {
width: 1px;
height: 1px;
position: absolute;
top: 490px;
left: 470px;
}
#imageInCircleContainer3 {
z-index: 100;
}
#imageInCircleContainer2 {
z-index: 200;
}
#imageInCircleContainer1 {
z-index: 300;
}
.imageInCircle {
width: 100px;
height: 100px;
position: absolute;
text-align: center;
}
.imageInCircle img {
width: 50px;
height: 50px;
border-radius: 25px;
border: 2px #fff solid;
margin: -2px;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
filter: url("#desaturate");
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
cursor: pointer;
box-shadow: 0px 0px 20px rgba(255,253,0,1.00);
}
.imageInCircle img:hover {
border-color: rgba(130,156,96,1.00);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
filter: grayscale(0);
filter: url("#saturate");
-webkit-transform: scale(1.2, 1.2) rotate(360deg);
-moz-transform: scale(1.2, 1.2) rotate(360deg);
}