Skip to content

Instantly share code, notes, and snippets.

@matthewcopeland
Created August 18, 2012 23:24
Show Gist options
  • Save matthewcopeland/3390316 to your computer and use it in GitHub Desktop.
Save matthewcopeland/3390316 to your computer and use it in GitHub Desktop.
Octobox Lightbox for Octopress - MVP
# line 42 of image_tag.rb
+++ "<span class=\"image-wrapper #{@img['class']}\"><img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}></span>"
--- "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
$(document).ready(function(){
$('.hentry .image-wrapper').click(function(){
if( $(this).hasClass('octobox') ) {
$('.octobox img').css("margin-top", 0 + "px");
$('.octobox').removeClass('octobox');
} else {
$(this).addClass('octobox');
var octoboxMarginTop = -($('.octobox img').height())/2;
$('.octobox img').css("margin-top", octoboxMarginTop + "px" );
}
});
});
$octobox-open-z: 1;
$octobox-z: 2;
$octobox-open-image: url(data:image/png;base64,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);
.hentry .image-wrapper {
position: relative;
display: inline-block;
cursor: pointer;
&.halfy:not(.octobox) { max-width: 49%; }
&:not(.octobox):before {
content: "";
background-image: $octobox-open-image;
background-position: center center;
background-repeat: no-repeat;
@include fill( absolute );
z-index: $octobox-open-z;
visibility: hidden;
} // &:before
&:hover:before { visibility: visible; }
&.octobox {
display: block;
@include fill( fixed );
z-index: $octobox-z;
background-color: rgba(0,0,0, .8);
padding: 10px;
text-align: center;
img {
top: 50%;
border: none;
@include box-shadow( none );
} // img
} // &.octobox
img {
display: inline-block;
position: relative;
max-height: 100%;
max-width: 100%;
} // img
} // .hentry .image-wrapper
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment