diff --git a/js/gallery-view.js b/js/gallery-view.js new file mode 100644 index 00000000..efe1b3b1 --- /dev/null +++ b/js/gallery-view.js @@ -0,0 +1,124 @@ +if (active_page == 'index' || active_page == 'thread') +$(function(){ + + var gallery_view = false; + + $('hr:first').before(''); + $('#gallery-view a').html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")).click(function() { + gallery_view = !gallery_view; + $(this).html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")); + toggle_gview(document); + }); + + var toggle_gview = function(elem) { + if (gallery_view) { + $(elem).find('img.post-image').parent().each(function() { + this.oldonclick = this.onclick; + this.onclick = handle_click; + $(this).attr('data-galid', Math.random()); + }); + } + else { + $(elem).find('img.post-image').parent().each(function() { + if (this.onclick == handle_click) this.onclick = this.oldonclick; + }); + } + }; + + $(document).on('new_post', toggle_gview); + + var gallery_opened = false; + + var handle_click = function(e) { + e.stopPropagation(); + e.preventDefault(); + + if (!gallery_opened) open_gallery(); + + gallery_setimage($(this).attr('data-galid')); + }; + + var handler, images, active, toolbar; + + var open_gallery = function() { + $('body').css('overflow', 'hidden'); + + gallery_opened = true; + + handler = $("
").hide().appendTo('body').css('text-align', 'left'); + + $("
").click(close_gallery).appendTo(handler); + + images = $("").appendTo(handler); + toolbar = $("").appendTo(handler); + active = $("").appendTo(handler); + + active.on('click', function() { + close_gallery(); + }); + + $('img.post-image').parent().each(function() { + var thumb = $(this).find('img').attr('src'); + + var i = $('').appendTo(images); + i.attr('src', thumb); + i.attr('data-galid-th', $(this).attr('data-galid')); + + i.on('click', function(e) { + gallery_setimage($(this).attr('data-galid-th')); + }); + }); + + $("") + .click(close_gallery).appendTo(toolbar); + + handler.fadeIn(400); + }; + + var gallery_setimage = function(a) { + if (a == +1 || a == -1) { + var meth = (a == -1) ? 'prev' : 'next'; + a = $('#gallery_images img.active')[meth]().attr('data-galid-th'); + if (!a) return; + } + + $('#gallery_images img.active').removeClass('active'); + + var thumb = $('#gallery_images img[data-galid-th="'+a+'"]'); + var elem = $('a[data-galid="'+a+'"]'); + + thumb.addClass('active'); + + var topscroll = thumb.position().top + images.scrollTop(); + topscroll -= images.height() / 2; + topscroll += thumb.height() / 2; + images.animate({'scrollTop': topscroll}, 300); + + var img = elem.attr('href'); + + active.find('img').fadeOut(200, function() { $(this).remove(); }); + + var i = $(''); + i.attr('src', img); + i.appendTo(active); + i.hide(); + + i.on('load', function() { + i.css('left', 'calc(50% - '+i.width()+'px / 2)'); + i.css('top', 'calc(50% - '+i.height()+'px / 2)'); + i.fadeIn(200); + }).on('click', function(e) { + e.stopPropagation(); + gallery_setimage(+1); + }); + }; + + var close_gallery = function() { + $('body').css('overflow', 'auto'); + + gallery_opened = false; + + handler.fadeOut(400, function() { handler.remove(); }); + }; + +}); diff --git a/stylesheets/style.css b/stylesheets/style.css index 5ae23cd6..4c4c40f5 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1060,3 +1060,58 @@ table.fileboard th, table.fileboard td { table.fileboard .intro a { margin-left: 0px; } + +/* Gallery view */ +#gallery_images { + position: absolute; + right: 0px; + bottom: 0px; + top: 0px; + width: 15%; + background-color: rgba(0, 0, 0, 0.4); + overflow: auto; +} +#gallery_toolbar { + position: absolute; + right: 15%; + left: 0px; + bottom: 0px; + height: 32px; + background-color: rgba(0, 0, 0, 0.4); + text-align: right; +} +#gallery_images img { + width: 100%; +} +#gallery_toolbar a { + font-size: 28px; + padding-right: 5px; +} +#gallery_main { + position: absolute; + left: 0px; + right: 15%; + bottom: 32px; + top: 0px; + padding: 10px; +} + +#gallery_images img { + opacity: 0.6; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +#gallery_images img:hover, #gallery_images img.active { + opacity: 1; +} +#gallery_images img.active { + -webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + -moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + z-index: 1; +} +#gallery_main img { + max-width: 100%; + max-height: 100%; + position: absolute; +}