i am using imageFlow for making an image slider. i have added on click Flip functionality to images. my problem is i want to add a div around images to show description but when i add the div around images it becomes invisible. i don't know how to update js file .
Please suggest,
/* ImageFlow constructor */
function ImageFlow () {
/* Setting option defaults */
this.defaults =
{
animationSpeed: 100, /* Animation speed in ms */
aspectRatio: 1.964, /* Aspect ratio of the ImageFlow container (width divided by height) */
buttons: false, /* Toggle navigation buttons */
captions: false, /* Toggle captions */
circular: true, /* Toggle circular rotation */
imageCursor: 'default', /* Cursor type for all images - default is 'default' */
ImageFlowID: 'imageflow', /* Default id of the ImageFlow container */
imageFocusM: 1.0, /* Multiplicator for the focussed image size in percent */
imageFocusMax: 3, /* Max number of images on each side of the focussed one */
imagePath: '', /* Path to the images relative to the reflect_.php script */
imageScaling: true, /* Toggle image scaling */
imagesHeight: 0.67, /* Height of the images div container in percent */
imagesM: 1.0, /* Multiplicator for all images in percent */
onClick: function() { /*document.location = this.url;*/ flipIt(this) }, /* Onclick behaviour */
opacity: true, /* Toggle image opacity */
opacityArray: [10,8,6,4], /* Image opacity (range: 0 to 10) first value is for the focussed image */
percentLandscape: 118, /* Scale landscape format */
percentOther: 100, /* Scale portrait and square format */
preloadImages: false, /* Toggles loading bar (false: requires img attributes height and width) */
reflections: false, /* Toggle reflections */
reflectionGET: '', /* Pass variables via the GET method to the reflect_.php script */
reflectionP: 0.5, /* Height of the reflection in percent of the source image */
reflectionPNG: false, /* Toggle reflect2.php or reflect3.php */
reflectPath: '', /* Path to the reflect_.php script */
scrollbarP: 0.6, /* Width of the scrollbar in percent */
slider: false, /* Toggle slider */
sliderCursor: 'e-resize', /* Slider cursor type - default is 'default' */
sliderWidth: 17, /* Width of the slider in px */
slideshow: false, /* Toggle slideshow */
slideshowSpeed: 1500, /* Time between slides in ms */
slideshowAutoplay: false, /* Toggle automatic slideshow play on startup */
startID: 1, /* Image ID to begin with */
glideToStartID: true, /* Toggle glide animation to start ID */
startAnimation: false, /* Animate images moving in from the right on startup */
xStep: 180 /* Step width on the x-axis in px */
};
/* Closure for this */
var my = this;
//console.log(my)
/* Initiate ImageFlow */
this.init = function (options)
{
/* Evaluate options */
for(var name in my.defaults)
{
this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : my.defaults[name];
}
/* Try to get ImageFlow div element */
var ImageFlowDiv = document.getElementById(my.ImageFlowID);
if(ImageFlowDiv)
{
/* Set it global within the ImageFlow scope */
ImageFlowDiv.style.visibility = 'visible';
this.ImageFlowDiv = ImageFlowDiv;
/* Try to create XHTML structure */
if(this.createStructure())
{
this.imagesDiv = document.getElementById(my.ImageFlowID+'_images');
this.captionDiv = document.getElementById(my.ImageFlowID+'_caption');
this.navigationDiv = document.getElementById(my.ImageFlowID+'_navigation');
this.scrollbarDiv = document.getElementById(my.ImageFlowID+'_scrollbar');
this.sliderDiv = document.getElementById(my.ImageFlowID+'_slider');
this.buttonNextDiv = document.getElementById(my.ImageFlowID+'_next');
this.buttonPreviousDiv = document.getElementById(my.ImageFlowID+'_previous');
this.buttonSlideshow = document.getElementById(my.ImageFlowID+'_slideshow');
this.indexArray = [];
this.current = 0;
this.imageID = 0;
this.target = 0;
this.memTarget = 0;
this.firstRefresh = true;
this.firstCheck = true;
this.busy = false;
/* Set height of the ImageFlow container and center the loading bar */
var width = this.ImageFlowDiv.offsetWidth;
var height = Math.round(width / my.aspectRatio);
document.getElementById(my.ImageFlowID+'_loading_txt').style.paddingTop = ((height * 0.5) -22) + 'px';
ImageFlowDiv.style.height = height + 'px';
/* Init loading progress */
this.loadingProgress();
}
}
};
/* Create HTML Structure */
this.createStructure = function()
{
/* Create images div container */
var imagesDiv = my.Helper.createDocumentElement('div','images');
/* Shift all images into the images div */
var node, version, src, imageNode;
var max = my.ImageFlowDiv.childNodes.length;
for(var index = 0; index < max; index++)
{
node = my.ImageFlowDiv.childNodes[index];
if (node && node.nodeType == 1 && node.nodeName == 'IMG')
{
/* Add 'reflect.php?img=' */
if(my.reflections === true)
{
version = (my.reflectionPNG) ? '3' : '2';
src = my.imagePath+node.getAttribute('src',2);
src = my.reflectPath+'reflect'+version+'.php?img='+src+my.reflectionGET;
node.setAttribute('src',src);
}
/* Clone image nodes and append them to the images div */
imageNode = node.cloneNode(true);
imagesDiv.appendChild(imageNode);
}
}
/* Clone some more images to make a circular animation possible */
if(my.circular)
{
/* Create temporary elements to hold the cloned images */
var first = my.Helper.createDocumentElement('div','images');
var last = my.Helper.createDocumentElement('div','images');
/* Make sure, that there are enough images to use circular mode */
max = imagesDiv.childNodes.length;
if(max < my.imageFocusMax)
{
my.imageFocusMax = max;
}
/* Do not clone anything if there is only one image */
if(max > 1)
{
/* Clone the first and last images */
var i;
for(i = 0; i < max; i++)
{
/* Number of clones on each side equals the imageFocusMax */
node = imagesDiv.childNodes[i];
if(i < my.imageFocusMax)
{
imageNode = node.cloneNode(true);
first.appendChild(imageNode);
}
if(max-i < my.imageFocusMax+1)
{
imageNode = node.cloneNode(true);
last.appendChild(imageNode);
}
}
/* Sort the image nodes in the following order: last | originals | first */
for(i = 0; i < max; i++)
{
node = imagesDiv.childNodes[i];
imageNode = node.cloneNode(true);
last.appendChild(imageNode);
}
for(i = 0; i < my.imageFocusMax; i++)
{
node = first.childNodes[i];
imageNode = node.cloneNode(true);
last.appendChild(imageNode);
}
/* Overwrite the imagesDiv with the new order */
imagesDiv = last;
}
}
/* Create slideshow button div and append it to the images div */
if(my.slideshow)
{
var slideshowButton = my.Helper.createDocumentElement('div','slideshow');
imagesDiv.appendChild(slideshowButton);
}
/* Create loading text container */
var loadingP = my.Helper.createDocumentElement('p','loading_txt');
var loadingText = document.createTextNode(' ');
loadingP.appendChild(loadingText);
/* Create loading div container */
var loadingDiv = my.Helper.createDocumentElement('div','loading');
/* Create loading bar div container inside the loading div */
var loadingBarDiv = my.Helper.createDocumentElement('div','loading_bar');
loadingDiv.appendChild(loadingBarDiv);
/* Create captions div container */
var captionDiv = my.Helper.createDocumentElement('div','caption');
/* Create slider and button div container inside the scrollbar div */
var scrollbarDiv = my.Helper.createDocumentElement('div','scrollbar');
var sliderDiv = my.Helper.createDocumentElement('div','slider');
scrollbarDiv.appendChild(sliderDiv);
if(my.buttons)
{
var buttonPreviousDiv = my.Helper.createDocumentElement('div','previous', 'button');
var buttonNextDiv = my.Helper.createDocumentElement('div','next', 'button');
scrollbarDiv.appendChild(buttonPreviousDiv);
scrollbarDiv.appendChild(buttonNextDiv);
}
/* Create navigation div container beneath images div */
var navigationDiv = my.Helper.createDocumentElement('div','navigation');
navigationDiv.appendChild(captionDiv);
navigationDiv.appendChild(scrollbarDiv);
/* Update document structure and return true on success */
var success = false;
if (my.ImageFlowDiv.appendChild(imagesDiv) &&
my.ImageFlowDiv.appendChild(loadingP) &&
my.ImageFlowDiv.appendChild(loadingDiv) &&
my.ImageFlowDiv.appendChild(navigationDiv))
{
/* Remove image nodes outside the images div */
max = my.ImageFlowDiv.childNodes.length;
for(index = 0; index < max; index++)
{
node = my.ImageFlowDiv.childNodes[index];
if (node && node.nodeType == 1 && node.nodeName == 'IMG')
{
my.ImageFlowDiv.removeChild(node);
}
}
success = true;
}
return success;
};
/* Manage loading progress and call the refresh function */
this.loadingProgress = function()
{
var p = my.loadingStatus();
if((p < 100 || my.firstCheck) && my.preloadImages)
{
/* Insert a short delay if the browser loads rapidly from its cache */
if(my.firstCheck && p == 100)
{
my.firstCheck = false;
window.setTimeout(my.loadingProgress, 100);
}
else
{
window.setTimeout(my.loadingProgress, 40);
}
}
else
{
/* Hide loading elements */
document.getElementById(my.ImageFlowID+'_loading_txt').style.display = 'none';
document.getElementById(my.ImageFlowID+'_loading').style.display = 'none';
/* Refresh ImageFlow on window resize - delay adding this event for the IE */
window.setTimeout(my.Helper.addResizeEvent, 1000);
/* Call refresh once on startup to display images */
my.refresh();
/* Only initialize navigation elements if there is more than one image */
if(my.max > 1)
{
/* Initialize mouse, touch and key support */
//my.MouseWheel.init();
//my.MouseDrag.init();
my.Touch.init();
my.Key.init();
/* Toggle slideshow */
if(my.slideshow)
{
my.Slideshow.init();
}
/* Toggle scrollbar visibility */
if(my.slider)
{
my.scrollbarDiv.style.visibility = 'visible';
}
}
}
};
/* Return loaded images in percent, set loading bar width and loading text */
this.loadingStatus = function()
{
var max = my.imagesDiv.childNodes.length;
var i = 0, completed = 0;
var image = null;
for(var index = 0; index < max; index++)
{
image = my.imagesDiv.childNodes[index];
if(image && image.nodeType == 1 && image.nodeName == 'IMG')
{
if(image.complete)
{
completed++;
}
i++;
}
}
var finished = Math.round((completed/i)*100);
var loadingBar = document.getElementById(my.ImageFlowID+'_loading_bar');
loadingBar.style.width = finished+'%';
/* Do not count the cloned images */
if(my.circular)
{
i = i - (my.imageFocusMax*2);
completed = (finished < 1) ? 0 : Math.round((i/100)*finished);
}
var loadingP = document.getElementById(my.ImageFlowID+'_loading_txt');
var loadingTxt = document.createTextNode('loading images '+completed+'/'+i);
loadingP.replaceChild(loadingTxt,loadingP.firstChild);
return finished;
};
/* Cache EVERYTHING that only changes on refresh or resize of the window */
this.refresh = function()
{
/* Cache global variables */
this.imagesDivWidth = my.imagesDiv.offsetWidth+my.imagesDiv.offsetLeft;
this.maxHeight = Math.round(my.imagesDivWidth / my.aspectRatio);
this.maxFocus = my.imageFocusMax * my.xStep;
this.size = my.imagesDivWidth * 0.5;
this.sliderWidth = my.sliderWidth * 0.5;
this.scrollbarWidth = (my.imagesDivWidth - ( Math.round(my.sliderWidth) * 2)) * my.scrollbarP;
this.imagesDivHeight = Math.round(my.maxHeight * my.imagesHeight);
/* Change imageflow div properties */
my.ImageFlowDiv.style.height = my.maxHeight + 'px';
/* Change images div properties */
my.imagesDiv.style.height = my.imagesDivHeight + 'px';
/* Change images div properties */
my.navigationDiv.style.height = (my.maxHeight - my.imagesDivHeight) + 'px';
/* Change captions div properties */
my.captionDiv.style.width = my.imagesDivWidth + 'px';
my.captionDiv.style.paddingTop = Math.round(my.imagesDivWidth * 0.02) + 'px';
/* Change scrollbar div properties */
my.scrollbarDiv.style.width = my.scrollbarWidth + 'px';
my.scrollbarDiv.style.marginTop = Math.round(my.imagesDivWidth * 0.02) + 'px';
my.scrollbarDiv.style.marginLeft = Math.round(my.sliderWidth + ((my.imagesDivWidth - my.scrollbarWidth)/2)) + 'px';
/* Set slider attributes */
my.sliderDiv.style.cursor = my.sliderCursor;
my.sliderDiv.onmousedown = function () { my.MouseDrag.start(this); return false;};
if(my.buttons)
{
my.buttonPreviousDiv.onclick = function () { my.MouseWheel.handle(1); };
my.buttonNextDiv.onclick = function () { my.MouseWheel.handle(-1); };
}
/* Set the reflection multiplicator */
var multi = (my.reflections === true) ? my.reflectionP + 1 : 1;
/* Set image attributes */
var max = my.imagesDiv.childNodes.length;
var i = 0;
var image = null;
for (var index = 0; index < max; index++)
{
image = my.imagesDiv.childNodes[index];
if(image !== null && image.nodeType == 1 && image.nodeName == 'IMG')
{
this.indexArray[i] = index;
/* Set image attributes to store values */
image.url = image.getAttribute('longdesc');
image.xPosition = (-i * my.xStep);
image.i = i;
/* Add width and height as attributes only once */
if(my.firstRefresh)
{
if(image.getAttribute('width') !== null && image.getAttribute('height') !== null)
{
image.w = image.getAttribute('width');
image.h = image.getAttribute('height') * multi;
}
else{
image.w = image.width;
image.h = image.height;
}
}
/* Check source image format. Get image height minus reflection height! */
if((image.w) > (image.h / (my.reflectionP + 1)))
{
/* Landscape format */
image.pc = my.percentLandscape;
image.pcMem = my.percentLandscape;
}
else
{
/* Portrait and square format */
image.pc = my.percentOther;
image.pcMem = my.percentOther;
}
/* Change image positioning */
if(my.imageScaling === false)
{
image.style.position = 'relative';
image.style.display = 'inline';
}
/* Set image cursor type */
image.style.cursor = my.imageCursor;
i++;
}
}
this.max = my.indexArray.length;
/* Override dynamic sizes based on the first image */
if(my.imageScaling === false)
{
image = my.imagesDiv.childNodes[my.indexArray[0]];
/* Set left padding for the first image */
this.totalImagesWidth = image.w * my.max;
image.style.paddingLeft = (my.imagesDivWidth/2) + (image.w/2) + 'px';
/* Override images and navigation div height */
my.imagesDiv.style.height = image.h + 'px';
my.navigationDiv.style.height = (my.maxHeight - image.h) + 'px';
}
/* Handle startID on the first refresh */
if(my.firstRefresh)
{
/* Reset variable */
my.firstRefresh = false;
/* Set imageID to the startID */
my.imageID = my.startID-1;
if (my.imageID < 0 )
{
my.imageID = 0;
}
/* Map image id range in cicular mode (ignore the cloned images) */
if(my.circular)
{
my.imageID = my.imageID + my.imageFocusMax;
}
/* Make sure, that the id is smaller than the image count */
maxId = (my.circular) ? (my.max-(my.imageFocusMax))-1 : my.max-1;
if (my.imageID > maxId)
{
my.imageID = maxId;
}
/* Toggle glide animation to start ID */
if(my.glideToStartID === false)
{
my.moveTo(-my.imageID * my.xStep);
}
/* Animate images moving in from the right */
if(my.startAnimation)
{
my.moveTo(5000);
}
}
/* Only animate if there is more than one image */
if(my.max > 1)
{
my.glideTo(my.imageID);
}
/* Display images in current order */
my.moveTo(my.current);
};
/* Main animation function */
this.moveTo = function(x)
{
//alert(x)
this.current = x;
this.zIndex = my.max;
/* Main loop */
for (var index = 0; index < my.max; index++)
{
var image = my.imagesDiv.childNodes[my.indexArray[index]];
var currentImage = index * -my.xStep;
/* Enabled image scaling */
if(my.imageScaling)
{
/* Don't display images that are not conf_focussed */
if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
{
image.style.visibility = 'hidden';
image.style.display = 'none';
}
else
{
var z = (Math.sqrt(10000 + x * x) + 100) * my.imagesM;
//var z = (Math.sqrt(10000) + 500) * my.imagesM;
var xs = x / z * my.size + my.size;
/* Still hide images until they are processed, but set display style to block */
image.style.display = 'block';
/* Process new image height and width */
var newImageH = (image.h / image.w * image.pc) / z * my.size;
var newImageW = 0;
switch (newImageH > my.maxHeight)
{
case false:
newImageW = image.pc / z * my.size;
break;
default:
newImageH = my.maxHeight;
newImageW = image.w * newImageH / image.h;
break;
}
var newImageTop = (my.imagesDivHeight - newImageH) + ((newImageH / (my.reflectionP + 1)) * my.reflectionP);
/* Set new image properties */
image.style.left = xs - (image.pc / 2) / z * my.size + 'px';
if(newImageW && newImageH)
{
image.style.height = newImageH + 'px';
image.style.width = newImageW + 'px';
image.style.top = newImageTop + 'px';
/*
newImageTop="100.239";
newImageH="250";
newImageW="210";
image.style.height = newImageH + 'px';
image.style.width = newImageW + 'px';
image.style.top = newImageTop + 'px'; */
}
image.style.visibility = 'visible';
//console.log("LEFT == " +image.style.left);
//console.log("TOP ==" + newImageTop)
/* Set image layer through zIndex */
switch ( x < 0 )
{
case true:
this.zIndex++;
break;
default:
this.zIndex = my.zIndex - 1;
break;
}
/* Change zIndex and onclick function of the focussed image */
switch ( image.i == my.imageID )
{
case false:
image.onclick = function() { my.glideTo(this.i);};
break;
default:
this.zIndex = my.zIndex + 1;
if(image.url !== '')
{
image.onclick = my.onClick;
}
break;
}
image.style.zIndex = my.zIndex;
}
}
/* Disabled image scaling */
else
{
if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
{
image.style.visibility = 'hidden';
}
else
{
image.style.visibility = 'visible';
/* Change onclick function of the focussed image */
switch ( image.i == my.imageID )
{
case false:
image.onclick = function() { my.glideTo(this.i);};
break;
default:
if(image.url !== '')
{
image.onclick = my.onClick;
}
break;
}
}
my.imagesDiv.style.marginLeft = (x - my.totalImagesWidth) + 'px';
}
x += my.xStep;
}
};
