API tools faq
paste
Advertisement
terorama

JQuery / showpics7.php

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