Picture display?
- Thread starter ZeptOr
- Start date
ZeptOr
New Member
- Messages
- 442
- Reaction score
- 0
- Points
- 0
I remember this one site that had this really neat thing. When you clicked on one of the pictures, the entire page got darker and in a shade of grey, then the image would appear in the center. So everything was darker but the image, and it was all on the same page. That probably involves a lot of scripting knowledge though
Bryon
I Fix Things
- Messages
- 8,149
- Reaction score
- 101
- Points
- 48
ZeptOr
New Member
- Messages
- 442
- Reaction score
- 0
- Points
- 0
THATS IT! Cool isn't it? I'll have to look into this tomorrow, thanks
dyfuse
Member
- Messages
- 395
- Reaction score
- 0
- Points
- 16
http://www.huddletogether.com/projects/lightbox2/ is an awesome way to present pictures and photos! Thanks for sharing Byron! Also another alternative: ThickBox http://jquery.com/demo/thickbox/
@ ZeptOr: For an image rollover do you mean that another picture appears over the top of the existing picture? Or that the next image in the 'bunch of pictures' you have is displayed when you roll your mouse pointer over it? I know that for the Lightbox, once the mouse is over the picture (i.e. a mouse rollover), a small image appears on the right of the picture reading "next".
@ ZeptOr: For an image rollover do you mean that another picture appears over the top of the existing picture? Or that the next image in the 'bunch of pictures' you have is displayed when you roll your mouse pointer over it? I know that for the Lightbox, once the mouse is over the picture (i.e. a mouse rollover), a small image appears on the right of the picture reading "next".
ZeptOr
New Member
- Messages
- 442
- Reaction score
- 0
- Points
- 0
I want it so that when you move the mouse over the picture, another one is displayed, not the next one. For example, I have this picture of an empty room. I editted it in photoshop and made it look totally different. I want it so that in lightbox, the empty room is shown, but when you mouse over, not click, that image, the editted room is shown.
I don't like Lightbox. With the Prototype and the Scriptaculous libraries, Lightbox becomes over 100K.
So, you're saying when you hover over this picture, you want to replace the picture with another one?
Last edited:
Torch
New Member
- Messages
- 634
- Reaction score
- 0
- Points
- 0
I haven't used or tried lightbox so I can't tell you if there's an easier way to implement this, but I wrote you up a short tut on how you could do this...
First you need to put this piece of JavaScript in <head> of your page:
Code:
<script type="text/javascript">
function omo(img,iid){
var dir = "somedir/images/";
document.getElementById(iid).src = dir+img;
}
</script>In the function you need to change variable dir to point to directory with your images.
The function itself needs 2 values passed to it, first is the name of the image (e.g. my_pic.jpg) and the second id attribute of your <img> tag.
The best way to use it would be to place an image inside <a> (you don't have to put href if you don't need linking) with onmouseover and onmouseout actions. For example:
HTML:
<a onmouseover="javascript:omo('pic_on.jpg','myimage');" onmouseout="javascript:omo('pic_off.jpg','myimage');"><img src="somedir/images/pic_off.jpg" id="myimage" /></a>
mo('pic_on.jpg','myimage');" it's defined what image will be loaded when mouse is over it and what is the ID of the element in which it should be placed (so you need to give IDs to all your <img> for which you want this effect to work).onmouseout="javascript
mo('pic_off.jpg','myimage'); defines what image will be loaded when the mouse itsn't hovering above it anymore.There you go. I hope it helps and that you suceed in implement it as you like. And let me know if it works out
Torch
New Member
- Messages
- 634
- Reaction score
- 0
- Points
- 0
Huh? :s
The example I wrote above does exactly that, make mouseover effect.