public
Last active

Multiple Javascript / Mootools Gallery Boilerplate

  • Download Gist
galleries.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12
window.addEvent('domready', function() {
var galleryLength = <?=$l?>,
galleryList = [];
for(var a = 0; a < galleryLength; a++) {
galleryList.push("gallery-" + a);
}
var galleryManager = new GalleryManager(galleryList, {
});
});
readme.md
Markdown
structure.php
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
<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>
styles.less
Less
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
.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);
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.