Slider object that controls css values? [Archive]

yagran

Aug 5, 2007, 07:27 AM

Hi there. As the title kinda sums this up ill jump straight in,

http://www.mcfluffit.com/lovemyphoto

If you see here, it has a slider that changes the size(or scale) of the gallery tumbnails. I looked into how its working, and it seems to be on the scriptaculous framework, but i cant get a slider to work on a new little project of mine!

Im wanting to create a database of sites that i like,and have them show up in a grid format. Then have the slider control how big the site thumbnails are, the thumbnails will be wrapped in a div, with a comment below so i guess id need the slider to change multiple css heights and widths at once?

heres how i see it going in my head,

.....
<style>
.grid-item{
height: 100px;
width: 120px;
}
</stlye>
.....
<script>
SLIDER OBJECT THAT CHANGES THE HEIGHT AND WIDTH OF .grid-item
</script>
.....
<body>
<div class="grid-item">blah</div>
<div class="grid-item">blah</div>
<div class="grid-item">blah</div>
<div class="grid-item">blah</div>
.....

can anyone help me with a solution? (ive tried lots of slider, including the YUI one, and i just cant get anything to do what i want it to!)

thanks so much.

angelwatt

Aug 5, 2007, 08:47 AM

I believe it essentially comes down to having the thumbnail width set to 100% so as the div around it grows, so will the img. Give that a go.

ezkimo

Aug 5, 2007, 10:30 AM

This might help:
http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/