wayne Posted August 28, 2009 Report Posted August 28, 2009 Hi, I built my photographic website, www.imaginetheeverglades.com a year ago with a lot of help from this forum. The gallery page has an iframe wherein my album sits. I made the album using Jalbum, and now I want to do away with that as it's a real pain to update my photographs. For each change I have to rebuild the album. What I want to do is display about four images (approximately 150x100 pixels) on my homepage (landscapes, birds, alligators, flora) and then when one is clicked on it brings up a file of smaller thumbs. When the viewer clicks on one of these smaller thumbs a larger window opens of that image. I'll post about 75 photos this way, so my question is, is there an efficient method available other than building the 75 pages? Also, my shopping cart is part of the Jalbum album, and I'll need to create another one, but if I remember correctly that's not difficult to do. I'm a little rusty with html and css, but am brushing up on it. Thanks for your help. Quote
newseed Posted August 29, 2009 Report Posted August 29, 2009 (edited) How about something like this? Link Click on Proofing Area and then browse around. Edited August 29, 2009 by newseed Quote
wayne Posted August 29, 2009 Author Report Posted August 29, 2009 That's close, but this is more like I'm thinking about. http://www.martinlawrencephotography.com/gallery/view/18/ I can't remember how to access the CSS sheet for a site. Can you jog my memory? Quote
falkencreative Posted August 29, 2009 Report Posted August 29, 2009 Just look for the CSS link in the source code. In this case, looks like the CSS is generated dynamically. Here's the link for that particular site: http://www.martinlawrencephotography.com/?css=site/site_css Quote
wayne Posted August 29, 2009 Author Report Posted August 29, 2009 Wow! That's some CSS sheet. I'll study it although I won't build mine so detailed. That guy has a lot of text and special interest criteria. What do you mean by dynamically generated? Thanks for the info. Quote
falkencreative Posted August 29, 2009 Report Posted August 29, 2009 I can't really tell... The strange url ("?css=site/site_css" to be specific) probably means that PHP is being used to pull the CSS code from a database or use specific CSS per page. It may be a feature of whatever CMS that site may be using. Obviously, I can't look at the PHP code itself, so this is only an educated guess. Quote
wayne Posted August 30, 2009 Author Report Posted August 30, 2009 Got a new snag. I can't seem to get my text to center beneath each photo. I've pasted an excerpt from my gallery2.html below, and then the stylesheet. alt="Monroe Station"> Dawn at the Hammock *{margin: 0; padding: 0;} body { color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; background:#333333; } #wrapper { background: #C1BEB3; margin: 25px auto; width: 980px; padding-top: 1em;} #wrapper2 {background:#333333; margin: 5px auto; width: 940px; padding-top: 1em; } #header {text-align:center;} h1 {color:#666600;} h1,h2,h3 { margin:15px auto;} h2,h3 { font-size: 100%;} h3 {text-align:center;} h4 {text-align:left; margin:15px;margin-bottom:0px;} p.center {text-align: center;}#content {margin: 35px;}p{ margin: 15px 0;} ul#navlist{margin:15px auto; white-space: nowrap; text-align:center;} #navlist li {display: inline; list-style-type: none;} #navlist a {padding: 3px 10px; } #navlist a:link, #navlist a:visited{color: #fff;background-color: #808080; text-decoration: none} #navlist a:hover{color: #fff; background-color: #808000; text-decoration: none;} table{margin: 10px 50px;} img.displayed {display:block; margin-left: auto; margin-right: auto } #footer { text-align: center; font-size: .8em; clear:both;} #images img{float:right;} #images img{float:left;} #images p{clear:both;} #images img{margin:0 60px 0;} #images img {border: 0; } #thumbs img {border:0;} div.float { float:left; margin-left: 20px;margin-right: 20px;} div.float p {text-align:center; } #post img {display:block; margin: 0 auto;} #post {text-align:left;} #post p {margin-top: 15pt; margin-bottom: 5pt;margin-left: 130pt; margin-right: 130pt; } Quote
virtual Posted August 30, 2009 Report Posted August 30, 2009 Your css declaration for the p class="float" is not quite right it should look like this div.float p.float {text-align:center; } Quote
wayne Posted August 30, 2009 Author Report Posted August 30, 2009 Having a problem with layout on thumbnail page where I'll have about 20 - 150x100px images. I can't keep the thumbs in any order and was wondering if I should use tables? Quote
virtual Posted August 31, 2009 Report Posted August 31, 2009 You can use and tags to make say 4 columns of 5. See how the css is set up in this exampledyna micdr ive.com/style/csslibrary/item/css-image-gallery/ (delete spaces) Quote
lm Posted August 31, 2009 Report Posted August 31, 2009 you can also use this template to manage the thumbnails. Quote
wayne Posted August 31, 2009 Author Report Posted August 31, 2009 Some of my thumbnails are horizontal and others, vertical, and that seems to throw the alignment off. I've looked at the links Im and Virtual provided but still can't wrap my head around the concept of aligning my thumbs. It's been two days and I'm totally confused. Can someone look at my stylesheet posted above, and point me in a more clear direction? Quote
virtual Posted September 1, 2009 Report Posted September 1, 2009 (edited) You cannot align thumbnails that are portrait (vertical) and landscape (horizontal) without it looking messy. You could try putting all the portrait ones together on one line and then below that another set with the landscape thumbnails, you would have to give them a different class and define the measurements in the css. Another solution would be to crop your thumbnails so that they are all the same size, the photo would be the regular size, but all the thumbnails would be the same size to fit into the grid. Edited September 1, 2009 by virtual Quote
virtual Posted September 1, 2009 Report Posted September 1, 2009 If my previous post is obscure, your code should look like this CSS .portrait { float:left; width: 100px; margin: 10px 20px; padding: 5px; border: solid 2px #FFF;} p.float {text-align:center; } .landscape {float:left; width: 175px; margin: 10px 20px; padding: 5px; border: solid 2px #FFF;} .clear{ clear: both;} HTML alt="Monroe Station"> Dawn at the hammock alt="Monroe Station"> Dawn at the Hammock alt="Monroe Station"> Dawn at the Hammock alt="Monroe Station"> Dawn at the hammock alt="Monroe Station"> Dawn at the Hammock Quote
lm Posted September 1, 2009 Report Posted September 1, 2009 if you have them thumbnails portrait and landscape why not to use lightbox script? Cut from your photos some funky stripes of equal size to use them as thumbnails as it is on lightbox example page ( see image set). There are may similar to lightbox scripts, I'm sure you can find one you prefer after search in Google. Quote
wayne Posted September 1, 2009 Author Report Posted September 1, 2009 Thanks again for your help, and Virtual, for the time you took to post code in this case. The problem I have here with thumbs, is that I must represent the full composition of each photo as this is a photographic website. I can't hack the images in pieces because they don't display properly. So I've been reading, looking at other photographic sites and doing a lot of googling and unless I'm really missing something in code writing, it appears that the only way to overcome the alignment problems is with tables and css. If anyone has a fix for this alignment problem in pure CSS, or agrees that tables are the way to go, I'd appreciate hearing from you. Quote
newseed Posted September 1, 2009 Report Posted September 1, 2009 You may want to check some of these: Gallery One Gallery Two Gallery Three All three uses portriats and landscape together. Just pick one you like and then study the code to see how it works. Quote
virtual Posted September 1, 2009 Report Posted September 1, 2009 The solution I gave you is pure CSS just to align the thumbnails, bearing in mind that they are of different sizes, heights and widths you are not cutting off any part of the thumbnail image, just arranging them in a more visually pleasing arrangement. This is an old site I did some years back using lightbox, where I had the same problem and huge images to display, all done in CSS http://walterbusuttil.com/kitchens/index.html I don't particularly care for the layout but the client loved it. Now I prefer to use a CSS rollover gallery, but that would not be good for you as the displayed image is always the size dimensions. Quote
wayne Posted September 4, 2009 Author Report Posted September 4, 2009 (edited) It's been a few days but I managed to fix my image alignment problem. I appreciate the help and have been steadily rebuilding the site. But I've come to a point where I need to link image pages with a clickable arrow showing next and previous, and haven't been able to find info on the arrow part. Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method? Edited September 4, 2009 by wayne Quote
wayne Posted September 6, 2009 Author Report Posted September 6, 2009 Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method? Maybe I've asked too much? Quote
falkencreative Posted September 6, 2009 Report Posted September 6, 2009 Also, how do I go about making my pages live for purposes of posting here? Can I somehow link to my existing website in a temporary method? Just make a new folder on your web hosting (name it "temp"?) and then upload your new site there so you can provide us a link. When the site is done and you are ready to launch, delete the temporary folder. Quote
wayne Posted September 7, 2009 Author Report Posted September 7, 2009 (edited) Okay, I've got the new site (not finished) temporarily loaded. The address-- www.imaginetheeverglades.com/temporary The background is a gradient, but on some of the longer pages it doesn't go all the way to the bottom. You can see what I mean if you go to Stories2.html Appreciate any help. Wayne Edited September 7, 2009 by wayne Quote
falkencreative Posted September 7, 2009 Report Posted September 7, 2009 You could try making the background fixed, rather than scroll with the page... Otherwise, yes, the background won't go all the way to the bottom of the page. In order to make the background fixed, change: background:#787575 url(laimages/gradient5.jpg) repeat-x top;} to background:#787575 url(laimages/gradient5.jpg) repeat-x top fixed;} Quote
Andrea Posted September 7, 2009 Report Posted September 7, 2009 Your link above doesn't really work, but I found your temp page at http://www.imaginetheeverglades.com/temporary/2009CSSwebsite/index2.html The best way to handle a gradient background is to set the background color in the color the gradient ends. The black text on the dark background is VERY hard to read. On the gallary page, you have 2 body tags, a right after the first body tag, and the thumbnails aren't evenly distributed. On the 'About' page, the last word is missing. On the facts and fiction page, the blue links don't fit into the color scheme, neither do the purple 'visited' links, plus, the purple is also very hard to see on the dark background. Quote
wayne Posted September 7, 2009 Author Report Posted September 7, 2009 Wow, that was an easy fix. I've got another hurdle with this rebuild - a shopping cart. In my existing site the cart is built into the Jalbum gallery. For this one I'd like to put "Add to Cart" and "View Cart" on each large image page using my Paypal account. From reading the PP site it looks like their recommendation is to use Javascript, which I don't have any knowledge of. I wonder if someone would steer me in the right direction for building a cart, or using the proper Paypal template. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.