SHARE
TWEET

Untitled

a guest Nov 15th, 2017 49 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * Copyright (C) 2017 Galym Kerimbekov <kegalym2@mail.ru>
  3.  *
  4.  * This program is free software; you can redistribute it and/or
  5.  * modify it under the terms of the GNU General Public License
  6.  * as published by the Free Software Foundation; either version 2
  7.  * of the License, or (at your option) any later version.
  8.  *
  9.  * This program is distributed in the hope that it will be useful,
  10.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  12.  * GNU General Public License for more details.
  13.  *
  14.  * You should have received a copy of the GNU General Public License
  15.  * along with this program; if not, write to the Free Software
  16.  * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
  17.  */
  18.  
  19. $(document).ready(function() {
  20.     $('a[href]').has('img').click(function(event) {
  21.         event.preventDefault();
  22.         var imgurl = $(this).attr("href");
  23.        
  24.         /*  Predefined div strings
  25.         Yes, I Know, very ugly approach, I need String.format */
  26.         var imgovr_div = "<div id='img-ovr' class='img-ovr'> </div>";
  27.         var imgshow_div = "<div id='imgshow' class='imgshow'> \n\
  28.             <div id='img-plus'> | + | </div><div id='img-minus'> | - | </div><div id='img-close'> | X | </div></div>";
  29.         var reconst_imgurl = "<img src=" + imgurl + " style='border-style:\n\
  30.             solid; border-width:5px; margin:5px;'>";
  31.                
  32.         // Add an image overlay at the end of the block
  33.         $('#content_bottom_b').prepend(imgovr_div);
  34.         $('.img-ovr').css({"background-color": "black", "width": "100%",
  35.             "height": "100%", "z-index": "3", "position": "fixed",
  36.             "opacity": "0.2"})
  37.                        .animate({opacity: 0.9, top: '0%'}, 200);
  38.        
  39.         // Append an image overlay first
  40.         $('#img-ovr').append(imgshow_div);
  41.    
  42.         // Define an image properties
  43.         $('.imgshow').css({"background": "black", "width": "95%",
  44.             "height": "100%", "z-index": "5", "margin-left": "1%",
  45.             "margin-top": "10%"})
  46.                        .animate({opacity: 1, top: '50%'}, 200);
  47.  
  48.         // Define the close button properties
  49.         $('#img-close').css({"color": "white", "width": "40px",
  50.             "height": "40px", "cursor": "pointer", "margin-left": "95%"});
  51.  
  52.         // Define the close button properties
  53.         $('#img-plus').css({"color": "white", "width": "40px",
  54.             "height": "40px", "cursor": "pointer", "margin-left": "95%"});
  55.        
  56.         // Define the close button properties
  57.         $('#img-minus').css({"color": "white", "width": "40px",
  58.             "height": "40px", "cursor": "pointer", "margin-left": "95%"});
  59.  
  60.         // Append an image
  61.         $('#imgshow').append(reconst_imgurl);
  62.         $('#img-ovr').css({"overflow": "scroll"})
  63.         $('#img-ovr').scroll();
  64.  
  65.         // Get an image dimensions
  66.         var p = 10;
  67.         var width = 95;
  68.         var low = 30;
  69.         var more = 95;
  70.    
  71.         // Minimize an image
  72.         $('#img-minus').click(function() {
  73.             if ( width <= low) {
  74.                  $('#img-minus').css({"color": "gray"});
  75.                  return false;
  76.              } else {
  77.                  width -= p;             
  78.                  $('#img-plus').css({"color": "white"});
  79.                  $('#imgshow img').attr({'width': width + '%'});             
  80.              }
  81.         });
  82.        
  83.         // Maximize an image            
  84.         $('#img-plus').click(function() {
  85.             if (width >= more) {
  86.                  $('#img-plus').css({"color": "gray"});
  87.                  $('#imgshow img').attr({'width': '95%'});
  88.                  return false;
  89.              } else {
  90.                  width += p;             
  91.                  $('#img-minus').css({"color": "white"});
  92.                  $('#imgshow img').attr({'width': width + '%'});             
  93.              }  
  94.         });
  95.        
  96.         // Disable an image overlay by click
  97.         $('#img-close').click(function() {
  98.             $('#img-ovr').css('background-color', 'black')
  99.                .animate({opacity: 0, top: '45%'}, 200,
  100.                function() {
  101.                 $(this).css('display', 'none');
  102.                 $('#img-ovr').fadeOut(400);
  103.                 $('#content_bottom_b').removeClass('.imgshow');
  104.                }              
  105.             );  
  106.         });
  107.     });
  108. });
RAW Paste Data
Top