Hi, I have developed a image gallery page with the help of jquery plugins. Although i am not a developer but i still manage to do this work . Gallery is alive know Under Constructions for Makkah !. Know i want to do two thing.
-
I want to show some text on mouse over on a image thumbnail , i try so many scripts from the web, they work fine if you run them individually but when i embed that code, it doesn’t work.
-
secondly if you are on image NO.3 and when some one click on arabic link it will take you to arabic website and start show image one text, which is wrong. I want to show selected image text “means image no.3 text” that was selected in English version.
Any one can plz help me.
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',
'opacity': 0,
'filter': 'alpha(opacity=0)'
});
var el = this.dom.enlargedImages[id].caption = new Element('div');
el.addClass('dg-image-gallery-caption');
el.setStyles({
'opacity': 0,
'filter': 'alpha(opacity=0)'
});
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;
}
});