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;
+}