Hi,
I have develop a jquery image gallery with text description , image and other thing and its live know. you can check the live gallery Executed for Makkah !
But i am facing some problem in JavaScript coding as i am not a expert init.
If you click on any image you can see that new information appear with some effect like fade in or fade out.
Which gives very bad impression to my client. I want to remove that effect and want to appear the text immediately without any effect.
I am placing the code below and also highlighted the area which control that effect and try myself to edit that one can’t able to get the results that i want.
Any one plz help me to solve this problem.
if(!window.DG) {
window.DG = {};
}
DG.ImageGallery = new Class({
Extends: Events,
autoplay : {
buttons : {
start : {
txt : '',
enabled : true
},
stop : {
txt : '',
enabled : true
}
},
enabled : true,
pause : 3,
timestampLastIteration : 0
},
preload : true,
thumbs : {
width : 0, /* Measured automatically */
height : 0,
noThumbsInView : 0
},
images : [],
dom : {
el : null,
thumbnailContainerParent : null,
thumbnailContainer : null,
enlargedImage : null,
enlargedImages : {},
activeEnlargedImage : {
id : null,
image : null,
caption : null
},
autoplay : {
start : null,
stop : null
}
},
currentZIndex : 0,
initialize : function(config) {
if(config.preload !== undefined){
this.preload = config.preload;
}
if(config.autoplay !== undefined) {
if (config.autoplay.enabled !== undefined) {
this.autoplay.enabled = config.autoplay.enabled;
}
if(config.autoplay.pause){
this.autoplay.pause = config.autoplay.pause;
}
if(config.autoplay.buttons) {
if(config.autoplay.buttons.start){
if(config.autoplay.buttons.start.txt){
this.autoplay.buttons.start.txt = config.autoplay.buttons.start.txt;
}
if(config.autoplay.buttons.start.enabled !== undefined){
this.autoplay.buttons.start.enabled = config.autoplay.buttons.start.enabled;
}
if(config.autoplay.buttons.stop.txt){
this.autoplay.buttons.stop.txt = config.autoplay.buttons.stop.txt;
}
if(config.autoplay.buttons.stop.enabled !== undefined){
this.autoplay.buttons.stop.enabled = config.autoplay.buttons.stop.enabled;
}
}
}
}
this.dom.el = config.el;
this.getImages();
if(this.preload){
this.preloadImages();
}
this.storeThumbnailSize();
this.createDomElements();
this.storeNumberOfThumbnailsInView();
this.selectImage(this.images[0].id);
if (this.autoplay.enabled) {
this.updateAutoplayTimestamp();
this.startAutoPlay();
}
this.doAutoPlay.delay(200, this);
},
preloadImages : function() {
var countImages = this.images.length;
var images = [];
var i=0;
for(i=0;i<countImages;i++){
images.push(this.images[i].src);
}
Asset.images(images);
},
startAutoPlay : function() {
this.autoplay.enabled = true;
if(this.dom.autoplay.start){
this.dom.autoplay.start.addClass('dg-image-gallery-next-autoplay-start-off');
}
if(this.dom.autoplay.stop){
this.dom.autoplay.stop.removeClass('dg-image-gallery-next-autoplay-stop-off');
}
},
stopAutoPlay : function() {
this.autoplay.enabled = false;
if(this.dom.autoplay.start){
this.dom.autoplay.start.removeClass('dg-image-gallery-next-autoplay-start-off');
}
if(this.dom.autoplay.stop){
this.dom.autoplay.stop.addClass('dg-image-gallery-next-autoplay-stop-off');
}
},
doAutoPlay : function() {
var d = new Date();
if(this.autoplay.enabled && this.isReadyToContinueAutoplay()){
var index = this.getCurrentIndex();
index++;
if(index === this.images.length){
index = 0;
}
this.selectImage(this.images[index].id);
}
this.doAutoPlay.delay(200, this);
},
isReadyToContinueAutoplay : function() {
var d = new Date();
var timestamp = d.getTime();
if(timestamp - this.autoplay.timestampLastIteration >= this.autoplay.pause * 1000){
this.updateAutoplayTimestamp();
return true;
}
return false;
},
updateAutoplayTimestamp : function() {
var d = new Date();
var timestamp = d.getTime();
this.autoplay.timestampLastIteration = timestamp;
},
storeThumbnailSize : function() {
var el = new Element('div');
el.setStyles({
'position' : 'absolute',
'visibility' : 'hidden'
});
$(document.body).adopt(el);
el.addClass('dg-image-gallery-thumbnail');
var widthProperties = ['width','margin-left','margin-right','padding-left','padding-right','border-left-width','border-right-width'];
for(i=0;i<widthProperties.length;i++){
this.thumbs.width += el.getStyle(widthProperties[i]).replace('px','') / 1;
}
var heightProperties = ['height','margin-top','margin-bottom','padding-top','padding-bottom','border-top-width','border-bottom-width'];
for(i=0;i<heightProperties.length;i++){
this.thumbs.height+= el.getStyle(heightProperties[i]).replace('px','')/1;
}
el.destroy();
},
storeNumberOfThumbnailsInView : function() {
this.thumbs.noThumbsInView = Math.round(this.dom.thumbnailContainerParent.getStyle('width').replace('px','') / this.thumbs.width);
},
createDomElements : function() {
this.createDomForThumbnails();
this.createDomForThumbnailHighlight();
this.createDomForArrows();
this.createDomForAutoplay();
},
createDomForAutoplay : function() {
if (this.autoplay.buttons.start.enabled || this.autoplay.buttons.stop.enabled) {
var autoPlayParent = new Element('div');
autoPlayParent.addClass('dg-image-gallery-next-autoplay-container');
$(this.dom.el).adopt(autoPlayParent);
}
if(this.autoplay.buttons.start.enabled){
var el = this.dom.autoplay.start = new Element('div');
el.addClass('dg-image-gallery-next-autoplay-start');
el.addEvent('click', this.startAutoPlay.bind(this));
el.set('html', this.autoplay.buttons.start.txt);
autoPlayParent.adopt(el);
}
if(this.autoplay.buttons.stop.enabled){
el = this.dom.autoplay.stop = new Element('div');
el.addClass('dg-image-gallery-next-autoplay-stop');
el.addEvent('click', this.stopAutoPlay.bind(this));
el.set('html', this.autoplay.buttons.stop.txt);
autoPlayParent.adopt(el);
}
},
createDomForThumbnails : function() {
var el = this.dom.thumbnailContainerParent = new Element('div');
el.addClass('dg-image-gallery-thumbnail-container');
el.setStyles({
height : this.thumbs.height,
overflow : 'hidden'
});
$(this.dom.el).adopt(el);
this.dom.thumbnailContainer = new Element('div');
this.dom.thumbnailContainer.setStyles({
height: this.thumbs.height,
position : 'absolute',
left:'0px',
top : '0px',
width : (this.images.length * this.thumbs.width)
});
el.adopt(this.dom.thumbnailContainer);
this.currentLeft = 0;
Array.each(this.images, function(image){
var div = new Element('div');
div.addClass('dg-image-gallery-thumbnail');
div.setProperty('id', image.id);
div.setStyles({
'background-repeat' : 'no-repeat',
'background-position' : 'center center',
'background-image' : 'url(' + image.thumb + ')',
'position' : 'absolute',
'left' : this.currentLeft,
'cursor' : 'pointer'
});
this.currentLeft += this.thumbs.width;
div.addEvent('click', this.clickOnThumbnail.bind(this));
this.dom.thumbnailContainer.adopt(div);
}, this);
},
createDomForThumbnailHighlight : function() {
var el = this.dom.thumbnailHighlight = new Element('div');
el.addClass('dg-image-gallery-thumbnail-highlight');
$(this.dom.thumbnailContainerParent).adopt(el);
el.setStyles({
width : this.thumbs.width
- el.getStyle('border-left-width').replace('px','')
- el.getStyle('border-right-width').replace('px','')
- el.getStyle('padding-left').replace('px','')
- el.getStyle('padding-right').replace('px','')
- el.getStyle('margin-left').replace('px','')
- el.getStyle('margin-right').replace('px','')
,
height : this.thumbs.height
- el.getStyle('border-top-width').replace('px','')
- el.getStyle('border-bottom-width').replace('px','')
- el.getStyle('padding-top').replace('px','')
- el.getStyle('padding-bottom').replace('px','')
- el.getStyle('margin-top').replace('px','')
- el.getStyle('margin-bottom').replace('px','')
,
left : '0px',
'z-index' : 100,
position : 'absolute'
});
},
createDomForArrows : function() {
var el = this.dom.arrowLeft = new Element('div');
el.addClass('dg-image-gallery-previous');
el.setStyles({
'background-repeat' : 'no-repeat'
});
el.addEvent('click', this.previous.bind(this));
el.addEvent('mouseover', this.arrowOn.bind(this));
el.addEvent('mouseout', this.arrowOff.bind(this));
$(this.dom.el).adopt(el);
var el = this.dom.arrowRight = new Element('div');
el.addClass('dg-image-gallery-next');
el.setStyles({
'background-repeat' : 'no-repeat'
});
el.addEvent('mouseover', this.arrowOn.bind(this));
el.addEvent('mouseout', this.arrowOff.bind(this));
el.addEvent('click', this.next.bind(this));
$(this.dom.el).adopt(el);
},
arrowOn : function(e) {
e.target.addClass(e.target.className.trim() + '-over');
},
arrowOff : function(e) {
e.target.removeClass('dg-image-gallery-previous-over');
e.target.removeClass('dg-image-gallery-next-over');
},
previous : function() {
this.updateAutoplayTimestamp();
var index = Math.max(0, this.getCurrentIndex()-1);
this.selectImage(this.getIdByIndex(index));
},
next : function() {
this.updateAutoplayTimestamp();
var index = Math.min(this.images.length-1, this.getCurrentIndex()+1);
this.selectImage(this.getIdByIndex(index));
},
getIdByIndex : function(index) {
return this.images[index].id;
},
clickOnThumbnail : function(e){
this.updateAutoplayTimestamp();
var id = e.target.id;
this.selectImage(id);
},
getCurrentIndex : function() {
return this.dom.activeEnlargedImage.index;
},
selectImage : function(id) {
if(id == this.dom.activeEnlargedImage.id){
return;
}
var imageData = this.getImageDataById(id);
if(!this.dom.enlargedImages[id]) {
this.dom.enlargedImages[id] = {};
var el = this.dom.enlargedImages[id].image = new Element('div');
el.addClass('dg-image-gallery-enlarged-image');
$(this.dom.el).adopt(el);
el.setStyles({
'background-image' : 'url(' + imageData.src + ')',
'background-repeat' : 'no-repeat',
[B]'opacity' : 0,
'filter' : 'alpha(opacity=0)[/B]'
});
var el = this.dom.enlargedImages[id].caption = new Element('div');
el.addClass('dg-image-gallery-caption');
el.setStyles({
[B]'opacity' : 0,
'filter' : 'alpha(opacity=0)'[/B]
});
el.set('html', imageData.caption);
$(this.dom.el).adopt(el);
}
if(this.dom.activeEnlargedImage.id) {
this.dom.activeEnlargedImage.image.fade('out');
this.dom.activeEnlargedImage.caption.fade('out');
}
this.currentZIndex ++;
this.dom.enlargedImages[id].image.setStyle('z-index', this.currentZIndex);
this.dom.enlargedImages[id].caption.setStyle('z-index', this.currentZIndex);
this.dom.enlargedImages[id].image.fade('in');
this.dom.enlargedImages[id].caption.fade('in');
this.dom.activeEnlargedImage = {
index : imageData.index,
id : id,
image : this.dom.enlargedImages[id].image,
caption : this.dom.enlargedImages[id].caption
}
this.highlightAndMoveThumbnailIntoView();
},
getIndexPositionOfHighlightDiv : function() {
var posHighlight = $(this.dom.thumbnailHighlight).getStyle('left').replace('px', '') / 1;
return Math.round(posHighlight / this.thumbs.width);
},
getIndexPositionOfActiveThumbnail : function() {
var pos = $(this.dom.activeEnlargedImage.id).getStyle('left').replace('px','') / 1 + this.dom.thumbnailContainer.getStyle('left').replace('px','') / 1;
return Math.round(pos / this.thumbs.width);
},
highlightAndMoveThumbnailIntoView : function() {
var indexHighlight = this.getIndexPositionOfHighlightDiv();
var indexThumb = this.getIndexPositionOfActiveThumbnail();
var newPosStrip = this.dom.thumbnailContainer.getStyle('left');
var newPosHighlight = indexThumb * this.thumbs.width;;
if (this.isLocatedAtFirstImageInSlideshow()){
newIndexHighlight = 0;
}else if(this.isLocatedAtLastImageInSlideshow()){
newIndexHighlight = Math.min(this.thumbs.noThumbsInView-1, this.images.length-1);
}
else if(this.isLocatedAtLastThumbnailInView()) {
newIndexHighlight = indexThumb-1;
}
else if(this.isLocatedAtFirstThumbnailInView()){
newIndexHighlight = 1;
}
else {
newIndexHighlight = indexThumb;
}
newPosHighlight = newIndexHighlight * this.thumbs.width;
newPosStrip = (0 - this.getCurrentIndex() + newIndexHighlight) * this.thumbs.width
var myFx = new Fx.Tween(this.dom.thumbnailHighlight);
myFx.start('left', this.dom.thumbnailHighlight.getStyle('left') , newPosHighlight);
var myFx = new Fx.Tween(this.dom.thumbnailContainer);
myFx.start('left',this.dom.thumbnailContainer.getStyle('left') , newPosStrip);
},
isLocatedAtFirstThumbnailInView : function() {
return this.getIndexPositionOfActiveThumbnail() == 0;
},
isLocatedAtLastThumbnailInView : function() {
return this.getIndexPositionOfActiveThumbnail() == this.thumbs.noThumbsInView-1;
},
isLocatedAtFirstImageInSlideshow : function() {
return this.getCurrentIndex() == 0;
},
isLocatedAtLastImageInSlideshow : function() {
return this.getCurrentIndex() == this.images.length-1;
},
getImageDataById : function(id) {
var countImages = this.images.length;
for(var i=0;i<countImages;i++){
if(this.images[i].id == id){
return this.images[i];
}
}
},
getImages : function() {
var imageObjects = $$('.dg-image-gallery-image');
var countImages = imageObjects.length;
for(var i=0;i<countImages;i++) {
var img = imageObjects[i];
var id = this.getUniqueId();
this.images.push({
index : i,
id : id,
thumb : img.getElements('img')[0].src,
caption: img.getElements('.dg-image-gallery-caption')[0].get('html').trim(),
capti: img.getElements('.dg-image-gallery-large-image-path')[0].get('html').trim()
});
img.setStyle('display','none');
}
},
getUniqueId : function() {
var ret = 'unique' + Math.random() + + Math.random();
ret = ret.replace('.','');
return ret;
}
});