Timer

May 11, 2012 at 5:43 PM

It would be nice to have an image timer.  Is there an easy way to do this within your javascript count function?

Coordinator
May 12, 2012 at 8:05 AM

Hi,

Not sure I understand what you mean by image timer?

May 12, 2012 at 1:53 PM

The count down that is placed right by the "Start Stop" links under the image display.  This counts down for the seconds until the next slide is shown.  It would be nice to be able to have the option to have an Gif image that displays indicating the amount of seconds left instead of the numeric count down.

Coordinator
May 12, 2012 at 2:42 PM

Hi,
I'm not too keen on adding that option to AD Gallery, because I'm not sure that a lot of people would use it. But you could implement it yourself by:

1) Adding a css rule to hide the element with the css class ad-slideshow-controls
2) Adding you're own start and stop buttons, and adding this js:

$(".custom_slideshow_start").click(function() {
    galleries[0].slideshow.start();
});
$(".custom_slideshow_stop").click(function() {
    galleries[0].slideshow.stop();
});

3) Implement the onStart and onStop callbacks in the AD Gallery function to hide/show your gif, something like this:
var galleries = $('.ad-gallery').adGallery({
    slideshow: {
        onStart: function() {
            // the current speed can be found in this.settings.speed
            mygif.show();
        },
        onStop: function() {
            mygif.hide();
        }
    },
    callbacks: function() {
        afterImageVisible: function() {
            // You might need to add some stuff here as well?
        }
    }
});

Jun 11, 2012 at 6:51 PM
Edited Jun 11, 2012 at 8:01 PM

Hello,

i have realized the Start/Stop controlling with buttons and i think it's usefull if you don't see "Start" while the Show is running and you don't need "Stop" while it stops.

I have added two rows in the jQuery:

start: function() {
      if(this.running || !this.enabled) return false;
      var context = this;
      this.running = true;
      this.controls.removeClass('ad-slideshow-pause'); // new row ********************
      this.controls.addClass('ad-slideshow-running');
      this._next();
      this.fireCallback(this.settings.onStart);
      return true;
    },
    stop: function() {
      if(!this.running) return false;
      this.running = false;
      this.countdown.hide();
      this.controls.removeClass('ad-slideshow-running');
      this.controls.addClass('ad-slideshow-pause'); // new row ***********************
      clearInterval(this.countdown_interval);
      this.fireCallback(this.settings.onStop);
      return true;
    },

and replaced/added in css following:

.ad-gallery .ad-slideshow-controls .ad-slideshow-start,.ad-gallery .ad-slideshow-controls .ad-slideshow-stop {
        cursor: pointer;
      }

      /* ************ running **************************** */
      .ad-gallery .ad-slideshow-running .ad-slideshow-start {
        width:0px; max-width:0px; overflow:hidden;
      }
      .ad-gallery .ad-slideshow-running .ad-slideshow-stop {
        padding: 3px;padding-left: 10px;padding-right: 10px;
        background: url(img/pause.png) center center no-repeat;
      }
      /* ************************************************* */

      /* ************ pause ****************************** */
      .ad-gallery .ad-slideshow-pause .ad-slideshow-start {
        padding: 3px;padding-left: 10px;padding-right: 10px;
        background: url(img/play.png) center center no-repeat;
      }
      .ad-gallery .ad-slideshow-pause .ad-slideshow-stop {
        width:0px; max-width:0px; overflow:hidden;
      }
      /* ************************************************* */

Hope that's what you're looking for?