slider / slider.php


<?php

session_start();
session_destroy();
session_commit();

session_start();

$_SESSION["startpic"]=1;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Cache-Control" content="no-cache" />

   <meta name="description" content="Упражнение по PHP,JQuery - слайдер" />
   <meta name="keywords" content="php,html,css,javascript,jquery" />

      <title>Упражнение по PHP,JQuery - слайдер</title>

   <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

<!--------------------------------------------------------------------->
<script type="text/javascript">
(function($) {

   ZSlider = function (options) {

      var my=this;
      var loading=false;
      //----------------------------------
      this.defaults = {
         targetID: 'inslider',
         ajax_url: '',
         ajax_comm: []

      }
      //----------------------------------FTG

      this.init = function (options) {
         my.options= $.extend(true,{}, my.defaults,options);

         this.targetDiv=$('#'+this.options.targetID);

         this.Tracer.init();
         my.wr=function(instr) {this.Tracer.wr(instr);};

         this.drawblocks();

         this.Scroller.init();

         //this.append_pictures();
      }

      //-------------------------draw main structure FTG
      this.drawblocks = function () {

         var clDiv=$('<div>', {'id':'zclose', 'css':{'clear':'both'}});

         this.targetDiv.append(clDiv);
      }

      //----------------------------ajax request
      this.ajax_request = function (param, f3) {

         $.ajax ( {
            type: 'POST',
            url:  this.options.ajax_url,
            data: param
         }
         ).done(
            function(html) {
               f3.statEl.ajax_result=f3.show(html);
               my.wr('finished: '+f3.statEl.testb);
               my.loading=false;
            }
         )
      }

      //----------------------append pictures
      this.append_pictures = function () {

         //var targ= new Object();
         //var stat={};
         if (this.loading) {
            this.wr('load attempt refused');
            return;
            }

         if (my.testB)
            my.testB++;
         else
            my.testB=100;

         this.loading=true;
         var curr_stat=this.load_pictures(0,10,my.testB);
         this.wr('start load: '+curr_stat.testb);

         return curr_stat.testb;
      }

      //---------------------load pictires
      this.load_pictures =function (ajax_result,
                        wait_count,
                        testb) {

         var stat = {};
         stat.ajax_result=ajax_result;
         stat.testb='A'+testb;

         var zShow_pics = new this.show_pics(stat);

         this.ajax_request(this.options.ajax_comm,zShow_pics);

         return stat;
      }

      //------------------show pics object
      this.show_pics = function (stat) {

         this.statEl=stat;
         //-------------------------
         this.show=function(html) {
            if (html=='[]')
               return 3;

            var json_resp=eval("("+html+")");
            var picdiv = $('<div>',{'class':'picsin'});
            var img =$('<img>',{});

            for (var i=0;i<json_resp.length; i++) {

               var npd=picdiv.clone();
               var nimg=img.clone();

               nimg.attr('src',json_resp[i]['small']);
               nimg.data('lgpath',json_resp[i]['big']);
               //-----------------
               var imBig = new Image();
               imBig.ss=nimg.data('lgpath');
               imBig.src=imBig.ss;
               nimg.get(0).imBig=imBig;
               //-----------------
               npd.append(nimg);

               my.targetDiv.find('#zclose').before(npd);
            }
            return 4;
         }
      }
      //-------------------------------------------
      this.Scroller = {

         master:{},
         curr_loading : 0,
         scrolls_count: 0,
         current_scroll : 0,
         //----------------------------
         init: function() {
            //this.master=my;

            this.scrollev();

            $(window).scroll(this.scrollev);
            $(window).on('resize',this.scrollev);

         },
         //----------------------------
         scrollev: function () {

            var zsc=my.Scroller;

            if (zsc.current_scroll!=0)
               {
               my.wr('busy');
               return;
            }

            zsc.scrolls_count++;
            my.wr('scrolling: '+zsc.scrolls_count);
            zsc.current_scroll=zsc.scrolls_count;

            var tmStat={
               waitcount : 10,
               z_testB : zsc.curr_loading,
               n_scroll : zsc.scrolls_count,
               zsc : zsc
            };
            //-------------------
            init_loadpict(tmStat);


            //-----------------------
            function init_loadpict(inStat) {

               if (my.loading) {
                  inStat.waitcount--;
                  if (inStat.waitcount==0) {
                     my.wr('ajax load timeout');
                     inStat.zsc.current_scroll=0;
                     return;
                  }
                  my.wr('waiting '+inStat.z_testB+' S'+inStat.n_scroll+' - '+
                        inStat.waitcount);

                  setTimeout(function(){init_loadpict(inStat);},200);
                  return;
               }
               //----------------
               var pageHeight = document.documentElement.clientHeight;
               var scrolled = window.pageYOffset || document.documentElement.scrollTop;
               var contentHeight = my.targetDiv.height()+my.targetDiv.position().top;

               my.wr(pageHeight+' - '+scrolled+' - '+contentHeight);

               if ((pageHeight+scrolled)>(contentHeight-800))
                  {
                     my.wr('init loading');


                     var z_tmStat={
                        waitcount : 10,
                        z_testB : 0,
                        n_scroll : inStat.n_scroll,
                        zsc : inStat.zsc
                     };

                     z_tmStat.z_testB = my.append_pictures();
                     inStat.zsc.curr_loading = z_tmStat.z_testB;

                     setTimeout(function(){init_loadpict(z_tmStat);},200);
                     }
                else {
                   inStat.zsc.current_scroll=0;
                }
            }
            //-----------------------

         }

      }
      //-------------------------------------------
      this.Tracer = {
         traceBlock: {},
         init: function () {
            var traceBlock = $('<div>',{'id':'traceblock'});

            $(document.body).append(traceBlock);
            this.traceBlock=traceBlock;
            this.wr('start');

         },
         wr: function (instr) {
            var ht=this.traceBlock.html();
            this.traceBlock.html(instr+'<br />'+ht);
         }
      }
      //-------------------------------------------
      this.init(options);

   }

}) (jQuery)
</script>
<!--------------------------------------------------------------------->
<script type="text/javascript">
   $(document).ready(function() {

      var zSl= new ZSlider ({targetID:'inslider',ajax_url:'req4.php',
                             ajax_comm:{req:'showparsed'}})
   });
</script>
<!--------------------------------------------------------------------->
<style type="text/css">
   #inslider {

   }

  .picsin  {
      float:left;
      border-right:dotted 1px black;
      border-bottom:dotted 1px black;
      padding:10px;
      /*height:200px;*/
      overflow:hidden;
      cursor:pointer;
   }

    #traceblock {
      position:fixed;
      width:300px;
      height:400px;
      background:#333;
      border:solid 1px yellow;
      color:#9f9;

      font-family:verdana;
      font-size:12px;
      padding:5px;

      z-index:10;
      opacity:0.8;
      filter:alpha(opacity=80);
      overflow:hidden;

      left:50px;
      top:50px;
   }
</style>
<!--------------------------------------------------------------------->

</head>

<body>
   <div id="inslider"></div>
</body>
</html>