Right. This one should be rather simple, but I'm new to js.
I have 20 images, all the same size (896x560). I want to create a gallery. The gallery should display the black/white thumbnails of all images. When you rollover, the thumb should be in color. When you click it, the thumbnail gallery should be replaced with the full-size clicked image in the center, the b/w thumb of the previous image to the left, and the b/w thumb of the next image to the right. When you rollover these thumbs you should get the colored thumbs, and when you click them... well, you know
also, the gallery should loop - meaning that the first image should follow the last one.
So how do I do that? I only have some basic js knowledge :\
help?
To be honest your asking a lot.
Its not as simple as it sounds, but it can be done using JS and a server side language.
I would start off by asking or simply googling:
'How to do an image rollover'
well there are a lot of free image gallery generators out there. Google will show a lot of results.
If you want a custom one you might have to advance your JS knowledge.
If there is a 'specific' area you need help with, I am sure you will get the answers you need here quickly.
Here are some things to consider first.
1. Do you have a proper naming convention for all the images.
2. Are the thumbs going to be generated by you, or progamatically.
3. Does the program read a DIR to get a list of images, or are they predefined in a JavaScript array.
4. Is there software out there already that will do what I need to do.
Right. This one should be rather simple, but I'm new to js.
I have 20 images, all the same size (896x560). I want to create a gallery. The gallery should display the black/white thumbnails of all images. When you rollover, the thumb should be in color. When you click it, the thumbnail gallery should be replaced with the full-size clicked image in the center, the b/w thumb of the previous image to the left, and the b/w thumb of the next image to the right. When you rollover these thumbs you should get the colored thumbs, and when you click them... well, you know
also, the gallery should loop - meaning that the first image should follow the last one.
So how do I do that? I only have some basic js knowledge :\
help?
What you want to do will probably be found on the following pages or you might find something you like better to use:
If you want to pull all images from a server folder then you must use a server side script. After the images are on the page then it is easy. Here is a basic example of what you want:
Code:
<html>
<head>
<script type="text/javascript">
var imgs = ['http://www.iam.unibe.ch/~scg/Mirrors/stephane.ducasse.free.fr/FreeBooks/ByExample/byExample.gif','http://www.vi.net/library/images/loadbalance_example1.gif','http://www.netbsd.org/docs/guide/install-4.0/inst-nfs-example.png','http://www.3d-digital-graphic-art.com/example41b.jpg','http://doc.coin3d.org/images/SoLibs/general/sogui-class-example.png'];
function aD(alt){
var picNum = parseInt(alt);
var main_image = document.getElementById('main_image');
main_image.src = imgs[picNum];
var pre = picNum-1;
if(pre<0)
pre = imgs.length-1;
var next = picNum+1;
if(next==imgs.length)
next = 0;
var left = document.getElementById('left_image');
left.src = imgs[pre];
left.alt = pre;
left.onclick = function(){aD(this.alt);};
var right = document.getElementById('right_image');
right.src = imgs[next];
right.alt = next;
right.onclick = function(){aD(this.alt);};
showDiv(1);
return;
}
function createThumbs(){
var thumbDiv = document.getElementById('thumbs');
var myImg;
for(i=0;i<imgs.length;i++){
myImg = document.createElement('img');
myImg.src = imgs[i];
myImg.width = 50;
myImg.height = 50;
myImg.alt = i;
myImg.onclick = function(){aD(this.alt);};
thumbDiv.appendChild(myImg);
}
return;
}
function showDiv(divID){
var largeDiv = document.getElementById('large');
var thumbDiv = document.getElementById('thumbs');
if(divID==0){
largeDiv.style.display = 'none';
thumbDiv.style.display = 'block';
}
else{
largeDiv.style.display = 'block';
thumbDiv.style.display = 'none';
}
return;
}
</script>
</head>
<body onload="createThumbs()">
<div id="large" style="display:none">
<img src="#" id="left_image" width=50 height=50><img id="main_image"><img id="right_image" width=50 height=50>
</div>
<div id="thumbs">
</div>
</body>
</html>
That will create the images for you instead of you having to hardcode the images directly onto the page.
so here's my next question: the viewing works great, exactly what I wanted. But, is there a way to manipulate the position of the thumbs when no thumb has been clicked yet? like, to add some space between them? also, is it possible to eliminate the borders on the left/right side before any thumbs have been clicked? I don't want to lose 'em while in viewing mode, though. Also also, is it possible to add similar borders in the gallery mode (before clicking)?
thanks in advance
Reply With Quote
Originally Posted by grmmu
Bookmarks