PDA

View Full Version : PHP Photo Album Script V2.11 Portrait/Landscape



mrgrotey
07-30-2010, 12:39 PM
PHP Photo Album Script V2.11

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm


Hi guys my first post here.

I was wondering if there is anything that could be done to make the script above recognise portrait and landscape photos so the thumbs dont force everything into landscape proportions?

I want to use this script on a site I am making and the person who will run the site knows nothing about html/css code (I myself am a novice) and I just want to tell him he can throw any old photo in the folder and itll show up. The only problem I have is the lack of portrait/landscape recognition.


Is this not a possibility?

Thanks for any help guys and gals.

Michael

jscheuer1
07-30-2010, 01:56 PM
If you specify only one dimension of an image, the browser will make the other proportional to it. So - say in the ddphpalbum.css file:


.photodiv img{ /*CSS for each image tag*/
border: 0;
width: 200px;
height: 106px;
cursor: hand;
cursor: pointer;
}

If you get rid of one of the highlighted dimensions, the images will all scale to the other.

Alternatively, you can use max-width and max-height instead of width and height:


.photodiv img{ /*CSS for each image tag*/
border: 0;
max-width: 200px;
max-height: 106px;
cursor: hand;
cursor: pointer;
}

This will specify a box that the image must scale into. However, IE 6 and less don't do max-width and max-height. But, if that concerns you, you may use a supplement stylesheet for IE 6 and less that defines these in terms of expressions, or simply uses the first method discussed above (specifying only one dimension).

To get a supplement stylesheet for IE 6 and less, place this on the page after the existing stylesheet link:


<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6_ddphpalbum.css" type="text/css">
<![endif]-->

Then in ie6_ddphpalbum.css put like:


.photodiv img{ /*CSS for each image tag*/
width: 200px;
}

Or even:


.photodiv img{ /*CSS for each image tag*/
width: expression(this.width < this.height? '200px' : 'auto');
height: expression(this.width >= this.height? '106px' : 'auto');
}

However, in IE 6, if you do this last, and there is an image(s) that is less than that size in both dimensions, it will be expanded to fit the box proportionally. If you have that situation and want it fixed, it can be done, so let me know.

mrgrotey
08-02-2010, 02:39 PM
Sorry I completely forgot to reply.

Thanks so much for the help it worked out a treat and so simple.

Thanks a ton for helping in such a descriptive way.

P.S. I didnt bother with the IE6 fix, it's about time whoever uses that updated their software ;)