File: D:/HostingSpaces/SBogers10/deensekroon.komma-mediadesign.nl/wwwroot/js/gallery.class.js
/*
Gallery.js
Created by Mike Ontwerpt
2012
www.mikeontwerpt.nl
Last update:
11 july 2012
*/
function Gallery(target, name, nav){
//////// Properties ////////
//user controlled properties
this.name = 'g-'+name;
this.nav = nav; //has navagtion ?
this.minWidth = 1000;
this.minHeight = 600;
this.fadeTime = 400;
// gallery properties
this.g = '';
this.images = new Array();
this.appendedImages = this.images;
this.numImages = 0;
this.index = 0;
this.groups = new Array();
this.numGroups = 0;
this.blocked = false;
this.isiPad = navigator.userAgent.match(/iPad/i) != null;
this.isiPhone = navigator.userAgent.match(/iPhone/i) != null;
this.isIE = navigator.userAgent.match(/MSIE/i) != null;
this.supportTrans = true;
this.wSize = new Array();
this.type = 0; //0 = product ; 1 = hover
this.isLooped = false;
this.paused = true;
this.loopInt = null;
//////// Construct Gallery ////////
var str = '';
str += '<div class="background"></div>';
str += '<div class="button close"></div>';
if(this.nav) str += '<div class="button next"></div><div class="button previous"></div><div class="button restart"></div>';
str += '<div class="loader" style="display: none"><img src="/images/structure/loading.gif" alt="loading.." /></div>';
this.g = document.createElement("div");
this.g.className = "gallery";
this.g.id = this.name;
this.g.style.display = "none";
this.g.innerHTML = str;
$(target).prepend(this.g);
//////// Methods ////////
//initialize gallery
this.init = function(){
$(this.g).children('.group').click(function(){ c.close(); });
if(!this.isiPad && !this.isiPhone && !this.isIE){
//hover to hide/show navigation
$(this.g).children('.close').hover(function(){ $(this).stop().animate({ opacity: 1 },100); }, function(){ $(this).stop().animate({ opacity: 0.8 },100); });
$(this.g).children('.next').hover(function(){ $(this).stop().animate({ opacity: 1 },100); }, function(){ $(this).stop().animate({ opacity: 0.8 },100); });
$(this.g).children('.previous').hover(function(){ $(this).stop().animate({ opacity: 1 },100); }, function(){ $(this).stop().animate({ opacity: 0.8 },100); });
$(this.g).children('.restart').hover(function(){ $(this).stop().animate({ opacity: 1 },100); }, function(){ $(this).stop().animate({ opacity: 0.8 },100); });
}
//set buttons
var c = this;
if(this.nav){
$(this.g).children('.close').click(function(){ c.close(); });
$(this.g).children('.next').click(function(){ c.appendImage('next'); });
$(this.g).children('.previous').click(function(){ c.appendImage('prev'); });
$(this.g).children('.restart').click(function(){ c.appendImage('restart'); });
$(this.g).children('.group').children('.container').children('img').click(function(){ c.appendImage('next'); });
//switch types
$('#switchImage').click(function(){
c.type = 0;
$(this).css({ color: '#333333' });
$('#switchHover').css({ color: '#7f7f7f' });
c.appendedImages = c.images;
c.appendImage('start',c.index,true);
});
}
//update the size
this.checkGalleryButtons();
//update easy closure
$('.gallery').click(function(e){
$target = $(e.target);
if($target.get(0).tagName == 'IMG')
{
if(c.index != c.numImages-1)
{
c.appendImage('next');
}
else
{
c.appendImage('restart');
}
}
else if( ! $target.hasClass('button'))
{
c.close();
}
})
};
//browser & window information
this.getWindowSize = function() {
var myWidth = 0, myHeight = 0;
var size = new Array();
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
size[0] = myWidth;
size[1] = myHeight;
return size;
}
var c = this;
$(window).resize(function() {
//on resize
c.updateGallerySize();
//done resizing
//clearTimeout(this.id);
//this.id = setTimeout(doneResizing, 500);
});
//add images to array
this.addImage = function(src, width, height, alt){
this.images[this.numImages] = new Array();
this.images[this.numImages]['src'] = src;
this.images[this.numImages]['width'] = width;
this.images[this.numImages]['height'] = height;
this.images[this.numImages]['alt'] = alt;
this.numImages++;
}
//display the gallery
this.display = function(key){
// display gallery
$(this.g).css({ display: 'block'});
if(this.isiPhone) $('body').css({ overflow: 'hidden'});
// fade in
$(this.g).animate({ opacity : 1 },300);
if(this.isiPad || this.isiPhone || this.isIE){
if(this.nav){
$(this.g).children('.close').stop().animate({ opacity: 1 },100);
$(this.g).children('.next').stop().animate({ opacity: 1 },100);
$(this.g).children('.previous').stop().animate({ opacity: 1 },100);
$(this.g).children('.restart').stop().animate({ opacity: 1 },100);
}
$(this.g).children('.loader').stop().animate({ opacity: 1, bottom: '80px' },100);
}
//show the current image
this.paused = false;
if(key != null && key != 0){
this.index = key;
this.appendImage('start',key);
}
else{ this.appendImage('restart'); }
this.updateGallerySize();
}
//close the gallery
this.close = function(){
// fade out
var c = this;
$(c.g).animate({ opacity : 0 },300, function(){
// hide gallery
$(c.g).css({ display: 'none'});
if(this.isiPhone) $('body').css({ overflow: 'auto'});
// hide old content
var oldGroup = c.groups[c.numGroups-1];
if($(oldGroup)){
if(c.supportTrans){
$(oldGroup).css({ opacity : 0 });
setTimeout(function(){ $(oldGroup).remove(); },c.fadeTime);
}
else{
$(oldGroup).stop().animate({ opacity : 0 }, c.fadeTime, function() { $(this).remove(); });
}
}
this.groups = new Array();
this.numGroups = 0;
$(c.g).remove();
});
}
this.pause = function(){
this.paused = true;
clearTimeout(this.loopInt);
}
//append image to gallery
this.appendImage = function(method,key,switched){
if(!this.blocked){
// check if we append next or first image
var appendKey = this.index;
if(method == 'next') appendKey = Number(this.index)+1;
if(method == 'prev') appendKey = Number(this.index)-1;
if(method == 'restart') appendKey = 0;
if(method == 'start') appendKey = this.index = key;
//calculate margins
var marginLeft = Math.ceil(this.appendedImages[appendKey]['width'] / -2)
var marginTop = Math.ceil(this.appendedImages[appendKey]['height'] / -2)
this.wsize = this.getWindowSize();
if(this.wsize[0] < this.minWidth) this.wsize[0] = this.minWidth;
if(this.wsize[1] < this.minHeight) this.wsize[1] = this.minHeight;
// resize image
//get browser ratio
var bRatio = this.wsize[0] / this.wsize[1];
var imgRatio = this.appendedImages[appendKey]['width'] / this.appendedImages[appendKey]['height'];
if(imgRatio <= bRatio){
// more in direction of portait then browser
if(imgRatio < 1){
// portrait
var height = this.wsize[1]* 0.7;
//if(height < minHeight) height = minHeight;
var width = height * imgRatio;
}
else{
// landscape
var width = this.wsize[0] * 0.7;
var height = this.wsize[0] / imgRatio;
//check if not to high
if(height > this.wsize[1] * 0.6){
var height = this.wsize[1]* 0.7;
var width = height * imgRatio;
}
}
}
else{
// landscape
var height = this.wsize[1]* 0.7;
var width = height * imgRatio;
}
//image must not resize
if(height > this.appendedImages[appendKey]['height']){
var height = this.appendedImages[appendKey]['height'];
var width = height * imgRatio;
}
//margin
var marginTop = Math.ceil(height/-2);
var marginLeft = Math.ceil(width/-2);
//create msg to append
var content = '';
content += '<div class="container" style="width: ' + this.wsize[0] + 'px; height: ' + this.wsize[1] + 'px" >';
content += '<img src="' + this.appendedImages[appendKey]['src'] + '" alt="' + this.appendedImages[appendKey]['alt'] + '" style="width: ' + width + 'px; height: ' + height + 'px; margin-left: ' + marginLeft + 'px; margin-top: ' + marginTop + 'px" />';
content += '</div>';
var newGroup = this.groups[this.numGroups] = document.createElement("div");
newGroup.className = "group";
newGroup.innerHTML = content;
//append en show content
$(this.g).append(newGroup);
//first Load image
if(!this.isLooped){ $(this.g).children('.loader').css({ display : 'block' }); }
// block image switching
this.blocked = true;
var c = this;
$(newGroup).children().children('img').load(function(){
c.blocked = false;
$(c.g).children('.loader').css({ display : 'none' });
//when finished loading , display;
if(c.supportTrans){ $(newGroup).css({ opacity : 1 });} else{ $(newGroup).stop().animate({ opacity : 1 }, c.fadeTime); }
if(appendKey != c.index || switched ){
// hide old content
var temp = c.numGroups - 1;
var oldGroup = c.groups[temp];
if($(oldGroup)){
if(c.supportTrans){
$(oldGroup).css({ opacity : 0 });
setTimeout(function(){ $(oldGroup).remove(); },c.fadeTime);
}
else{
$(oldGroup).stop().animate({ opacity : 0 }, c.fadeTime, function() { $(this).remove(); });
}
}
}
c.numGroups++;
//what to do with current image
if(method == 'next') c.index++;
if(method == 'prev') c.index--;
if(method == 'restart') c.index = 0;
c.checkGalleryButtons();
if(c.isLooped != false){
method='next';
if(c.index == c.numappendedImages-1){
method='restart';
}
if(!c.paused && c.appendedImages.length > 1) c.loopInt = setTimeout(function(){ c.appendImage(method); },4000);
}
});
}
}
//check gallery buttons
this.checkGalleryButtons = function(){
var next = $(this.g).children('.next');
var prev = $(this.g).children('.previous')
var restart = $(this.g).children('.restart')
if(this.numImages > 1){
//check next button
if(this.index < this.numImages-1){
$(next).css({ display: 'block' });
$(next).stop().animate({ opacity: 1 },100);
}
else{
if(!$(next).css({ display: 'none' })) $(next).stop().animate({ opacity: 0 },100,function(){ $(next).css({ display: 'none' }); });
}
//check previous button
if(this.index > 0){
$(prev).css({ display: 'block' });
$(prev).stop().animate({ opacity: 1 },100);
}
else{
if(!$(prev).css({ display: 'none' })) $(prev).stop().animate({ opacity: 0 },100,function(){ $(prev).css({ display: 'none' }); });
}
//check restart button
if(this.index == this.numImages-1){
$(restart).css({ display: 'block' });
$(restart).stop().animate({ opacity: 1 },100);
}
else{
if(!$(restart).css({ display: 'none' })) $(restart).stop().animate({ opacity: 0 },100,function(){ $(restart).css({ display: 'none' }); });
}
}
else{
//hide all navigation
if(!$(next).css({ display: 'none' })) $(next).stop().animate({ opacity: 0 },100,function(){ $(next).css({ display: 'none' }); });
if(!$(prev).css({ display: 'none' })) $(prev).stop().animate({ opacity: 0 },100,function(){ $(prev).css({ display: 'none' }); });
if(!$(restart).css({ display: 'none' })) $(restart).stop().animate({ opacity: 0 },100,function(){ $(restart).css({ display: 'none' }); });
}
}
//check gallery size
this.updateGallerySize = function(){
this.wsize = this.getWindowSize();
if(this.wsize[0] < this.minWidth) this.wsize[0] = this.minWidth;
if(this.wsize[1] < this.minHeight) this.wsize[1] = this.minHeight;
var c = this;
//update container
$(this.g).children('.group').children('.container').each(function(){
$(this).width(c.wsize[0]);
$(this).height(c.wsize[1]);
});
//get browser ratio
var bRatio = this.wsize[0] / this.wsize[1];
//update images
$(this.g).children('.group').children('.container').children('img').each(function(){
var imgRatio = $(this).width() / $(this).height();
if(imgRatio <= bRatio){
// more in direction of portait then browser
if(imgRatio < 1){
// portrait
var height = c.wsize[1]* 0.7;
//if(height < minHeight) height = minHeight;
var width = height * imgRatio;
}
else{
// landscape
var width = c.wsize[0] * 0.7;
var height = c.wsize[0] / imgRatio;
//check if not to high
if(height > c.wsize[1] * 0.6){
var height = c.wsize[1]* 0.7;
var width = height * imgRatio;
}
}
}
else{
// landscape
var height = c.wsize[1]* 0.7;
var width = height * imgRatio;
}
//image must not resize
if(height > c.images[c.index]['height']){
var height = c.images[c.index]['height'];
var width = height * imgRatio;
}
//margin
var marginTop = Math.ceil(height/-2);
var marginLeft = Math.ceil(width/-2);
$(this).css({height: height+'px', width: width+'px', marginTop : marginTop+'px', marginLeft : marginLeft+'px' });
});
}
//support transitions
this.updateSupportTransitions = function(bool){
this.supportTrans = bool;
}
this.loop = function(time){
this.isLooped= time;
var c = this;
$(c.g).children('.loader').css({ display : 'none' });
}
}