Slidesshow in javascript

Question

I am doing a slidesshow image in javascript:

function ImageLoop( images, speed, width, height ,inc){

  this.img = images;
  this.speed = speed;
  this.width = width;
  this.height = height;
  this.interval = false;
  this.play = false;
  if (inc > this.img.length-1){
      this.index = this.img.length-1;
  } else {
     this.index = inc;
  }
  this.returned = false;

  function preloadImages(){
     for (i in this.img){
         var _i = new Image();
         i.src = this.img[i];
     }
  }

  preloadImages();

  thisObj = this;
  function onInterval( ){
     thisObj.next();
  }

  function set(index) {
     var im = document.getElementById("imageloop");
     if (index > this.img.length-1){
        var idx = this.img.length-1;
     } else {
        var idx = index;
     }
     im.src = this.img[idx];
  }

  function next( ){
     if (this.play){
        if (next == this.img.length-1){
            this.returned = false;
        }
        if ((this.index == this.img.length-1) && !this.returned){
           this.returned = true;
           return;
        }
        var next = (this.index < this.img.length-1) ? ++this.index : 0;
        this.set(next);
     }
  }

  function start( ){
     this.play = true;
     if (!this.interval){
        this.interval = setInterval(onInterval, this.speed);
     }
  }

  function stop( ){
     this.play = false;
     if (this.interval){
        clearInterval(this.interval);
        this.interval = false;
     }
  }

  function changeSpeed( adjust ){
     this.speed += adjust;
     clearInterval(this.interval);
     this.interval = setInterval(onInterval, this.speed);
  }

  function serendre( place ) {
     switch (place){
        case "beginning":
                         this.stop();
                         this.set(0);
                         break;
        case "left":
                    this.stop();
                    var next = (this.index > 0) ? --this.index : this.img.length-1;
                    this.set(next);
                    break;
        case "right":
                     this.stop();
                     var next = (this.index < this.img.length-1) ? ++this.index : 0;
                     this.set(next);
                     break;
        case "end":
                   this.stop();
                   this.set(this.img.length-1);
                   break;
     }
  }

  // Setup
  var d = document.getElementById("il");
  var image = "<img src='" + this.img[this.index] + "' id='imageloop' width='" + this.width + "' height='" + this.height + "' />";
  d.innerHTML = image;

  // Add Functions
  this.preloadImages = preloadImages;
  this.set = set;
  this.next = next;
  this.start = start;
  this.stop = stop;
  this.changeSpeed = changeSpeed;
  this.serendre = serendre;

}

In IE is working fine but on other I have problem. Like when I set the index to a other number and start it in Ie working but on other it start from index 0. I don't know what is the problem of it. Can someone help me with that ?

Answer 1

I do not know your goal in what you are doing. But if you just need that functionality (image slideshow), consider using existing javascript library and solution.

For jQuery it can be:

• http://sorgalla.com/projects/jcarousel/
• http://gmarwaha.com/jquery/jcarousellite/
• http://thomlx.free.fr/jquery/jquery_carousel.htm

Answer 2

Agreed, you're reinventing the wheel.

Answer 3

I really like Lytebox. It has the slideshow feature you want (as well as others) and is very easy to use. It also works in IE6, etc.

Answer 4

The best approach to creating JS code that is compatible with all somewhat modern browsers (starting with IE6 and Firefox2) is to use a javascript library that takes care of those things for you. jQuery is an excellent library that has many plugins, including slideshows etc... You can find more information at link text and a bunch of great examples of UI features such as slideshows at link text all the best, yuval

Answer 5

i am using http://thomlx.free.fr/jquery/jquery%5Fcarousel.htm

does anyone know how onload i can goto the second image..

my code

    ;(function($){

    $.fn.carousel = function(params){

     var params = $.extend({
      direction: "horizontal",
      loop: false,
      dispItems: 1,
      pagination: false,
      paginationPosition: "inside",
      nextBtn: "<span id='next'>Next</span>",
      prevBtn: "<span id='prev'>Previous</span>",
      btnsPosition: "inside",
      nextBtnInsert: "appendTo",
      prevBtnInsert: "prependTo",
      autoSlide: false,
      autoSlideInterval: 3000,
      delayAutoSlide: 3000,
      combinedClasses: false,
      effect: "slide",
      slideEasing: "swing",
      animSpeed: "normal",
      equalWidths: "true",
      callback: function(){}
     }, params);

     if (params.btnsPosition == "outside"){
      params.prevBtnInsert = "insertBefore";
      params.nextBtnInsert = "insertAfter";
     }

     return this.each(function(){

      // Env object
      var env = {
       $elts: {},
       params: params,
       launchOnLoad: []
      };

      // Carousel main container
      env.$elts.carousel = $(this).addClass("js");

      // Carousel content
      env.$elts.content = $(this).children().css({position: "absolute", "top": 0});

      // Content wrapper
      env.$elts.wrap = env.$elts.content.wrap('<div class="carousel-wrap"></div>').parent().css({overflow: "hidden", position: "relative"});

      // env.steps object
      env.steps = {
       first: 0, // First step
       count: env.$elts.content.find(">*").length // Items count
      };

      // Last visible step
      env.steps.last = env.steps.count - 1;


      //alert(env.steps.count);

      // Next / Prev Buttons
      env.$elts.prevBtn = $(params.prevBtn)[params.prevBtnInsert](env.$elts.carousel).addClass("carousel-control previous carousel-previous").data("firstStep", -(env.params.dispItems));
      env.$elts.nextBtn = $(params.nextBtn)[params.nextBtnInsert](env.$elts.carousel).addClass("carousel-control next carousel-next").data("firstStep", env.params.dispItems);

      // Bind events on next / prev buttons
      initButtonsEvents(env, function(e){
       slide(e, this, env);
      });

      // Pagination
      if (env.params.pagination) initPagination(env);

      // On document+css load !
      $(function(){

       // First item
       var $firstItem = env.$elts.content.find(">*:eq(0)");

       //alert ($firstItem);

       // Width 1/1 : Get default item width
       env.itemWidth = $firstItem.outerWidth();

       // Width 2/3 : Define content width

       if (params.direction == "vertical"){
        env.contentWidth = env.itemWidth;
       } else {
        if (params.equalWidths) {
         env.contentWidth = env.itemWidth * env.steps.count;
        } else {
         env.contentWidth = (function(){
              var totalWidth = 0;

              env.$elts.content.find(">*").each(function(){
               totalWidth += $(this).outerWidth();
              });

              return totalWidth;
             })();
        }
       }

       // Width 3/3 : Set content width to container
       env.$elts.content.width( env.contentWidth );

       // Height 1/2 : Get default item height
       env.itemHeight = $firstItem.outerHeight();

       // Height 2/2 : Set content height to container
       if (params.direction == "vertical"){
        env.$elts.content.css({height:env.itemHeight * env.steps.count + "px"});
        env.$elts.content.parent().css({height:env.itemHeight * env.params.dispItems + "px"});
       } else {
        env.$elts.content.parent().css({height:env.itemHeight});
       }

       // Update Next / Prev buttons state
       updateButtonsState(env);

       // Launch function added to "document ready" event
       $.each(env.launchOnLoad, function(i,fn){
        fn();
       });

       // Launch autoslide
       if (env.params.autoSlide){
        window.setTimeout(function(){
         env.autoSlideInterval = window.setInterval(function(){
          env.$elts.nextBtn.click();
         }, env.params.autoSlideInterval);
        }, env.params.delayAutoSlide);
       }

      });

     });

    };

    // Slide effect
    function slide(e, btn, env){
     var $btn = $(btn);
     var newFirstStep = $btn.data("firstStep");

     //alert (newFirstStep);

     env.params.callback(newFirstStep);

     // Effect
     switch (env.params.effect){

      // No effect
      case "no":
       if (env.params.direction == "vertical"){
        env.$elts.content.css("top", -(env.itemHeight * newFirstStep) + "px");
       } else {
        env.$elts.content.css("left", -(env.itemWidth * newFirstStep) + "px");
       }
       break;

      // Fade effect
      case "fade":
       if (env.params.direction == "vertical"){
        env.$elts.content.hide().css("top", -(env.itemHeight * newFirstStep) + "px").fadeIn(env.params.animSpeed);
       } else {
        env.$elts.content.hide().css("left", -(env.itemWidth * newFirstStep) + "px").fadeIn(env.params.animSpeed);
       }
       break;

      // Slide effect
      default:
       if (env.params.direction == "vertical"){
        env.$elts.content.stop().animate({
         top : -(env.itemHeight * newFirstStep) + "px"
        }, env.params.animSpeed, env.params.slideEasing);
       } else {
        env.$elts.content.stop().animate({
         left : -(env.itemWidth * newFirstStep) + "px"
        }, env.params.animSpeed, env.params.slideEasing);
       }
     }

     env.steps.first = newFirstStep;

     updateButtonsState(env);

     // Stop autoslide
     if (!!e.clientX && env.autoSlideInterval){
      window.clearInterval(env.autoSlideInterval);
     }
    };

    // Update all buttons state : disabled or not
    function updateButtonsState(env){

     env.$elts.prevBtn.data("firstStep", env.steps.first - env.params.dispItems);
     env.$elts.nextBtn.data("firstStep", env.steps.first + env.params.dispItems);

     if (env.$elts.prevBtn.data("firstStep") < 0) {

      if (env.params.loop && env.steps.count > env.params.dispItems) {
       env.$elts.prevBtn.data("firstStep", env.steps.count - env.params.dispItems);
       env.$elts.prevBtn.trigger("enable");
      } else {
       env.$elts.prevBtn.trigger("disable");
      }

     } else {
      env.$elts.prevBtn.trigger("enable");
     }

     if (env.$elts.nextBtn.data("firstStep") >= env.steps.count) {

      if (env.params.loop && env.steps.count > env.params.dispItems) {
       env.$elts.nextBtn.data("firstStep", 0);
       env.$elts.nextBtn.trigger("enable");
      } else {
       env.$elts.nextBtn.trigger("disable");
      }

     } else {
      env.$elts.nextBtn.trigger("enable");
     }

     if (env.params.pagination){
      env.$elts.paginationBtns.removeClass("active")
      .filter(function(){ return ($(this).data("firstStep") == env.steps.first) }).addClass("active");
     }
    };

    // Next / Prev buttons events only
    function initButtonsEvents(env, slideEvent){

     env.$elts.nextBtn.add(env.$elts.prevBtn)
     .bind("enable", function(){
      var $this = $(this).bind("click", slideEvent).removeClass("disabled");
      // Combined classes : IE6 compatibility
      if (env.params.combinedClasses) {
       $this.removeClass("next-disabled previous-disabled");
      }
     })
     .bind("disable", function(){
      var $this = $(this).unbind("click").addClass("disabled");

      // Combined classes : IE6 compatibility
      if (env.params.combinedClasses) {

       if ($this.is(".next")) {
        $this.addClass("next-disabled");

       } else if ($this.is(".previous")) {
        $this.addClass("previous-disabled");

       }
      }
     });

     env.$elts.nextBtn.add(env.$elts.prevBtn).hover(
      function(){
       $(this).addClass("hover");
      },
      function(){
       $(this).removeClass("hover");
      }
     );
    };

    // Pagination
    function initPagination(env){
     env.$elts.pagination = $('<div id="carNav" class="center-wrap"><div class="carousel-pagination"><ul id="sectionNav"></ul></div></div>')[((env.params.paginationPosition == "outside")? "insertAfter" : "appendTo")](env.$elts.carousel).find("ul");

     env.$elts.paginationBtns = $([]);
     var number = 0;   
     env.$elts.content.find("li").each(function(i){



      if (i % env.params.dispItems == 0) {
       //env.$elts.paginationBtns = env.$elts.paginationBtns.add( $('<a role="button"><span>'+( env.$elts.paginationBtns.length + 2 )+'</span></a>').data("firstStep", i) );



       if (number == 0) {
       env.$elts.paginationBtns = env.$elts.paginationBtns.add( $('<li id="menuPers" role="button"><a class="posText" >Personal</a></li>').data("firstStep", i) );

       }

       if (number == 1) {
       env.$elts.paginationBtns = env.$elts.paginationBtns.add( $('<li id="menuBus"><a role="button" a class="posText">Business</a></li>').data("firstStep", i) );

       }

       if (number == 2) {
       env.$elts.paginationBtns = env.$elts.paginationBtns.add( $('<li id="menuComm"><a role="button" a class="posText" >Community</a></li>').data("firstStep", i) );

       }






      number = number + 1; 


      }

      //alert(number);
     });

     env.$elts.paginationBtns.appendTo(env.$elts.pagination);

     env.$elts.paginationBtns.slice(0,1).addClass("active");

     // Events
     env.launchOnLoad.push(function(){
      env.$elts.paginationBtns.click(function(e){
       slide( e, this, env);



      });
     });
    };

})(jQuery);