0 Replies - 1640 Views - Last Post: 26 September 2012 - 03:03 PM

#1 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 103
  • View blog
  • Posts: 218
  • Joined: 23-September 12

Full-page Image Slideshow (HTML5)

Posted 26 September 2012 - 03:03 PM

Description: No other libraries required.

1. Save Javascript to a file; name it whatever you want.
2. Include this file in your HTML using a 'script' tag.
3. Create a div or other container element with an id of 'slideshow'.
4. Fill the div with images using the img tag.
5. Should be good to go. Use left and right arrows to navigate through the images.

Feedback highly welcome. Takes a div with some image tags in it and turns it into a full-page, animated slideshow. Images are scaled as large as possible within the confines of the browser window.
/* slideshow app */
var slideshow = function()
{
    this.fade = true;
    this.element = document.getElementById( 'slideshow' );
    this.images = new Array();
    this.currentImage = 0;
    this.scrollOffset = 0;
    for(var i=0; i<this.element.children.length; ++i)
    {
        this.images.push(this.element.children[i]);
    }
    
    var getWindowDimensions = function(t)
    {
        t.width = 630;
        t.height = 460;
        if (document.body && document.body.offsetWidth) {
            t.width = document.body.offsetWidth;
            t.height = document.body.offsetHeight;
        }
        if (document.compatMode=='CSS1Compat' &&
            document.documentElement &&
            document.documentElement.offsetWidth ) {
            t.width = document.documentElement.offsetWidth;
            t.height = document.documentElement.offsetHeight;
        }
        if (window.innerWidth && window.innerHeight) {
            t.width = window.innerWidth;
            t.height = window.innerHeight;
        }
    };
    
    getWindowDimensions(this);
    
    // create a canvas that fills the whole window
    this.element.innerHTML = "<canvas id="slideshow_canvas" width="" 
        + (this.width)
        + "" height="" + (this.height) + "">"
        + "You need an HTML 5-Compatable browser to view this page."
        + "</canvas>";
    
    this.canvas = document.getElementById('slideshow_canvas');
    this.context = this.canvas.getContext('2d');
    
    // compute appropriate target dimensions
    // the largest size that can fit onscreen
    this.im_ws = new Array();
    this.im_hs = new Array();
    for( var i=0; i<this.images.length; ++i)
    {
        var im = this.images[i];
        var imw = im.width;
        var imh = im.height;
        var s=1;
        if( imw/this.width > imh/this.height )
        {
            s = this.width/imw;
        }
        else
        {
            s = this.height/imh;
        }
        this.im_ws.push( s*imw );
        this.im_hs.push( s*imh );
    }
    var self = this;
    window.addEventListener('keydown',function(evt){ self.doKey(evt); } );
    document.body.style.padding = "0 0";
    document.body.style.margin = "0 0";
    document.body.style.overflow = "hidden";
    document.body.style.overflowX = "hidden";
    document.body.style.overflowY = "hidden";
    this.showImage(0);
};

slideshow.prototype.showImage = function(n, offset)
{
    
    if( Math.abs(offset) > 1 )
    {
        var self = this;
        setTimeout( function(){ self.showImage(n, offset/2); },20 );
    }else
    {
        offset = 0;
    }
    this.scrollOffset = offset;
    this.currentImage = n;
    this.context.clearRect(0,0,this.width,this.height);
    this.context.fillStyle = "rgba(0,0,0,0.5)";
    this.context.fillRect(0,0,this.width,this.height);
    n = n%this.images.length;
    var lx = this.width/2 - this.im_ws[n]/2 + offset;
    var ly = this.height/2 - this.im_hs[n]/2;
    
    // jokers to the left;
    var l = this.prev(this.currentImage);
    var rightx = lx;
    while( rightx > 0 )
    {
        var py = this.height/2 - this.im_hs[l]/2;
        this.context.drawImage( this.images[l], rightx-this.im_ws[l],py,this.im_ws[l],this.im_hs[l]);
        rightx -= this.im_ws[l];
        l = this.prev(l);
    }

    // jokers to the right.    
    var r = this.next(this.currentImage);
    var leftx = lx + this.im_ws[n];
    while( leftx < this.width )
    {
        var py = this.height/2 - this.im_hs[r]/2;
        this.context.drawImage( this.images[r], leftx, py, this.im_ws[r], this.im_hs[r] );
        leftx = leftx + this.im_ws[r];
        r = this.next(r);
    }
    
    if( this.fade )
    {
    this.context.fillStyle = "rgba(1,1,1,0.5)";
    this.context.fillRect( 0,0, this.width, this.height );
    }
    // stuck in the middle with you
    this.context.drawImage( this.images[n], lx, ly, this.im_ws[n], this.im_hs[n] );
    // fade it a little based on offset
    if( Math.abs(offset) > 0 && this.fade)
    {
        var alpha = Math.max(0.5 - Math.pow(Math.E, -Math.abs(offset)/100),0);
        this.context.fillStyle = "rgba(1,1,1," + alpha + ")";
        this.context.fillRect( lx, ly, this.im_ws[n], this.im_hs[n] );
    }
};

slideshow.prototype.distance = function(m,n,delta)
{
    var w=0;
    if( delta==-1 )
    {
        while( m!=n )
        {
            w -= this.im_ws[m];
            m = this.prev(m);
        }
    }
    else if( delta==1 )
    {
        w = this.im_ws[m];
        while( m!= n )
        {
            w += this.im_ws[m];
            m = this.next(m);
        }
    }
    return w;
}

slideshow.prototype.doKey = function(event)
{
    //alert(event.keyCode);
    if( this.scrollOffset==0 )
    {
        var n=0;
        if( event.keyCode == 39 ){
            n = (this.currentImage + 1)%this.images.length;
            this.showImage(n, this.distance(this.currentImage,n,1));
        }else if( event.keyCode == 37 ){
            n = this.currentImage==0?this.images.length-1:this.currentImage-1;
            this.showImage(n, this.distance(this.currentImage,n, -1));
        }
    }
    
};

slideshow.prototype.prev = function(n)
{
    return n>0?n-1:this.images.length-1;
};

slideshow.prototype.next = function(n)
{
    return (n+1)%this.images.length;
};

var addLoadEvent = function(f)
{
    var oldf = window.onload;
    if( typeof oldf != 'function' )
    {
        window.onload = f;
    }
    else
    {
        window.onload = function() { oldf(); f(); };
    }
};

addLoadEvent(function(){ window.theslideshow = new slideshow(); });


Is This A Good Question/Topic? 0
  • +

Page 1 of 1