Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script type="text/javascript">
- var prevX, prevY;
- var gl_moved, gl_moved4;
- var Ddrop;
- var curtabb=false;
- var gl_start=false;
- //-------------------------------------------
- function decode_base64(s) {
- var e={},i,k,v=[],r='',w=String.fromCharCode;
- var n=[[65,91],[97,123],[48,58],[43,44],[47,48]];
- for(z in n){for(i=n[z][0];i<n[z][1];i++){v.push(w(i));}}
- for(i=0;i<64;i++){e[v[i]]=i;}
- for(i=0;i<s.length;i+=72){
- var b=0,c,x,l=0,o=s.substring(i,i+72);
- for(x=0;x<o.length;x++){
- c=e[o.charAt(x)];b=(b<<6)+c;l+=6;
- while(l>=8){r+=w((b>>>(l-=8))%256);}
- }
- }
- return r;
- }
- //--------------------------------------toggle lightbox
- function showlb(on) {
- if (on) {
- $('#lbox').css('width',screen.width+'px');
- $('#lbox').css('height',screen.height+'px');
- $('#lbox').fadeIn('slow');
- }
- else {
- $('#lbox').fadeOut('slow');
- }
- }
- //----------------------------------------------------------
- function thumbClick(el) {
- if (gl_moved4)
- return;
- save_result( $(el).attr('src'));
- var imz = new Image();
- imz.src = el.src;
- $(imz).load (function () {
- $('#inpic').empty().append($(this));
- $('#inpic').css('left', Math.floor(screen.width/2-this.width/2)+'px');
- $('#inpic').css('top', Math.floor(screen.height/2-this.height/2)+'px');
- showlb(true);
- });
- };
- //----------------------------------------------------------
- function load_els(dfd, infj, bigtab) {
- var n_els = $(infj).length;
- var n_loaded = 0;
- $.each(infj, function(i,valu) {
- var zDiv=$('<div>',{'class':'img_div'});
- var zImg=$('<img/>',{'rel':decode_base64(valu['img']),
- 'width':'300px'}).appendTo(zDiv);
- $(bigtab).append(zDiv);
- //----------------
- zImg.error(function() {
- //console.log('failed: '+this.src+' '+$(this).width());
- n_loaded++;
- if (n_loaded>=n_els)
- dfd.resolve();
- });
- //----------------
- zImg.load (function() {
- //console.log('preloaded: '+this.src+' '+$(this).width());
- n_loaded++;
- if (n_loaded>=n_els)
- dfd.resolve();
- });
- //----------------
- zImg.attr('src',decode_base64(valu['thumb']));
- //----------------
- zImg.click(function() {
- thumbClick(this);
- });
- //-----------------
- zDiv.append(zImg);
- });
- }
- //----------------------------------------------------------
- function showtab(ntab) {
- if (gl_moved4)
- return;
- $('#tabs div.active').removeClass('active');
- $("#tabs div:contains('"+(ntab+1)+"')").addClass('active');
- $('#allpics div.tabz:visible').fadeOut('slow');
- curtabb = $('#allpics div.tabz').filter(
- function(index) {
- return $(this).data('ntab')==ntab;
- }).fadeIn('fast');
- }
- //----------------------------------------------------------
- function moveTab(x) {
- var zuu = curtabb;
- if (x<0) {
- curtabb = $(curtabb).next('.tabz').get(0);
- }
- else {
- curtabb = $(curtabb).prev('.tabz').get(0);
- }
- if (!curtabb) {
- curtabb=zuu;
- return;
- }
- var direct = (x<0)?'-':'+';
- $(zuu).animate({left: direct+'=500'},{ queue: false, duration: 1000,
- complete:
- function() {
- $(this).css('left',0);
- }}
- );
- $(zuu).fadeOut('slow').queue(
- function() {
- $(this).dequeue();
- }
- );
- var uue = $('#tabs div.active').removeClass('active');
- if (x<0)
- uue.next().addClass('active');
- else
- uue.prev().addClass('active');
- //$('#tabs').animate({left: direct+'=25'},'slow');
- $(curtabb).fadeIn('slow');
- }
- //----------------------------------------------------------
- function mktab(numtab, infj) {
- var tab = $('<div/>').html(numtab+1).data('ntab',numtab);
- tab.appendTo($('#tabs'));
- var bigtab=$('<div/>',{class:'tabz'}).data('ntab',numtab);
- bigtab.insertBefore($('#allpics #zclose'));
- while (parseInt(tab.prev().html())>numtab+1) {
- tab.insertBefore(tab.prev());
- bigtab.insertBefore(bigtab.prev());
- }
- var waitz = $.Deferred (
- function(dfd) {
- load_els(dfd, infj, bigtab);
- }
- );
- $.when(waitz).done(
- function() {
- tab.addClass('loaded');
- tab.click( function() {
- showtab($(this).data('ntab'));
- });
- if (!curtabb)
- tab.trigger('click');
- //console.log('loading completed');
- }
- );
- }
- //----------------------------------------------------------
- function ajax_req (numtab) {
- $.ajax ( {
- type: 'POST',
- url: '/parse/showpics7.php',
- dataType: 'json',
- data: {step:'', grabbed:'http://tests.dmkim1.bget.ru/parse/parser.php?file8=.%2Fparsed%2Fparsed_240320131901361075.txt',start:numtab}
- }).done(
- function(infj) {
- if ((numtab<gl_start) || (numtab>gl_start+49))
- return;
- mktab(numtab, infj);
- });
- }
- //----------------------------------------------------------
- function save_result(inpic) {
- $.ajax ( {
- type: 'POST',
- url: '/parse/showpics7.php',
- data: {step:'', favpic:inpic}
- }).done(
- function(html) {
- //alert(html);
- });
- }
- //----------------------------------------------------------
- function mouseDown(e) {
- e= e || event;
- prevX=e.clientX;
- prevY=e.clientY;
- $('#inpic').bind('mousemove',mouseMove);
- $('#inpic').bind('mouseup',mouseUp);
- gl_moved=false;
- return false;
- }
- //----------------------------------
- function mouseMove(e) {
- e = e || event;
- var diffX = e.clientX-prevX;
- var diffY = e.clientY-prevY;
- prevX=e.clientX;
- prevY=e.clientY;
- $(this).css('left', (this.offsetLeft+diffX)+'px');
- $(this).css('top', (this.offsetTop+diffY)+'px');
- gl_moved=true;
- }
- //----------------------------------
- function mouseUp(e) {
- $(this).unbind('mouseup',mouseUp);
- $(this).unbind('mousemove',mouseMove);
- if (!gl_moved) {
- showlb(false);
- }
- }
- //----------------------------------------------------------
- ddrop = function() {
- _self = this;
- this.hook = function (el) {
- el.onmousedown = this.mouseDown;
- el.onmousemove = this.mouseMove;
- el.onmouseup = this.mouseUp;
- el.onmouseout = this.mouseOut;
- }
- //--------------------------
- this.mouseDown = function(ev) {
- ev = ev || event;
- var target = this;
- //console.log(this.tagName);
- target.pressed=true;
- target.xDiff = ev.clientX - target.offsetLeft;
- target.xBase=ev.clientX;
- target.style.cursor='pointer';
- gl_moved4 = false;
- target.mt= new Date();
- try {
- ev.preventDefault()
- } catch (ex) {
- ev.returnValue=false;
- }
- }
- //--------------------------
- this.mouseMove = function(ev) {
- ev = ev || event;
- var target = this;
- if (target.pressed) {
- target.mt=new Date();
- if (Math.abs(ev.clientX-target.xBase)>10)
- gl_moved4 = true;
- //console.log('id='+target.id);
- if (target.id=='allpics') {
- if (gl_moved4==true) {
- moveTab(ev.clientX-target.xBase);
- target.pressed=false;
- } else
- return;
- } else
- if (target.id=='tabs') {
- target.style.left=(ev.clientX-target.xDiff)+'px';
- }
- }
- }
- //--------------------------
- this.checkUp = function(ev, target) {
- if (target.pressed) {
- if (target.id!='tabs') {
- target.pressed=false;
- return;
- }
- mtt= new Date();
- //console.log(mtt-target.mt);
- if ((mtt-target.mt)<50) {
- var signn = (ev.clientX-target.xBase>0)?1:-1;
- var baseLeft = target.offsetLeft;
- var movv = 0;
- var vx = 20/((mtt-target.mt)+1)*signn;
- var mint = setInterval( function() {
- vx *=0.95;
- if (Math.abs(vx)<0.1)
- clearInterval(mint);
- movv += vx;
- //console.log('vx='+vx);
- target.style.left = (baseLeft+movv)+'px';
- }, 10)}
- }
- target.pressed=false;
- }
- //--------------------------
- this.mouseUp = function(ev) {
- ev = ev || event;
- var target = this;
- _self.checkUp(ev, target);
- }
- //--------------------------
- this.mouseOut = function(ev) {
- ev = ev || event;
- var target = this;
- if (!target.pressed)
- return;
- if (!ev.relatedTarget && ev.fromElement)
- var relatedTarget = (ev.fromElement==ev.target)
- ? ev.toElement : ev.fromElement;
- else
- var relatedTarget = ev.relatedTarget;
- //console.log('id='+relatedTarget.id);
- if (relatedTarget.id=='tabs')
- return;
- if ($(relatedTarget).parents('#tabs').length!=0)
- return;
- _self.checkUp(ev, target);
- }
- }
- //----------------------------------------------------------
- $(document).ready(
- function() {
- Ddrop = new ddrop();
- Ddrop.hook($('#tabs').get(0));
- Ddrop.hook($('#allpics').get(0));
- //------------------------
- $('#lbox').click(function() {
- showlb(false);
- });
- //------------------------
- $('#inpic').click( function(event) {
- event = event || window.event;
- if (event.stopPropagation) {
- event.stopPropagation();
- } else {
- event.cancelBubble=true;
- };})
- //------------------------
- $('#inpic').bind('mousedown',mouseDown);
- //------------------------
- window.g_loader8=false;
- for (i=0; i<50; i++) {
- var tab = $('<div/>').html(i+1).data('nztab',i);
- tab.appendTo($('#tabs4'));
- tab.click( function() {
- $('#tabs4 div.active').removeClass('active');
- $(this).addClass('active');
- clearInterval(window.g_loader8);
- $('#allpics div:not(#zclose)').remove();
- $('#tabs').empty();
- curtabb =false;
- var zzi=$(this).data('nztab')*50;
- var st=zzi;
- gl_start = st;
- window.g_loader8 = setInterval (
- function() {
- ajax_req(zzi);
- zzi++;
- if (zzi>st+49)
- clearInterval(window.g_loader8);
- },200);
- });
- }
- $('#tabs4 div:eq(0)').trigger('click');
- })
- </script>
- </head>
- <style type="text/css">
- * {
- margin:0;
- padding:0;
- }
- .img_div {
- cursor:pointer;
- width:300px;
- height:200px;
- overflow:hidden;
- border-right:dotted 1px black;
- border-bottom:dotted 1px black;
- float:left;
- }
- #lbox {
- position:fixed;
- }
- #shade {
- position:absolute;
- background-color:black;
- opacity:0.8;
- filter:alpha(opacity=80);
- width:100%;
- height:100%;
- z-index:100;
- }
- #inpic {
- position:absolute;
- z-index:200;
- cursor:pointer;
- }
- #tabs-container, #tabs-container4 {
- position: fixed;
- left:0;
- height:50px;
- width: 100%;
- overflow: hidden;
- background: #444;
- }
- #tabs-container {
- top:0;
- }
- #tabs-container4 {
- bottom:0;
- }
- #tabs, #tabs4 {
- position: absolute;
- left:-530px;
- padding-left:540px;
- width: 1400px;
- height: 100%;
- }
- #tabs div, #tabs4 div {
- float:left;
- margin: 5px 0 4px 2px;
- border: solid 1px #999;
- border-radius: 10px;
- overflow: hidden;
- padding: 3px 3px;
- width: 15px;
- height: 25px;
- color: white;
- background: #888;
- font-size: 12px;
- cursor:pointer;
- }
- #tabs div.loaded:hover, #tabs4 div:hover {
- background: #a00;
- }
- #tabs div.loaded, #tabs4 div {
- background: #611;
- }
- #tabs div.active, #tabs4 div.active {
- background: #944;
- }
- #allpics {
- position: absolute;
- overflow:hidden;
- top:50px;
- left:0;
- width: 100%;
- height: 90%;
- background: #eee;
- }
- #allpics div.tabz {
- position: absolute;
- width: 100%;
- display: none;
- }
- </style>
- <body>
- <div id="allpics">
- <div id="zclose"
- style="height:400px;background:#eee;border:solid 1px black;clear:both;display:none;">
- </div>
- </div>
- <div id="tabs-container">
- <div id="tabs">
- </div>
- </div>
- <div id="tabs-container4">
- <div id="tabs4">
- </div>
- </div>
- <div id="lbox">
- <div id="shade"></div>
- <div id="inpic"><img /></div>
- </div>
- </body></html>
Add Comment
Please, Sign In to add comment