javascript image gallery 1

[rastaIT34]

Not sure where to even start here.

I am trying to build a a small JavaScript image gallery. As you can see in the jpeg image at the link provided, i want the user to be able to change the large image by clicking on the small thumbnails. The thumbnails will also have a roll over where they enlarge slightly. Complicated?

I'm not a javascript expert, but i know enough by editing existing code and have saved a bunch of code i've modified. I've googled for javascript image galleries and looked through them but no success...

I can understand the clicking on a thumbnail to change the larger image but what gets me is having the thumbnail on top of the larger..as well having a still image at the top left....some sorta layering?

anyway some sorta help to get me started would be very helpful...

http://www.rossow-web.com/test/RCC_Mockup.jpg

thanks!


Artist/Designer

 

[vacunita]

Set the large image to be a background of an element like a div. Stick your smaller images in that div, and then use JS to alter the backgroundImage property based on the src of the smaller images.

.largeImage{
width:800px;
height:600px;
overflow:hidden;
border:1px solid gray;
position:relative;
background-image:url('/HotelGama/reel/roomb.jpg');
}

.thumbstrip{
overflow:visible;
height:130px;
border:2px solid red;
}

.thumbs{
width:128px;
height:128px;
margin:20px;
vertical-align:top;
margin-top:-20px;
}

.thumbs:hover{
width:200px;
height:200px;
}
.spacer{
height:450px;
}

<div class="largeImage" id="largeImage">
<div class="spacer"></div>
<div class="thumbstrip"><img class="thumbs" src="thumb1.jpg" alt="Thumb1" onClick="setLargeImage(this);"/><img class="thumbs" src="thumb2.jpg" alt="Thumb2" onClick="setLargeImage(this);"/><img class="thumbs" src="thumb3.jpg" alt="Thumb3" onClick="setLargeImage(this);"/></div>
</div>

<script type="text/javascript">
function setLargeImage(imgObj){
var largeImg=document.getElementById('largeImage');
largeImg.style.backgroundImage="url(" + imgObj.src + ")";
}
</script>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[rastaIT34]

awesome! this will get me started....thanks for the help!

Artist/Designer

 

[rastaIT34]

i'm having problems with the background image.... i set it in the css but it seems to not be working.

http://www.rossow-web.com/webstore/rcc_home3.html

Artist/Designer

 

[vacunita]

Your image file doesn't exist were you are saying it supposed to be.

../images/image1.jpg points to:

http://www.rossow-web.com/images/image1.jpg

Also looking into your actual Images folder you have files with the name bigimageX.jpg

but your CSS is pointing at simply image1.jpg which does not exist in that folder either.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[rastaIT34]

ok i see the problem...i made the change..but for some reason the thumbs are getting tiled.....

http://www.rossow-web.com/webstore/rcc_home3.html

i tried moving the thumbnails down but for reason it got hidden.

i wanted to stretch the background to the edge of the window like the mockup:

http://www.rossow-web.com/test/RCC_Mockup.jpg

i found a code to stretch the background image:

http://www.quackit.com/html/codes/html_stretch_background_image.cfm

Artist/Designer

 

[vacunita]

Just use a large image instead of the thumb to set the src o the background, otherwise they are going to look horrible when they stretch.

Since you are using a numbering scheme, you can simply extract the number from the thumb file name and concatenate it to create the large image filename.

Or change your naming scheme, so you can add just a "large" or "big" string to the thumbs filename to get the large image file name.

var parts=imgObj.src.split('/');
var largefilename=parts[parts.length-1].split('.')[0];

alert("big" + largefilename + ".jpg");

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/