SimpleBoxes.e | Updating my Lightbox script (ver 20090729)

Updating my Lightbox script (ver 20090729)

2009.07.29 Wednesday
dev

I haven't implemented new feature in Lightbox script in ages, but I've mucked around with my Lightbox script aka "Lightbox plus" in this month. You can see the details and samples in Lightbox plus page

Lightbox is very cool and useful script to display an image on the page. Lightbox is quite attractive, so nowadays we have a lot of alternatives (see examples). Lightbox plus is one of alternatives as well.

The original "Lightbox" has been updated as Lightbox JS v2 which supports several new feature such as image set and cool animation transition. I've already implemented image set feature in lightbox plus, however I haven't touch any animation transition so far. Recently one of my script users requested animation transition into my script, so I tried to implement this feature.

Fortunately my script has already been using a timer (setInterval) to keep the proper position and size for a image against the browser window.

Once the corresponding anchor is clicked, _show method will be called. The lightbox will start a timer in _show as follows:

self._timer = window.setInterval( function() { self._run() }, 20);


_run method is a callback of the timer, so it will be called priodically.  Animation transition is not main functionality for my lightbox, so I've made do with simple implementation.
I've added new member variable _anim.step to check the current state regrding animation.

	0 : initial resizing (opening lightbox)
	1 : fading in (opening lightbox)
	2 : done animation (lightbox is opened)
	3 : fading out (closing lightbox)

So it's quite obvious what the script is doing in _run.
_run : function()
{
  var self = this;
  self._set_size(true);
  if ( self._anim.step == 0 || self._anim.w != self._img.width || self._anim.h != self._img.height )
  {
    self._doResizing();
  }
  else if ( self._anim.step == 1 )
  {
    self._doFadeIn();
  }
  else if ( self._anim.step == 3 )
  {
    self._doFadeOut();
  }
  else
  { // normal state
    self._img.width = self._anim.w;
    self._img.height = self._anim.h;
    self._show_caption(true);
  }
}
Resizing image will occur when a user enlarges the image, resizes the window, or changes the zoom level of the image.  So the lightbox will do resizeing in those cases as well.
The latest lightbox script (ver 20090729) also supports the delayed initialization.
Normally the lightbox will check through all anchors (links) in the page when the page is loaded.  There is the following code at the end of script:
Spica.Event.run(function() { 
  var lightbox = new Lightbox({
    loadingimg:'resource/loading.gif',
    expandimg:'resource/expand.gif',
    shrinkimg:'resource/shrink.gif',
    blankimg:'resource/blank.gif',
    previmg:'resource/prev.gif',
    nextimg:'resource/next.gif',
    closeimg:'resource/close.gif',
    effectimg:'resource/zzoop.gif',
    effectpos:{x:-40,y:-20},
    effectclass:'effectable',
    resizable:true,
    animation:true
  });
});
The code Spica.Event.run means running at onLoad.
You can modify this code if you want to update or initialize the lightbox at your own timing as follows:
var lightbox = new Lightbox({
  loadingimg:'resource/loading.gif',
  expandimg:'resource/expand.gif',
  shrinkimg:'resource/shrink.gif',
  blankimg:'resource/blank.gif',
  previmg:'resource/prev.gif',
  nextimg:'resource/next.gif',
  closeimg:'resource/close.gif',
  effectimg:'resource/zzoop.gif',
  effectpos:{x:-40,y:-20},
  effectclass:'effectable',
  resizable:true,
  animation:true,
  skipInit:true
});
Then later you can call refresh method at the time when the page is ready.
lightbox.refresh(window.document);
window.document could be any DOM element here.



<< Sightseeing - Kamakura, Tokyo :: My birthday present is ... >>