dgbullar Posted April 22, 2007 Share Posted April 22, 2007 Hi Every one,I am in the design stage of creating an online portfolio and I need to display alot of different images as thumbnails then on-click display them at a uniform size. So, should I create an individual page for each image or is there a way (without frames) to display the full-size image on the same page as the thumbnails. I am open for any and all answers, ideas and suggestions.Thanks Link to comment Share on other sites More sharing options...
falcifer Posted April 22, 2007 Share Posted April 22, 2007 -->QUOTE(David B @ Apr 22 2007, 03:38 PM) <{POST_SNAPBACK}> Hi Every one,I am in the design stage of creating an online portfolio and I need to display alot of different images as thumbnails then on-click display them at a uniform size. So, should I create an individual page for each image or is there a way (without frames) to display the full-size image on the same page as the thumbnails. I am open for any and all answers, ideas and suggestions.ThanksThe last time I did something like that I did it in Picasa, which created two pages... one page with all your images, then another for the individual images.Without using frames, you'd have to create a new page for each image, I think. Unless you emulate a frame on your page... you could line up the thumbnails (or small images) along the top or side, then have a larger DIV containing your IMG in the middle of the page, and then change the SRC property of the IMG tag onclick...If you're making a new page, then you can either have it link to the page, or you could make a pop-up window containing the full-size image.As for creating the image on the same page... you'd have something like...<html><head><title>Portfolio Page 1</title><style>img{ border: none; color: white;}a{ color: white;}</style><script>function showFull(i){s=i.src;s=s.substring(0,s.length-6);d=document.getElementById('fullPic');d.src=s+".jpg";}</script></head><body bgcolor="black"><center><table cellspacing="10"><tr><td align="center" colspan=2 rowspan=2> <img src="http://static.flickr.com/80/236089266_f7a2953c3f_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/66/179211600_e5b9f95256_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/46/182413190_6818bdf780_t.jpg" onclick="showFull(this);" /></td><td align="center" colspan=2 rowspan=2> <img src="http://static.flickr.com/85/207586231_36c9b2980b_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/80/207949159_5d6fe8a119_t.jpg" onclick="showFull(this);" /></td><td align="center"> <img src="http://static.flickr.com/72/207559251_a2ad1bd24f_t.jpg" onclick="showFull(this);" /></td></tr></table><hr /><table><tr><td><img id="fullPic" src="" alt="Click thumbnail to show larger size" /></td></tr></table></center></body></html> Which looks like this; http://homepage.ntlworld.com/josephine.clark2/portfolio.htmOf course, you do need some consistent naming of your files. so if you have your thumbnail named "image_thumb.jpg", then you can use JS to remove the last 10 characters of the name, which leaves you with "image", and then you can add ".jpg" to the end to get your fullsize image...I hope that's clear, and that the code is somewhat helpful... Feel free to ask if anything is unclear. Link to comment Share on other sites More sharing options...
dgbullar Posted April 22, 2007 Author Share Posted April 22, 2007 Thanks,I'll try this out and get back to you on that, the sample page you linked is exactly what I am trying to do.If any one else has any input it will be gratefully accepted. Link to comment Share on other sites More sharing options...
Skemcin Posted April 23, 2007 Share Posted April 23, 2007 You should really have the cursor change from the pointer to the hand to make it clear the images are to be clicked. People prefer to act inuitively and not have to read and instruction. In this case, one might rollover the image and not see the cursor change and then have to read. Link to comment Share on other sites More sharing options...
falcifer Posted April 23, 2007 Share Posted April 23, 2007 You should really have the cursor change from the pointer to the hand to make it clear the images are to be clicked. People prefer to act inuitively and not have to read and instruction. In this case, one might rollover the image and not see the cursor change and then have to read.Well, I think it's about time people stopped acting intuitively... because that's what gets people into trouble with pop-ups and dialog boxes. :)Though, in this case, I do agree. More for the reason that I like clickable things to act like links... And what I came up with was not meant to be an all-inclusive solution... just an example of what can be done.And really, with such a minimal page -- six small images, a line and some text -- is it really that much trouble to read what's barely off the top of the page? I would hope not. Link to comment Share on other sites More sharing options...
Skemcin Posted April 23, 2007 Share Posted April 23, 2007 I do not mean to pick on the solution provided in a way to make it seem imperfect. I only offered my addition perspective to help this person, and others, realize some good habits to get into.Although it may not be too much to ask for you and maybe not 99% of the people using it, it is still a good practice give the user a consistent experience. The main point is that there have been several studies that basically tell us that the more time users spend on making decisions, the less time they focus on the content. So, if someone has to read an instruction that would otherwise be understood if the interface was consistent with the rest of the world, then you are likely to have a less effective web site/page.Thats only my point. Link to comment Share on other sites More sharing options...
falcifer Posted April 23, 2007 Share Posted April 23, 2007 I do not mean to pick on the solution provided in a way to make it seem imperfect. I only offered my addition perspective to help this person, and others, realize some good habits to get into.I guess I read it the wrong way, then. I apologise.Although, in this case, if someone is looking at my portfolio online, then they'd be looking at it for the explicit reason of looking at the content, so having to read the line that tells them how to view larger images isn't going to necessarily correspond to the time they spend looking at the images; since this is the reason for them viewing the page to begin with.If someone's going to judge my photography by how well I design a webpage, then they're not really worth bothering with, I would think.But, as you say, it is a good practice to get into, I agree with that. Link to comment Share on other sites More sharing options...
dgbullar Posted April 23, 2007 Author Share Posted April 23, 2007 So, would the best way to change the cusor from an arrow to the pointer for each image be to give each Image or Cell a class or an id and then specify the cursor with a style sheet?By the way you guy both offer some interesting insight. Thanks Link to comment Share on other sites More sharing options...
jesh Posted April 23, 2007 Share Posted April 23, 2007 -->QUOTE(David B @ Apr 23 2007, 01:25 PM) <{POST_SNAPBACK}> So, would the best way to change the cusor from an arrow to the pointer for each image be to give each Image or Cell a class or an id and then specify the cursor with a style sheet?By the way you guy both offer some interesting insight. ThanksIf all of your images were in an encapsulating div, then you could easily set the cursor with the stylesheet:<style type="text/css">#AlbumDisplay img { cursor: pointer; }</style><div id="AlbumDisplay"><img /><img /><img /><img /><img /></div> Link to comment Share on other sites More sharing options...
mulletgut Posted April 24, 2007 Share Posted April 24, 2007 I use this extremely cool album production tool which I think will give you the result you're after. It is incredibly easy to use and customise, and as a bonus, it's free. Give it a try, you might be suprised. Have a look at this sample Banana Other album skins (included in the install) here.Small download and awesome results, Link to comment Share on other sites More sharing options...
jlhaslip Posted April 27, 2007 Share Posted April 27, 2007 http://bonrouge.com/cheerspics.php or use the hoverbox code from http://www.sonspring.com Link to comment Share on other sites More sharing options...
dgbullar Posted April 27, 2007 Author Share Posted April 27, 2007 http://bonrouge.com/cheerspics.php or use the hoverbox code from http://www.sonspring.com I kind of understand how the first one works, and how to make it work for me. but can any one give me some insight on the specifics of why it works.Thanks! Link to comment Share on other sites More sharing options...
falcifer Posted April 28, 2007 Share Posted April 28, 2007 -->QUOTE(David B @ Apr 27 2007, 11:26 PM) <{POST_SNAPBACK}> I kind of understand how the first one works, and how to make it work for me. but can any one give me some insight on the specifics of why it works.Thanks!I just finished working on a menu that uses the same sort of thing...Basically, you know how you can change the colour of a hyperlink when you hover over it? Using CSS...a#someID{ color: red;}a#someID: hover{ color: blue;} You can use the "hover" subset(?) on other elements, to change the appearance of other elements.... for exampleIn this case, all the images are already set on the page. The reason you can't see them is because they're set to have a width of 1px and, I think the main image there is covering them up.The CSS code is used to change the z-index of the img elements to 1, which brings them forward, and changing the width to 500px. This is done using the "hover" thing for the thumbnails. (and the "active" and "focus" ones, too, which means you can use the tab key to scroll through the pics) Link to comment Share on other sites More sharing options...
lowrentIT Posted April 28, 2007 Share Posted April 28, 2007 "If you're making a new page, then you can either have it link to the page, or you could make a pop-up window containing the full-size image."How do you do this in CSS and control the size of the pop-up window. I'd like the pop-up window to just remain 300x250 for all the full size images. Link to comment Share on other sites More sharing options...
falcifer Posted April 28, 2007 Share Posted April 28, 2007 "If you're making a new page, then you can either have it link to the page, or you could make a pop-up window containing the full-size image."How do you do this in CSS and control the size of the pop-up window. I'd like the pop-up window to just remain 300x250 for all the full size images.I'm not sure that it's entirely possible with CSS. You'd probably have to use some JavaScript.This thread should help a little. Link to comment Share on other sites More sharing options...
lowrentIT Posted May 11, 2007 Share Posted May 11, 2007 I'm not sure that it's entirely possible with CSS. You'd probably have to use some JavaScript.This thread should help a little.Thanks for the link. I'll file that one, i'm sure i'll need it in the future.I actually found this over at JavaScriptKithttp://javascriptkit.com/script/script2/divviewer.shtmlVERY easy to use. It looks cool and it gets the job done....however it acts a funny in FireFox. But i guess i could live with it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now