Image Viewer with Thumbnails using Mootools
This is a simple tutorial for creating an image viewer with thumbnails using Mootools.
HTML
The simple markup.
<div id="container"> <div id="image"><img src="/media/images/image_viewer/1.jpg" alt="image"></div> <div class="thumb"><img src="/media/images/image_viewer/thumbs/1.jpg" alt="thumbnail"></div> <div class="thumb"><img src="/media/images/image_viewer/thumbs/2.jpg" alt="thumbnail"></div> <div class="thumb"><img src="/media/images/image_viewer/thumbs/3.jpg" alt="thumbnail"></div> </div>
CSS
This will be our CSS for
body {
font-family: 'lucida sans', 'lucida grande', Helvetica, Arial, sans-serif;
}
div.thumb {
overflow: hidden;
width: 75px;
height: 75px;
float: left;
border: 2px solid #F8F8F8;
}
#image {
width: 233px;
height: 180px;
overflow: hidden;
float: left;
border: 2px solid #F8F8F8;
}
#container {
width: 237px;
float: left;
}
.clear {
clear: both;
}
Javascript
This javascript code would now replace the images in the viewer based on what thumbnail is clicked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
$$('div.thumb').addEvent('click', function(){
var img_src = this.getElement('img').get('src').split('/')[5];
var image = new Element('img', {src: '/media/images/image_viewer/'+img_src}).replaces(document.id('image').getElement('img'));
});
});
</script>
Demo
View the Demo for Image Viewer with Thumbnails using Mootools and see how it works.Categories: Web Development, Clientside
Tags: javascript, mootools
No Comments
