API tools faq
paste
terorama

showpics7_new

terorama
Dec 13th, 2013
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
jQuery 17.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  6.    
  7.    <script type="text/javascript">
  8.    
  9.           var prevX, prevY;
  10.           var gl_moved, gl_moved4;
  11.           var Ddrop;
  12.           var curtabb=false;
  13.           var gl_start=false;
  14.  
  15.  
  16.    //-------------------------------------------
  17.    function decode_base64(s) {
  18.     var e={},i,k,v=[],r='',w=String.fromCharCode;
  19.     var n=[[65,91],[97,123],[48,58],[43,44],[47,48]];
  20.  
  21.     for(z in n){for(i=n[z][0];i<n[z][1];i++){v.push(w(i));}}
  22.     for(i=0;i<64;i++){e[v[i]]=i;}
  23.  
  24.     for(i=0;i<s.length;i+=72){
  25.     var b=0,c,x,l=0,o=s.substring(i,i+72);
  26.          for(x=0;x<o.length;x++){
  27.                 c=e[o.charAt(x)];b=(b<<6)+c;l+=6;
  28.                 while(l>=8){r+=w((b>>>(l-=8))%256);}
  29.          }
  30.     }
  31.     return r;
  32.     }
  33.  
  34.          
  35.       //--------------------------------------toggle lightbox
  36.       function showlb(on) {
  37.              if (on) {
  38.                     $('#lbox').css('width',screen.width+'px');
  39.                         $('#lbox').css('height',screen.height+'px');
  40.                        
  41.                         $('#lbox').fadeIn('slow');
  42.                  }
  43.                  else {
  44.                     $('#lbox').fadeOut('slow');
  45.                  }
  46.                  
  47.           }
  48.          
  49.       //----------------------------------------------------------
  50.       function thumbClick(el) {
  51.          
  52.          
  53.           if (gl_moved4)
  54.              return;
  55.                                                
  56.          save_result( $(el).attr('src'));
  57.  
  58.          var imz = new Image();
  59.          imz.src = el.src;
  60.          
  61.          $(imz).load (function () {      
  62.                
  63.             $('#inpic').empty().append($(this));                      
  64.             $('#inpic').css('left', Math.floor(screen.width/2-this.width/2)+'px');  
  65.             $('#inpic').css('top', Math.floor(screen.height/2-this.height/2)+'px');
  66.             showlb(true);
  67.      });       
  68.          
  69.            
  70.       };
  71.       //----------------------------------------------------------
  72.       function load_els(dfd, infj, bigtab) {
  73.      
  74.             var n_els = $(infj).length;
  75.             var n_loaded = 0;
  76.            
  77.             $.each(infj, function(i,valu) {
  78.            
  79.                  var zDiv=$('<div>',{'class':'img_div'});
  80.                  
  81.                  var zImg=$('<img/>',{'rel':decode_base64(valu['img']),
  82.                  'width':'300px'}).appendTo(zDiv);
  83.                    
  84.                  $(bigtab).append(zDiv);
  85.                  
  86.                  //----------------
  87.                  zImg.error(function() {
  88.                  
  89.                     //console.log('failed: '+this.src+' '+$(this).width());
  90.                     n_loaded++;
  91.                    
  92.                     if (n_loaded>=n_els)
  93.                        dfd.resolve();
  94.                   });
  95.                   //----------------
  96.                   zImg.load (function() {
  97.                  
  98.                      //console.log('preloaded: '+this.src+' '+$(this).width());
  99.                      n_loaded++;
  100.                      
  101.                      if  (n_loaded>=n_els)
  102.                         dfd.resolve();
  103.                   });
  104.                  //----------------        
  105.                  zImg.attr('src',decode_base64(valu['thumb']));
  106.                  //----------------                    
  107.                  zImg.click(function() {  
  108.                     thumbClick(this);
  109.                  });
  110.  
  111.                  //-----------------
  112.                  zDiv.append(zImg);
  113.                  
  114.                                      
  115.             });
  116.       }
  117.  
  118.       //----------------------------------------------------------
  119.       function showtab(ntab) {
  120.  
  121.          if (gl_moved4)
  122.                 return;
  123.  
  124.              $('#tabs div.active').removeClass('active');
  125.              $("#tabs div:contains('"+(ntab+1)+"')").addClass('active');
  126.              
  127.          $('#allpics div.tabz:visible').fadeOut('slow');
  128.  
  129.          curtabb = $('#allpics div.tabz').filter(
  130.             function(index) {
  131.                return $(this).data('ntab')==ntab;
  132.             }).fadeIn('fast');
  133.       }
  134.  
  135.       //----------------------------------------------------------
  136.           function moveTab(x) {
  137.            
  138.            var zuu = curtabb;
  139.                  if (x<0) {
  140.                      curtabb = $(curtabb).next('.tabz').get(0);        
  141.                      }
  142.                   else {
  143.                      curtabb = $(curtabb).prev('.tabz').get(0);                
  144.                     }
  145.  
  146.                   if (!curtabb) {
  147.  
  148.                         curtabb=zuu;                    
  149.                         return;
  150.                      }
  151.  
  152.              var direct = (x<0)?'-':'+';
  153.  
  154.              $(zuu).animate({left: direct+'=500'},{ queue: false, duration: 1000,
  155.                 complete:
  156.                 function() {
  157.                    $(this).css('left',0);
  158.                 }}
  159.              );
  160.  
  161.              $(zuu).fadeOut('slow').queue(
  162.                function() {
  163.      
  164.                   $(this).dequeue();
  165.                }
  166.             );
  167.        
  168.              var uue = $('#tabs div.active').removeClass('active');
  169.              if (x<0)
  170.                 uue.next().addClass('active');
  171.              else
  172.                 uue.prev().addClass('active');
  173.  
  174.              //$('#tabs').animate({left: direct+'=25'},'slow');
  175.                  
  176.              $(curtabb).fadeIn('slow');          
  177.  
  178.           }
  179.  
  180.       //----------------------------------------------------------
  181.       function mktab(numtab, infj) {
  182.      
  183.          var tab = $('<div/>').html(numtab+1).data('ntab',numtab);    
  184.          tab.appendTo($('#tabs'));                   
  185.          var bigtab=$('<div/>',{class:'tabz'}).data('ntab',numtab);
  186.          bigtab.insertBefore($('#allpics #zclose'));
  187.  
  188.                  while (parseInt(tab.prev().html())>numtab+1) {
  189.  
  190.                        tab.insertBefore(tab.prev());
  191.                        bigtab.insertBefore(bigtab.prev());
  192.  
  193.                  }
  194.          
  195.          var waitz = $.Deferred (
  196.             function(dfd) {
  197.                load_els(dfd, infj, bigtab);
  198.             }
  199.          );
  200.          
  201.          $.when(waitz).done(
  202.             function() {
  203.                            tab.addClass('loaded');
  204.  
  205.                             tab.click(  function() {
  206.                                  showtab($(this).data('ntab'));
  207.                 });
  208.  
  209.                             if (!curtabb)
  210.                                tab.trigger('click');
  211.  
  212.                //console.log('loading completed');
  213.             }
  214.          );
  215.       }
  216.       //----------------------------------------------------------
  217.            function ajax_req (numtab) {
  218.  
  219.               $.ajax ( {
  220.                   type: 'POST',
  221.                   url:  '/parse/showpics7.php',
  222.                   dataType: 'json',
  223.                   data: {step:'', grabbed:'http://tests.dmkim1.bget.ru/parse/parser.php?file8=.%2Fparsed%2Fparsed_240320131901361075.txt',start:numtab}
  224.                }).done(
  225.                
  226.                   function(infj) {
  227.  
  228.                      if ((numtab<gl_start) || (numtab>gl_start+49))
  229.                         return;
  230.    
  231.                      mktab(numtab, infj);  
  232.                 });
  233.  
  234.       }
  235.       //----------------------------------------------------------
  236.           function save_result(inpic) {
  237.                
  238.         $.ajax ( {
  239.                type: 'POST',
  240.                url:  '/parse/showpics7.php',
  241.                data: {step:'', favpic:inpic}
  242.             }).done(
  243.                function(html) {
  244.                   //alert(html);
  245.                });
  246.           }
  247.           //----------------------------------------------------------
  248.           function mouseDown(e) {
  249.          
  250.              e= e || event;
  251.                  
  252.                  prevX=e.clientX;
  253.                  prevY=e.clientY;
  254.                  
  255.                  $('#inpic').bind('mousemove',mouseMove);
  256.                  $('#inpic').bind('mouseup',mouseUp);
  257.                  
  258.                  gl_moved=false;
  259.                  return false;
  260.           }
  261.           //----------------------------------
  262.           function mouseMove(e) {
  263.              
  264.                  e = e || event;
  265.                  var diffX = e.clientX-prevX;
  266.                  var diffY = e.clientY-prevY;
  267.                  
  268.                  prevX=e.clientX;
  269.                  prevY=e.clientY;
  270.                  
  271.                  $(this).css('left', (this.offsetLeft+diffX)+'px');
  272.                  $(this).css('top', (this.offsetTop+diffY)+'px');
  273.                  
  274.                  gl_moved=true;
  275.           }
  276.           //----------------------------------
  277.           function mouseUp(e) {
  278.              $(this).unbind('mouseup',mouseUp);
  279.                  $(this).unbind('mousemove',mouseMove);
  280.                  
  281.                  if (!gl_moved) {
  282.                     showlb(false);
  283.                  }
  284.           }
  285.    
  286.       //----------------------------------------------------------
  287.   ddrop = function() {
  288.    
  289.       _self = this;
  290.          
  291.       this.hook = function (el) {
  292.              el.onmousedown = this.mouseDown;
  293.                  el.onmousemove = this.mouseMove;
  294.                  el.onmouseup = this.mouseUp;
  295.                  el.onmouseout = this.mouseOut;
  296.                  
  297.           }
  298.          
  299.           //--------------------------
  300.           this.mouseDown = function(ev) {
  301.          
  302.              ev = ev || event;
  303.                  var target = this;
  304.                  //console.log(this.tagName);
  305.                  
  306.                  target.pressed=true;              
  307.                  target.xDiff = ev.clientX - target.offsetLeft;
  308.                  
  309.                  target.xBase=ev.clientX;                
  310.                  target.style.cursor='pointer';
  311.                  gl_moved4 = false;
  312.                  
  313.                  target.mt= new Date();
  314.    
  315.                  try {
  316.                     ev.preventDefault()
  317.                  } catch (ex) {
  318.                     ev.returnValue=false;
  319.                  }
  320.           }
  321.           //--------------------------
  322.           this.mouseMove = function(ev) {
  323.          
  324.              ev = ev || event;  
  325.              var target =  this;
  326.                  
  327.              if (target.pressed) {
  328.  
  329.                 target.mt=new Date();
  330.                
  331.                 if (Math.abs(ev.clientX-target.xBase)>10)
  332.                    gl_moved4 = true;
  333.                
  334.                 //console.log('id='+target.id);
  335.                 if (target.id=='allpics') {
  336.                         if (gl_moved4==true) {
  337.                             moveTab(ev.clientX-target.xBase);
  338.                             target.pressed=false;
  339.                         } else
  340.                            return;
  341.  
  342.                     } else
  343.                       if (target.id=='tabs') {
  344.                        target.style.left=(ev.clientX-target.xDiff)+'px';
  345.                     }
  346.                  }
  347.           }
  348.           //--------------------------
  349.           this.checkUp = function(ev, target) {
  350.  
  351.               if (target.pressed) {
  352.  
  353.                 if (target.id!='tabs') {
  354.                    target.pressed=false;
  355.                    return;
  356.                 }
  357.  
  358.                 mtt= new Date();
  359.                 //console.log(mtt-target.mt);
  360.  
  361.  
  362.                 if ((mtt-target.mt)<50) {
  363.  
  364.                    var signn = (ev.clientX-target.xBase>0)?1:-1;
  365.  
  366.                    var baseLeft = target.offsetLeft;
  367.                    var movv = 0;
  368.                    var vx = 20/((mtt-target.mt)+1)*signn;
  369.  
  370.                    var mint = setInterval( function() {
  371.  
  372.                       vx *=0.95;
  373.                       if (Math.abs(vx)<0.1)
  374.                          clearInterval(mint);
  375.  
  376.                       movv += vx;          
  377.                       //console.log('vx='+vx);        
  378.                       target.style.left = (baseLeft+movv)+'px';
  379.  
  380.                    }, 10)}
  381.                            
  382.              }          
  383.              target.pressed=false;
  384.  
  385.           }
  386.           //--------------------------
  387.  
  388.           this.mouseUp = function(ev) {  
  389.  
  390.              ev = ev || event;
  391.              var target = this;  
  392.              
  393.              _self.checkUp(ev, target);
  394.            
  395.           }
  396.           //--------------------------
  397.           this.mouseOut = function(ev) {    
  398.  
  399.                 ev = ev || event;                  
  400.                 var target =  this;
  401.                 if (!target.pressed)
  402.                    return;
  403.  
  404.  
  405.                 if (!ev.relatedTarget && ev.fromElement)
  406.                     var relatedTarget = (ev.fromElement==ev.target)
  407.                         ? ev.toElement : ev.fromElement;
  408.                  else
  409.                     var relatedTarget = ev.relatedTarget;
  410.  
  411.                
  412.      
  413.                 //console.log('id='+relatedTarget.id);
  414.  
  415.                 if (relatedTarget.id=='tabs')
  416.                    return;
  417.  
  418.                 if ($(relatedTarget).parents('#tabs').length!=0)
  419.                    return;
  420.  
  421.                    _self.checkUp(ev, target);  
  422.           }
  423.      
  424.    }
  425.       //----------------------------------------------------------
  426.       $(document).ready(
  427.              function() {
  428.              
  429.                  Ddrop = new ddrop();
  430.                  Ddrop.hook($('#tabs').get(0));
  431.                  Ddrop.hook($('#allpics').get(0));  
  432.                
  433.          //------------------------
  434.                  $('#lbox').click(function() {
  435.                      showlb(false);
  436.                  });         
  437.                 //------------------------
  438.                 $('#inpic').click( function(event) {
  439.                        
  440.                    event = event || window.event;
  441.                    if (event.stopPropagation) {
  442.                        event.stopPropagation();
  443.                    } else {
  444.                        event.cancelBubble=true;
  445.                    };})
  446.                  //------------------------
  447.                  $('#inpic').bind('mousedown',mouseDown);
  448.                  //------------------------
  449.                  window.g_loader8=false;
  450.  
  451.                  for (i=0; i<50; i++) {
  452.                     var tab = $('<div/>').html(i+1).data('nztab',i);    
  453.             tab.appendTo($('#tabs4'));
  454.  
  455.                     tab.click( function() {
  456.  
  457.                         $('#tabs4 div.active').removeClass('active');
  458.                         $(this).addClass('active');
  459.  
  460.                         clearInterval(window.g_loader8);
  461.  
  462.                         $('#allpics div:not(#zclose)').remove();
  463.                         $('#tabs').empty();
  464.                         curtabb =false;
  465.  
  466.                         var zzi=$(this).data('nztab')*50;
  467.                         var st=zzi;    
  468.                     gl_start = st;
  469.  
  470.                        window.g_loader8 = setInterval (
  471.                function() {
  472.  
  473.                               ajax_req(zzi);
  474.                   zzi++;
  475.                   if (zzi>st+49)
  476.                   clearInterval(window.g_loader8);
  477.                         },200);
  478.                     });
  479.                  }
  480.                  $('#tabs4 div:eq(0)').trigger('click');  
  481.                  
  482.                
  483.                  
  484.         })
  485.    </script>
  486. </head>
  487.  
  488. <style type="text/css">
  489.    * {
  490.       margin:0;
  491.           padding:0;
  492.    }
  493.    
  494.    .img_div {
  495.       cursor:pointer;
  496.           width:300px;
  497.           height:200px;
  498.           overflow:hidden;
  499.          
  500.           border-right:dotted 1px black;
  501.           border-bottom:dotted 1px black;
  502.           float:left;
  503.          
  504.    }
  505.    
  506.    #lbox {
  507.       position:fixed;
  508.          
  509.    }
  510.    
  511.    #shade {
  512.       position:absolute;
  513.       background-color:black;
  514.           opacity:0.8;
  515.           filter:alpha(opacity=80);
  516.           width:100%;
  517.           height:100%;
  518.           z-index:100;
  519.    }
  520.    
  521.    #inpic {
  522.       position:absolute;
  523.           z-index:200;
  524.           cursor:pointer;
  525.          
  526.    }
  527.  
  528.    #tabs-container, #tabs-container4 {
  529.  
  530.      position: fixed;
  531.      left:0;
  532.      
  533.      height:50px;
  534.      width: 100%;
  535.      overflow: hidden;
  536.  
  537.     background: #444;
  538. }
  539.  
  540. #tabs-container {
  541.    top:0;
  542. }
  543.  
  544. #tabs-container4 {
  545.    bottom:0;
  546. }
  547.  
  548.  
  549.    #tabs, #tabs4 {
  550.       position: absolute;
  551.       left:-530px;
  552.       padding-left:540px;
  553.       width: 1400px;
  554.       height: 100%;
  555.  
  556.    }
  557.  
  558.    #tabs div, #tabs4 div {
  559.  
  560.      float:left;
  561.      margin: 5px 0 4px 2px;
  562.      border: solid 1px #999;
  563.      border-radius: 10px;
  564.      overflow: hidden;
  565.      padding: 3px 3px;
  566.      width: 15px;
  567.      height: 25px;
  568.  
  569.      color: white;
  570.      background: #888;
  571.      font-size: 12px;
  572.  
  573.      cursor:pointer;
  574.    }
  575.  
  576.    #tabs div.loaded:hover,  #tabs4 div:hover {
  577.       background: #a00;
  578.    }
  579.  
  580.    #tabs div.loaded, #tabs4 div {
  581.       background: #611;
  582.    }
  583.  
  584.    #tabs div.active,  #tabs4 div.active {
  585.       background: #944;
  586.    }
  587.  
  588.  
  589.    #allpics {
  590.       position: absolute;
  591.       overflow:hidden;
  592.       top:50px;
  593.       left:0;
  594.       width: 100%;
  595.       height: 90%;
  596.       background: #eee;
  597.      
  598.    }
  599.  
  600.    #allpics div.tabz {
  601.  
  602.       position: absolute;
  603.       width: 100%;
  604.       display: none;
  605.      
  606.    }
  607.    
  608. </style>
  609.  
  610.  
  611. <body>
  612.  
  613.  
  614.  
  615. <div id="allpics">
  616.  
  617.  
  618.    <div id="zclose"
  619.       style="height:400px;background:#eee;border:solid 1px black;clear:both;display:none;">
  620.          
  621.              </div>
  622.  
  623.  
  624. </div>
  625.  
  626. <div id="tabs-container">
  627. <div id="tabs">
  628. </div>
  629. </div>
  630.  
  631. <div id="tabs-container4">
  632. <div id="tabs4">
  633. </div>
  634. </div>
  635.  
  636. <div id="lbox">
  637.   <div id="shade"></div>
  638.   <div id="inpic"><img /></div>
  639. </div>
  640.  
  641. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!