Some of the code is kind of messy.
For use in https://github.com/iloveitaly/XtLightbox w/GalleryManager
Live Ex: http://prorefinish.com/base/gallery
Some of the code is kind of messy.
For use in https://github.com/iloveitaly/XtLightbox w/GalleryManager
Live Ex: http://prorefinish.com/base/gallery
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); | |
} |