Picture display?

ZeptOr

New Member
Messages
442
Reaction score
0
Points
0
What would be a good way to display a bunch of pictures? I could just have a bunch of thumbnails that link to a larger image, but I'm thinking that I could do better. Any suggestions?
 

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
 

Rufio1

New Member
Messages
154
Reaction score
0
Points
0
that was probably flash with some action script. anything real fancy that you use might use will probably involve flash
 

ZeptOr

New Member
Messages
442
Reaction score
0
Points
0
okay what about this

A box shaped frame in the center of my site, and thumbnails below it outside the frame. When you click on the thumbnails the picture shows up in the frame
 

Bryon

I Fix Things
Messages
8,149
Reaction score
101
Points
48
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

http://www.huddletogether.com/projects/lightbox2/?
 
Last edited:

ZeptOr

New Member
Messages
442
Reaction score
0
Points
0
okay so here is a question

is it possible to have an image rollover while in the lightbox viewer? I haven't figured out how to do this yet, is it even possible?
 

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

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.
 

ZeptOr

New Member
Messages
442
Reaction score
0
Points
0
yes

I like lightbox because it just has a cool look, when you go from a small picture to a large one, it has a nice animation of going from small to large. But are you saying that it takes longer to load because its over 100k?
 

Torch

New Member
Messages
634
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 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>
What that does is select your element with specific id (in this case would be <img> tag with specified id) and replaces it's src attribut, e.g. changes the images when it's called. How it's called I'll exapain a bit later.
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>
In onmouseover="javascript:eek: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:eek: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 :)
 

Derek

Community Support Force
Community Support
Messages
12,882
Reaction score
186
Points
63
Hmm mouseover isnt there a code for it ill find you one
 
Top