CSS question
- Started
- Last post
- 8 Responses
- lifterBARON
Does anyone know how to control an image preview.. On release lightbox then shows the full image.. such as here..
www.fatoe.com
- amullins0
um...you just want to implement lightbox? image rollover? not exactly sure what you're looking for...
- univers0
http://labs.adobe.com/technologi…
Hope this helps.
- lifterBARON0
basically want the image to be smaller (like a sample of the image or a cropped version) and on click and release for it to be the full image.. all with using the same image file.
- amullins0
are you familiar with lightbox? you should be able to just wrap each image in a div which has a predefined width/height and overflow:hidden.
- lifterBARON0
no im not.. its actually a similar plugin
i didnt really wanna show it yet.. but if you check out what im working on here you might ge a better idea of what i mean..
http://www.lifterbaron.com/portf…
right now the images are full view.. but i would like them to be detail shots.. and when enlarged it goes to the full size uncropped version..
- lifterBARON0
shit is totally vague im sorry..
but like a 200x120 cropped version to a larger lightbox un-cropped one.. i was given this as a solution but dont know where to put it or f its the best solution
#divThumb {
width: 200px;
height: 120px;
overflow: hidden;
- amullins0
you could add a class to each of the links like so:
<style>
a.force_crop { display: block; width: 200px; height: 120px; overflow: hidden; }
</style>
<a href='http://www.lifterbaron.com/files/gimgs/33_lifterbaronno15elogo.jpg' title='' class='thickbox force_crop' rel='gallery-plants'>
<img src='http://www.lifterbaron.com/files/gimgs/th-33_lifterbaronno15elogo.jpg' alt='' height='120' />
</a>- of course, you'd change the img src to the same as the link hrefamullins
- amullins0
you could also position the image by change the link's position to relative and the image's position to absolute. then set top|right|bottom|left attributes to place the image for the thumb.