Mootools or other .js

[Markstag]

So do you think you could figure out something that will solve my template problems?
There are more templates with the same problem.

[Jan]

No because I don't know templates, I only know what I should send to framework (modal css or javascript), but don't know where can be the problem, why some templates doesn't load some framework's parts... See if your template contain the css link to system.css, try to compare your template with standard template (e.g. rhuk_milkyway), maybe you find some difference. You should look at:

loading CSS - link to css
loading Javascript - link to scripts

...

Jan

[Markstag]

I found this on the net, i really like this imageviewer.

Code: Select all

function ImageViewer()
{

	if (this == window)
		return new ImageViewer();

	if (ImageViewer.instance)
		return ImageViewer.instance;

	this.images = {};
	this.thumbs = [];
	this.elements = {};
	this.currentSet = null;
	this.currentImage = -1;
	this.timer = null;
	this.imageViewerActive = false;
	this.initialWidth = 230;
	this.initialHeight = 230;
	this.minWidth = 460;
	this.minHeight = 180;
	this.page = {};

	this.defaultOptions = {
		slideshow: false,
		transitionspeed: 5,
		thumbview: true
	};
	this.options = {};

	this.init();

	return (ImageViewer.instance = this);
}

Object.extend(ImageViewer.prototype,
{
	init: function()
	{	
		this.elements.imageOverlay = document.createElement('div');
		this.elements.imageOverlay.id = 'imageOverlay';

		var viewer = HTMLBuilder().built(
			{
				n:'div',
				a:{id:'imageViewer'},
				c:[
					{
						n:'div',
						a:{id:'outerImageContainer'},
						c:[
							{
								n:'div',
								a:{id:'imageContainer'},
								c:[
									{
										n:'img',
										a:{id:'imageViewerImage'}
									},
									{
										n:'div',
										a:{id:'loadingContainer'},
										c:[
											{
												n:'img',
												a:{id:'loadingImage',src:ImgURL+'g/imageviewer/loading.gif'}
											}
										]
									}
								]
							},
							{
								n:'div',
								a:{id:'imageDataContainer'},
								c:[
									{
										n:'img',
										a:{id:'closeImage',src:ImgURL+'g/imageviewer/closelabel.gif'}
									},
									{
										n:'div',
										a:{id:'imageDetails'},
										c:[
											{
												n:'span',
												a:{id:'numberDisplay'}
											},
											{
												n:'span',
												a:{id:'imageCaption'}
											}
										]
									},
									{
										n:'div',
										a:{id:'thumbContainer'},
										c:[
											{
												n:'div',
												a:{id:'thumbPrev',title:'Vorige afbeelding',onclick:this.prevImage.bind(this)}
											},
											{
												n:'div',
												a:{id:'thumbNext',title:'Volgende afbeelding',onclick:this.nextImage.bind(this)}
											},
											{
												n:'div',
												a:{id:'thumbView'}
											}
										]
									}
								]
							}
						]
					}
				]
			}
		);

		Object.extend(this.elements, HTMLBuilder().getIdList());

		// default hiding of elements
		this.hide('imageOverlay','imageViewer','imageViewerImage','imageDataContainer');

		document.body.appendChild(this.elements.imageOverlay);
		document.body.appendChild(viewer);

		addEvent(this.elements.imageOverlay, 'click', this.stop.bind(this));
		addEvent(this.elements.imageViewer, 'click', this.stop.bind(this));
		addEvent(window, 'resize', this.setImageViewerPosition.bind(this));
		addEvent(window, 'unload', this.cleanUp.bind(this));
	},
	cleanUp: function()
	{
		this.images = null;
		this.thumbs = null;
		this.elements = null;
	},
	start: function(set, num, options, e)
	{
		if (!this.imageViewerActive)
		{
			this.imageViewerActive = true;
			this.currentSet = set;

			// hide all flash object
			this.toggleFlash('hidden');

			this.show('loadingContainer');
			this.setImageViewerSize(this.initialWidth, this.initialHeight);
			this.setImageViewerPosition();

			this.options = options || {};
			Object.extend(this.options, this.defaultOptions);
			if (!num) num = 0;

			if (set == 'single')
			{
				this.hide('numberDisplay','thumbContainer');
			}
			else
			{
				this.show('numberDisplay');
				if (this.options.thumbview && this.images[set].length > 1)
				{
					this.generateThumbView(set, num);
				}
				else
				{
					this.options.thumbview = false;
					this.hide('thumbContainer');
				}
			}

			this.changeImage(num);
		}

		if (e)
			e.preventDefault();
	},
	stop: function(e)
	{
		var target = e.target || e.srcElement;

		if (target.id && target.id in Set('imageOverlay', 'imageViewer', 'loadingContainer', 'loadingImage', 'closeImage'))
		{
			this.imageViewerActive = false;
			this.currentImage = -1;
			if (this.timer)
			{
				clearTimeout(this.timer);
				this.timer = null;
			}
			this.hide('imageOverlay','imageViewer','imageViewerImage','imageDataContainer');

			// show all flash object
			this.toggleFlash('');
		}

		if (e)
			e.stopPropagation();
	},
	show: function()
	{
		var i = arguments.length;
		while (i--)
			this.elements[arguments[i]].style.display = 'block';
	},
	hide: function()
	{
		var i = arguments.length;
		while (i--)
			this.elements[arguments[i]].style.display = 'none';
	},
	toggleFlash: function(visibility)
	{
		['object','embed'].forEach(
			function(tag)
			{
				Array.forEach(
					document.getElementsByTagName(tag),
					function(el)
					{
						el.style.visibility = visibility;
					}
				)
			}
		);
	},
	setImageViewerPosition: function()
	{
		if (this.imageViewerActive)
		{
			this.hide('imageOverlay','imageViewer');

			this.page = getPageDimensions();

			this.elements.imageOverlay.style.width = this.page.scrollWidth + 'px';
			this.elements.imageOverlay.style.height = this.page.scrollHeight + 'px';

			this.elements.imageViewer.style.left = this.page.offsetX + 'px';
			this.elements.imageViewer.style.top = Math.round(this.page.offsetY + (this.page.innerHeight / 10)) + 'px';

			this.show('imageOverlay','imageViewer');
		}
	},
	setImageViewerSize: function(width, height)
	{
		// allow for padding (10px on both sides)
		width += 20;
		height += 20;

		this.elements.outerImageContainer.style.width = width + 'px';
		this.elements.imageContainer.style.height = (height - 20) + 'px';
		this.elements.loadingContainer.style.width = width + 'px';
		this.elements.loadingContainer.style.height = height + 'px';
		this.elements.loadingImage.style.marginTop = (Math.round(height / 2) - 16) + 'px';
	},
	changeImage: function(num)
	{
		if (num != this.currentImage)
		{
			if (this.timer)
			{
				clearTimeout(this.timer);
				this.timer = null;
			}

			this.show('loadingContainer');

			var image = this.images[this.currentSet][num], preloadImage = new Image();
			preloadImage.onload = this.showImage.bind(this, preloadImage, num);
			preloadImage.src = image.src;
		}
	},
	showImage: function(preloadImage, num)
	{
		var originalWidth = preloadImage.width, originalHeight = preloadImage.height;
		preloadImage.onload = function(){};

		this.elements.imageViewerImage.src = preloadImage.src;
		this.elements.imageViewerImage.originalWidth = originalWidth;
		this.elements.imageViewerImage.originalHeight = originalHeight;

		this.setImageSize(originalWidth, originalHeight, 'smallSize');

		this.elements.imageCaption.innerHTML = this.images[this.currentSet][num]['caption'] || ' ';
		if (this.currentSet != 'single')
			this.elements.numberDisplay.innerHTML = '(' + (num + 1) + ' / ' + this.images[this.currentSet].length + ') ';

		this.hide('loadingContainer');
		this.show('imageViewerImage','imageDataContainer');

		if (this.options.thumbview)
		{
			if (this.currentImage > -1)
				this.thumbs[this.currentImage].className = '';

			this.elements.thumbView.scrollLeft = this.thumbs[num].offsetLeft - ((Math.max(this.elements.imageViewerImage.width, this.minWidth) - this.thumbs[num].width) / 2);

			this.thumbs[num].className = 'current';
		}

		this.currentImage = num;

		if (this.options.slideshow)
			this.timer = setTimeout(this.nextImage.bind(this), this.options.transitionspeed * 1000);
	},
	setImageSize: function(width, height, size)
	{
		var resized = size == 'fullSize';

		if (!resized)
		{
			var hRatio = this.page.innerWidth / width;
			var vRatio = this.page.innerHeight / height;
			vRatio *= this.options.thumbview ? 0.7 : 0.8;

			if (hRatio < 1 || vRatio < 1)
			{
				width = Math.floor(width * Math.min(hRatio, vRatio));
				height = Math.floor(height * Math.min(hRatio, vRatio));
				resized = true;
			}
		}

		this.setImageViewerSize(Math.max(width, this.minWidth), Math.max(height, this.minHeight));

		this.elements.imageViewerImage.width = width;
		this.elements.imageViewerImage.height = height;

		if (resized)
		{
			this.elements.imageViewerImage.className = size;
			this.elements.imageViewerImage.onclick = this.toggleImageSize.bind(this);
		}
		else
		{
			this.elements.imageViewerImage.className = '';
			this.elements.imageViewerImage.onclick = function(){};
		}
	},
	toggleImageSize: function()
	{
		this.setImageSize(
			this.elements.imageViewerImage.originalWidth,
			this.elements.imageViewerImage.originalHeight,
			this.elements.imageViewerImage.className == 'smallSize' ? 'fullSize' : 'smallSize'
		);
	},
	nextImage: function()
	{
		var num = this.currentImage + 1;
		if (!this.images[this.currentSet][num])
			num = 0;

		this.show('loadingContainer');
		this.changeImage(num);		
	},
	prevImage: function()
	{
		var num = this.currentImage - 1;
		if (!this.images[this.currentSet][num])
			num = this.thumbs.length - 1;

		this.show('loadingContainer');
		this.changeImage(num);		
	},
	addImage: function(set)
	{
		var i = 1, image, num, l;

		if (!set) set = 'single';
		if (!this.images[set])
			this.images[set] = [];

		while ((image = arguments[i++]))
		{
			// check for duplicate
			for (num = 0, l = this.images[set].length; num < l; num++)
			{
				if (this.images[set][num].src == image.src)
					break;
			}

			if (num == l)
			{
				this.images[set][num] = {
					src: image.src,
					thumbsrc: image.thumbsrc,
					caption: image.caption
				};
			}

			if (image.anchor)
				addEvent(image.anchor, 'click', this.start.bind(this, set, num, false));
		}
	},
	generateThumbView: function(set, num)
	{
		var i = 0, image, img;
		this.elements.thumbView.innerHTML = '';
		this.thumbs = [];
		while ((image = this.images[set][i]))
		{
			img = document.createElement('img');
			img.src = image.thumbsrc;
			if (i == num)
				img.className = 'current';
			img.onclick = this.changeImage.bind(this, i);

			this.thumbs[i] = img;

			this.elements.thumbView.appendChild(img);

			i++;
		}

		this.show('thumbContainer');
	}
});

Hope you like it.

/Attached an zip with all the needed images.

[Jan]

Is there some demo site for this script?

Thank you, Jan

[Markstag]

I guess this website uses the same code:
http://life.tweakers.net/nieuws/54117/s ... r-aan.html
If you hit the camera picture's you can see an example.

[Jan]

thanks, Jan