Slider object that controls css values?

Discussion in 'Web Design and Development' started by yagran, Aug 5, 2007.

  1. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #1
    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,
    HTML:
    .....
    <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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     

Share This Page