From f99f153619d99cd0ca44de17a22926436160d940 Mon Sep 17 00:00:00 2001 From: Ugnich Anton Date: Sun, 9 Mar 2014 00:03:32 +0700 Subject: Photos in a lightbox --- web/scripts3.js | 61 ++++++++++++++++++++++++++++++++++++++------------------- web/style3.css | 22 +++++++++++++-------- 2 files changed, 55 insertions(+), 28 deletions(-) (limited to 'web') diff --git a/web/scripts3.js b/web/scripts3.js index 2b12bfbd..1513b375 100644 --- a/web/scripts3.js +++ b/web/scripts3.js @@ -37,7 +37,7 @@ function wsSendKeepAlive() { ws.send(' '); } } -*/ + */ /******************************************************************************/ /******************************************************************************/ @@ -129,25 +129,46 @@ function showMessageLinksDialog(mid,rid) { hlink+="#"+rid; mlink+="/"+rid; } - $('#dialogl').html(hlink); - $('#dialogn').html(mlink); - - $('#dialogw li>a').click(function(event) { - event.preventDefault(); - openSocialWindow($(this).attr('href')); - }); var hlinkenc=encodeURIComponent(hlink); - $('#sharefb').attr('href','https://www.facebook.com/sharer/sharer.php?u='+hlinkenc); - $('#sharetw').attr('href','https://twitter.com/intent/tweet?url='+hlinkenc); - $('#sharevk').attr('href','https://vk.com/share.php?url='+hlinkenc); - $('#sharegp').attr('href','https://plus.google.com/share?url='+hlinkenc); - - var w=$('#dialogw'); - var b=$('#dialogb'); - w.css("top", Math.max(0, ((b.height() - w.outerHeight()) / 2) + b.scrollTop()) + "px"); - w.css("left", Math.max(0, ((b.width() - w.outerWidth()) / 2) + b.scrollLeft()) + "px"); - b.show(); - w.show(); + + var html="
Ссылка на сообщение:"; + html+="
"+hlink+"
"; + html+="Номер сообщения:"; + html+="
"+mlink+"
"; + html+="Поделиться:
"; + + openDialog(html); +} + +function showPhotoDialog(fname) { + var width=$(window).width(); + if(width<640) { + return true; + } else if(width<1280) { + openDialog(""); + return false; + } else { + openDialog(""); + return false; + } +} + +function openDialog(html) { + var dhtml="
"; + dhtml+="
"; + dhtml+=html; + dhtml+="
"; + $('body').append(dhtml); +} + +function closeDialog() { + $('#dialogb').remove(); + $('#dialogt').remove(); } function openSocialWindow(url) { @@ -183,7 +204,7 @@ jQuery.fn.selectText = function(){ /* * jQuery.fn.autoResize 1.14 -*/ + */ (function($){ diff --git a/web/style3.css b/web/style3.css index 268e1061..2fdcb5e3 100644 --- a/web/style3.css +++ b/web/style3.css @@ -46,6 +46,10 @@ article>header.t { width: 140px; text-align: right; float: right; } article time { color: #999; font-size: 10pt; border-bottom: 1px dotted #999; } article p { overflow: hidden; margin: 10px 0 15px 0; } article p.i { text-align: center; } +article p.ir { float: right; margin-left: 10px; margin-bottom: 10px; } +article p.ir a { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } +article p.ir img { max-width: 200px; max-height: 200px; } +article .irbr { clear: right; } article>nav.l { display: inline-block; font-size: 10pt; } article>nav.l a { color: #888; border-bottom: 1px dotted #AAA; margin-right: 15px; } article>nav.s { display: inline-block; text-align: right; float: right; } @@ -134,14 +138,16 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef /********/ -#dialogb { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; z-index: 10; } -#dialogw { display: none; position: fixed; top: 40%; left: 30%; width: 350px; padding: 20px; background: #EEEEE5; border: 1px solid #999; z-index: 11; } -#dialogl,#dialogn { padding: 5px; margin: 3px 0 20px; border: 1px solid #DDD; background: #F5F5E9; } -#dialogw li { float: left; margin: 5px 10px 0 0; } -#dialogw a { display: block; width: 32px; height: 32px; background-image: url(//static.juick.com/sharesocial.png); } -#sharetw { background-position: -32px 0; } -#sharevk { background-position: -64px 0; } -#sharegp { background-position: -96px 0; } +#dialogb { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; background: #000; z-index: 10; } +#dialogt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } +#dialogt td { vertical-align: middle; text-align: center; } +#dialogw { position: relative; display: inline-block; text-align: left; z-index: 11; } +#dialogc { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; z-index: 12; cursor: pointer; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAEEElEQVQ4y32Va2yTVRzGf23fd10vUNqxsY1dGIyba7BsTgiwhcRkgxHkFkJAuQzIggY0IXGYkKA4DeAQMQTIiIB+MyRAJn7hAxJRJKIRiJgQIhESZxYFEuja9f74oe1aoPh/vrx5z3nO/3qeA0+aBSvW+UaT2VBUb+91HXY3FDUUNZnzDaxYsfBcs2DDpHjqqC1ln07YU79t0oGX+mY1V3dWv1/VWVrqphgTW+EDLBjYS91tZZ/5v+34d1/sijIWv/bw2IXFy2urfKVu7BjP0q0YOCaMWVlzfF7wdJY2mLybzH4/+mpq3cxKrwcHBtanvTqrfK/X97+avCvFUn2xtjDBNJpDn8SGU1Ls+oXVTTUeL8587xYMHKN97fWnlikqnU/UDmWJWUwL/ZKQpPOvTZvg8eLI0W3Y8cyo+3hB4p50MmYLUgC24EdRSTq6rLIaD/Z06SyYuMdWvjnv4TfS+URhahpHYlLwR16gHDcmVrBSPNrXOv2LTimUrMoE3BiaO5Jz2dCmiDNIkGBRcCAuffde1WR8FGMDKy5n5cp5f34pHYqlt/tDkrQ7SpDgxNBASurLrHRFpPsXmUEFbgyw4fFM7FgQvi7NznirHQorTZ8cGkhJUm80vVIylJA0ppU6xlAEBiXj/EvWSI+TuewWhdP0xylJOhPPVeJGVNqxbdQ0xlIMprusoXnzW9LtRH5xFoUjmfHIpxL8Oiod3ed6kXE4wHRW+Od0dku/J57s7P1UmvxBNP//2ah0+CCNVOICk8qyOS3bpAeJfOpgSpISypUujZ+GpXd6HC8zPkM2Z9Vtiv0jZRvlGRrM5Lo4k/vWSHZUHsWlGW+YI+QKs7lh/Z1L0tuZLbPDuVzTpTsVT6+0haXB31hNUzbsMjMwZdWBz6XBuDOY7efWiG3kYuyOZmO6FJLOnWM5mYIZlDDd3lHVPXAt18/C2DAsBf8u2cECpqdbZcNDndHi27S5T5I2DD+POjccT0qHz9JJS3ZIrLioIGBbNu7dI6claVdB72uHI0np8lW6WUIgO55WivFRT6ttvffDQ/2SdCuyatiZR2wLXwlL0uVf6WEdrdRnL4YFEzfl+Gm3dXn2bun/67YkRZI3oscjxyM/Rx7FJenBwP6L7KWLdvy5K5kRA6qZSYety9nDiYM//HFLeXbvzsmr5kl66KKDmeSJQUaG8FJDgHbW0e3YzwnPmVe+33lz582Oy+P7OcF+ullHOwFqeEKGMgKIl2r8tLCUjWxnl7HH6KXX2GPdxXY2spQW/FTzlACOSC8eyplEgBYWsoI1rGUta1jBQloIMIlyCkhv9r2w48JLObVMwU+ARhoJ4GcKtZTjxZXL9Vm6BSsGJnYcOHFl4MSBHRMDK5b/e69yxzyNAvYf9TCL+HAwka4AAAAASUVORK5CYII="); } + +.dialogshare { padding: 20px; background: #EEEEE5; border: 1px solid #999; min-width: 300px; overflow: auto; } +.dialogl { padding: 5px; margin: 3px 0 20px; border: 1px solid #DDD; background: #F5F5E9; } +.dialogshare li { float: left; margin: 5px 10px 0 0; } +.dialogshare a { display: block; width: 32px; height: 32px; background-image: url(//static.juick.com/sharesocial.png); } /********/ -- cgit v1.2.3