bwit:dev - Programming (mostly in PHP and JavaScript)

WelIMooges
- a Mootools library for image gallery and slideshow

WelIMooges.simpleGallery - Simple image gallery

The simpleGallery class constructs an easy and simple gallery, suitable for a product showcase such alike.

HTML: 

<div id="container"></div>
<div id="thumbnails">
    <a href="/images/image-1.jpg">
        <img src="/images/thumbnails/image-1.jpg">
    </a>
    <a href="/images/image-2.jpg">
        <img src="/images/thumbnails/image-2.jpg">
    </a>
    <a href="/images/image-3.jpg">
        <img src="/images/thumbnails/image-3.jpg">
    </a>
    <a href="/images/image-4.jpg">
        <img src="/images/thumbnails/image-4.jpg">
    </a>
</div>

CSS: 

#container {
    height: 250px;
}
#thumbnails {
    height: 70px;
}
    #thumbnails img {
        border: 1px solid #000;
        margin-left: 5px;
        width: 50px;
        height: 50px;
    }

JavaScript: 

window.addEvent('domready', function () {
    new WelIMooges.simpleGallery ('container', 'thumbnails', {
            activeCss: {
                    opacity: '1',
                    border: '1px solid #68bacb'
            },
            inactiveCss: {
                    opacity: '.5',
                    border: '1px solid #ffffff'
            }
    });
});

Result:

WelIMooges.horizontalGallery - Image slideshow

Slideshow where you can use the scrollwheel to switch between images.

HTML: 

<div id="container">
	<div id="slideshow"></div>
	<div id="thumbnails">
		<a href="/images/image-1.jpg" title="Caption image 1">
			<img src="/images/thumbnails/image-1.jpg">
		</a>
		<a href="/images/image-2.jpg" title="Caption image 2">
			<img src="/images/thumbnails/image-2.jpg">
		</a>
		<a href="/images/image-3.jpg" title="Caption image 3">
			<img src="/images/thumbnails/image-3.jpg">
		</a>
		<a href="/images/image-4.jpg" title="Caption image 4">
			<img src="/images/thumbnails/image-4.jpg">
		</a>
	</div>
</div>

CSS: 

#container {
	width: 300px;
	height: 400px;
}
	#slideshow {
		width: 300px;
		height: 300px;
		display: block;
		overflow: hidden;
	}
	#thumbnails {
		width: 300px;
		padding: 10px;
		display: block;
		text-align: center;
	}
		#thumbnails img {
			width: 50px;
			height: 50px;
		}

JavaScript: 

window.addEvent('domready', function () {
	new WelIMooges.horizontalGallery ('slideshow', 'thumbnails', {
		width: 300,
		height: 300
	});
});

Result:

WelIMooges.verticalGallery - Image slideshow

The same as above, but slides the images vertically. HTML and CSS exactly as the above.

JavaScript: 

window.addEvent('domready', function () {
	new WelIMooges.verticalGallery ('slideshow', 'thumbnails', {
		width: 300,
		height: 300
	});
});

Result:

WelIMooges.horizontalSlider - Image slideshow

A vertical slider for showing images.

HTML: 

<div id="container">
	<div id="slider">
		<a href="/images/image-1.jpg">
			<img src="/images/thumbnails/image-1.jpg">
		</a>
		<a href="/images/image-2.jpg">
			<img src="/images/thumbnails/image-2.jpg">
		</a>
		<a href="/images/image-3.jpg">
			<img src="/images/thumbnails/image-3.jpg">
		</a>
		<a href="/images/image-4.jpg">
			<img src="/images/thumbnails/image-4.jpg">
		</a>
		...
	</div>
</div>
<div>
	<span id="leftControl" class="control">[&lt;--]</span>
	<span id="rightControl" class="control">[--&gt;]</span>
</div>

CSS: 

#container {
	width: 300px;
	border: 1px solid #5f5f5;
	overflow: hidden;
}
	#slider {
		height: 100px;
		white-space: nowrap;
		margin-left: 0;
	}
		#slider img {
			margin: 10px;
			width: 75px;
			height: 75px;
		}
span.control {
	cursor: pointer;
}

JavaScript: 

window.addEvent('domready', function() {
	new WelIMooges.horizontalSlider('slider', {
		leftControl: 'leftControl',
		rightControl: 'rightControl',
		offset: 75
	});
});

[<--] [-->]