Skip to content

@iloveitaly /galleries.js
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Multiple Javascript / Mootools Gallery Boilerplate
window.addEvent('domready', function() {
var galleryLength = <?=$l?>,
galleryList = [];
for(var a = 0; a < galleryLength; a++) {
galleryList.push("gallery-" + a);
}
var galleryManager = new GalleryManager(galleryList, {
});
});
<h1>Gallery</h1>
<div id="thumbnail_controls">
<a href="#" id="prev_button"><img src="/images/lightbox/leftarrow.png" /></a>
<a href="#" id="next_button"><img src="/images/lightbox/rightarrow.png" /></a>
</div>
<div id="gallery_holder" class="wrapper">
<?
if(!function_exists("sizedPhoto")) {
function sizedPhoto($photoPath, $thumb = false) {
return substr($thumb ?
DynamicImage_Controller::generate_cache(array('src' => $photoPath, 'width' => 50, 'height' => 50, 'maintain_ratio' => 'width', 'filter' => 'c')) :
DynamicImage_Controller::generate_cache(array('src' => $photoPath, 'width' => 800, 'height' => 500, 'maintain_ratio' => 'auto'))
, strlen(DOCROOT) - 1);
}
}
$l = 0;
foreach($galleries as $galleryInfo):
echo "<h2>{$galleryInfo['title']}</h2><hr/>";
echo "<div class=\"wrapper\">";
foreach($galleryInfo['subgalleries'] as $subGalleryInfo):
?>
<div id='gallery-<?=$l++?>' class='gallery_holder'>
<div class='picture_holder'>
<?$thumbnailImage = $subGalleryInfo['folder'][0];?>
<a href="<?=sizedPhoto($thumbnailImage)?>" title="Comment here"><img src="<?=substr(DynamicImage_Controller::generate_cache(array('src' => $thumbnailImage, 'width' => 200, 'height' => 200, 'maintain_ratio' => 'width', 'filter' => 'c')), strlen(DOCROOT) - 1)?>" /></a>
</div>
<div class="thumbnail_holder">
<h4>Viewing Gallery: <?=$subGalleryInfo['title']?></h4>
<div class='infinite_width'>
<?
// these are the thumbnails
foreach($subGalleryInfo['folder'] as $photo) {
echo '<a href="'.sizedPhoto($photo).'" title="a comment" class="hidden"><img src="" data-src="'.sizedPhoto($photo, true).'" /></a>';
}
?>
</div>
</div>
<h4><?=$subGalleryInfo['title']?></h4>
</div>
<?endforeach;?>
</div>
<?endforeach;?>
</div>
.opacity(@opacity: 0.5) {
-moz-opacity: @opacity;
-khtml-opacity: @opacity;
-webkit-opacity: @opacity;
opacity: @opacity;
}
#gallery_holder {
&:first-child {
margin-top:0;
}
.gallery_holder {
padding:10px;
float:left;
.picture_holder {
.hidden {
display:none;
}
a {
border-bottom:none;
&:hover {
border-bottom:none;
background-color:transparent;
}
}
img {
border: 1px solid #999;
}
}
.thumbnail_holder {
display:none;
position: fixed;
left:50px;
top:0;
width:100%;
height:57px + 22px;
overflow:hidden;
z-index:2;
padding:5px 5px 0 5px;
h4 {
font-size:15px;
height:22px;
margin:0;
color:white;
text-shadow: #000 1px 1px 0;
white-space: nowrap;
}
.infinite_width {
width:10000px;
padding-top:5px;
height:52px + 22px;
margin-left:0;
}
a {
display:block;
float: left;
margin:0 5px;
border: 1px solid darken(#ddd, 20%);
}
}
h4 {
margin:10px 0 0 0;
}
}
}
#thumbnail_controls {
display:none;
position:fixed;
left:0;
top:22px;
z-index:2;
width:100%;
a {
display:block;
color:white;
text-decoration:none;
font-size:50px;
text-shadow: #000 1px 1px 1px;
padding:18px 15px;
border-bottom:none;
&:hover, &:visited {
background-color:transparent;
border-bottom:none;
text-decoration:none
}
}
#prev_button {
float:left;
}
#next_button {
float:right;
}
}
#thumbnail_controls.visible {
display:block;
.opacity(1);
.transition(opacity, 0.3s);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.