RJM62
Touchdown! Greaser!
- Joined
- Jun 15, 2007
- Messages
- 13,157
- Location
- Upstate New York
- Display Name
Display name:
Geek on the Hill
Self-Imposed CSS and PHP Refresher Training
Like most people in my business, I've accumulated quite a stockpile of code that I routinely copy, paste, and tweak into new sites. I have a lull in the action at the moment because I just finished a major rewrite of an old client's site (he'd fired me a long time ago, but recently came back), so I decided to build myself a new site completely from scratch, as it were, completely hand-coding it and not using any recycled stuff.
I also decided that I didn't want to use any JavaScript. I used to fix computers, and I found that computers that are malware-infected, have overly-aggressive antivirus or ad-blocking software, or simply aren't feeling well can do strange things to JS-dependent pages. So I prefer not using JS unless I have to.
I decided to build a site where I can give away less-than-wonderful stock photos I've taken (ones that were rejected by the stock photo companies I deal with, and ones that I didn't bother to submit because I knew they'd be rejected), and hope that people click on an ad or two while they're perusing my leftovers.
I'm still working on the code, but I have a mocked-up version of one page online. I'd appreciate comments on the effect that occurs when an image in the gallery is hovered. You can also play with the cart and zip download function if you like, although I'm still tweaking those.
What should happen is that the thumbnail image increases in size and shifts up slightly, and then the image and the accompanying text obscures adjacent images.
I already know that the effect WILL NOT WORK on IE < 10 (the image will resize and the text will obscure the adjacent images, but there will not be a timed transition), and I haven't tested it on mobile browsers because there's no real hover function. I'm pondering different ways to implement it on a future mobile version.
It seems to work well on Firefox and decently on Chrome and Safari. I haven't gotten around to testing it on Opera yet. That'll be later after I run a few errands.
Here's the mocked-up page:
http://www.rjmstock.com/free_stock_photos_railroad.php
The PHP that generates the gallery is:
The relevant CSS is:
The CSS, especially, will need a lot of tightening up. For example, for whatever reason, using the shorthand for the .cover class doesn't seem to work, and I'm also pretty sure that there are some unnecessary values in there from my playing around.
Comments appreciated.
Thanks.
-Rich
Like most people in my business, I've accumulated quite a stockpile of code that I routinely copy, paste, and tweak into new sites. I have a lull in the action at the moment because I just finished a major rewrite of an old client's site (he'd fired me a long time ago, but recently came back), so I decided to build myself a new site completely from scratch, as it were, completely hand-coding it and not using any recycled stuff.
I also decided that I didn't want to use any JavaScript. I used to fix computers, and I found that computers that are malware-infected, have overly-aggressive antivirus or ad-blocking software, or simply aren't feeling well can do strange things to JS-dependent pages. So I prefer not using JS unless I have to.
I decided to build a site where I can give away less-than-wonderful stock photos I've taken (ones that were rejected by the stock photo companies I deal with, and ones that I didn't bother to submit because I knew they'd be rejected), and hope that people click on an ad or two while they're perusing my leftovers.
I'm still working on the code, but I have a mocked-up version of one page online. I'd appreciate comments on the effect that occurs when an image in the gallery is hovered. You can also play with the cart and zip download function if you like, although I'm still tweaking those.
What should happen is that the thumbnail image increases in size and shifts up slightly, and then the image and the accompanying text obscures adjacent images.
I already know that the effect WILL NOT WORK on IE < 10 (the image will resize and the text will obscure the adjacent images, but there will not be a timed transition), and I haven't tested it on mobile browsers because there's no real hover function. I'm pondering different ways to implement it on a future mobile version.
It seems to work well on Firefox and decently on Chrome and Safari. I haven't gotten around to testing it on Opera yet. That'll be later after I run a few errands.
Here's the mocked-up page:
http://www.rjmstock.com/free_stock_photos_railroad.php
The PHP that generates the gallery is:
PHP:
$query="SELECT * FROM stock WHERE page='$page'";
$result=mysql_query($query);
$num = mysql_numrows($result);
$i=0;
while ($i < $num) {
$filename = mysql_result($result,$i,"file_name");
$thumb = "Images/stock/thumbs/" . $filename . ".jpg";
$full_size = "Images/stock/" . $filename . ".jpg";
$picinfo = getimagesize($full_size);
$pic_width = $picinfo [0];
$pic_height = $picinfo [1];
$alt = mysql_result($result,$i,"alt");
$title = mysql_result($result,$i,"title");
$caption = $title;
echo "<li class='cover'><img src=\"" . $thumb . "\" alt=\"" . $alt . "\" border=\"0\">" . PHP_EOL;
echo "<div id='gallery_text'><p>" . $caption . "</p>\n<p><a href='add_to_cart.php?file=" . $full_size . "'>Add " . $pic_width . " x " . $pic_height . " File to Cart</a></p></div></li>". PHP_EOL;
$i++;
}
Code:
#gallery {
position: relative;
display: inline-block;
margin-left: 0;
margin-top: 10px;
padding-top: 20px;
padding-bottom: 50px;
background: #080808;
width:690px;
min-height: 200px;
font-size: 10px;
border: #101010 1px solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
#gallery a { color: #06F; text-decoration: none; }
#gallery a:hover { text-decoration: underline }
#gallery ul { background: #080808; }
#gallery li {
display: inline;
position: relative;
clear:none;
float: left;
width: 180px;
padding-right: 10px;
height: 200px;
text-align: left;
z-index: 0;
background: #080808;
}
#gallery li:hover { z-index: 3 }
#gallery_text {
background-color: #080808;
display: inline-block;
z-index: 10;
padding: 2px;
}
#gallery img {
margin-top: 0;
margin-left: 0;
border: #000 2px solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
width: 125px;
z-index: 1;
position: relative;
transition: width 250ms linear, margin-top 250ms linear;
-moz-transition: width 250ms linear, margin-top 250ms linear;
-webkit-transition: width 250ms linear, margin-top 250ms linear;
-o-transition: width 250ms linear, margin-top 250ms linear;
-ms-transition: width 250ms linear, margin-top 250ms linear;
}
.cover {
transition-property: z-index;
transition-duration: 250ms;
transition-delay: 25ms;
transition-timing-function: linear;
-moz-transition-property: z-index;
-moz-transition-duration: 250ms;
-moz-transition-delay: 25ms;
-moz-transition-timing-function: linear;
-webkit-transition-property: z-index;
-webkit-transition-duration: 250ms;
-webkit-transition-delay: 25ms;
-webkit-transition-timing-function: linear;
-o-transition-property: z-index;
-o-transition-duration: 250ms;
-o-transition-delay: 25ms;
-o-transition-timing-function: linear;
}
#gallery img:hover {
margin-top: -20px;
border: #000 2px solid;
position: relative;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
height: auto;
width: 250px;
}Comments appreciated.
Thanks.
-Rich
Last edited:
