I think it's pretty fitting that my first post should be about my new site. But instead of just bragging about myself to the world, I thought I might make it a useful post and tell you what I learned in the process. Some of it might seem second nature to some, but I tried a few things that I hadn't before, so maybe there's a few people out there like me.
Full Screen Background Image
I have a tendency to over think things and I totally over thought this whole filling up the background thing. I did a whole tutorial on it even. Turns out all you really need is a little CSS action.
First, you need to make your background image at least 1920 pixels wide. That way, it'll fill the entire background no matter what size screen.
Then add this to your CSS:
body {
background-image: url('your-images-folder/your-background-image.jpg');
background-repeat:no-repeat;
background-position:center top;
}
background-image: url('your-images-folder/your-background-image.jpg');
background-repeat:no-repeat;
background-position:center top;
}
The no-repeat is obvious. You don't want it repeating if you want that one image to take up the whole background.
The background-position: center top; centers it and makes the top of your image flush with the top of the browser. If you don't have top there, it just centers the whole image, including the top and bottom.
Cool JQuery Rollovers
I specifically chose to try out a jQuery rollover because I love the smooth transitions it can achieve. For my own site I wanted something subtle. I chose a simple fade in, fade out. I found this tutorial to be super helpful. It even comes with source files. :) http://www.technabled.com/2009/06/how-to-amazing-rollover-effect-with.html
Basically what it does is uses a jQuery function to manipulate the CSS z-index property. I'm not, like, fluent in jQuery just yet, but this is the gist of what I understand the code to do. (I didn't exactly read the whole tutorial - just as I'm sure not everyone will read all this - because it was about 11pm and my website redesign as my final assignment was due at midnight.)
The jQuery function, which goes in the <head> basically says, "When the mouse hovers over one of the list items that belong to the thumb-over ul property, make that list item fade out. Otherwise, make it fade in."
$(function(){
$(".thumb-over a").hover(function(){
$(this).children("span").fadeOut();
}, function(){
$(this).children("span").fadeIn();
})
});
$(".thumb-over a").hover(function(){
$(this).children("span").fadeOut();
}, function(){
$(this).children("span").fadeIn();
})
});
The code you add to your own CSS then works in conjunction with this function. Using the z-index property, you're basically putting one thumbnail image on top of the other. So your thumbnail image is visible on the stage until you mouse over and your rollover image is revealed underneath via the awesome function we just talked about.
ul.thumb-over {
list-style:none;
margin: 0;
padding: 0;
}
ul.thumb-over li {
width:120px;
height:135px;
float:left;
margin: 0;
padding-bottom: 15px;
}
ul.thumb-over li a {
display:block;
position:relative;
}
ul.thumb-over li a img {
position:absolute;
z-index:1;
}
ul.thumb-over li span {
display:block;
width: 120px;
height: 135px;
position:absolute;
z-index:2;
}
list-style:none;
margin: 0;
padding: 0;
}
ul.thumb-over li {
width:120px;
height:135px;
float:left;
margin: 0;
padding-bottom: 15px;
}
ul.thumb-over li a {
display:block;
position:relative;
}
ul.thumb-over li a img {
position:absolute;
z-index:1;
}
ul.thumb-over li span {
display:block;
width: 120px;
height: 135px;
position:absolute;
z-index:2;
}
In your HTML, you have both images in the same code like this:
<img src="images/your-rollover-image.jpg"/>
<span><img src="images/your-thumbnail.jpg" /></span>
But the jQuery function only affects the image within the <span> (i.e. your thumbnail).
So, basically, the you're fading your thumbnail image in and out while your rollover image sits underneath it minding its own business. Pretty cool, eh?
Fancybox vs Lightbox
So, the previous version of my portfolio website was a one-pager. I had intended on adding a cool jQuery sliding transition from one section to another, but I discovered that Lightbox was conflicting with with my jQuery. I learned the hard way that Lightbox's Javascript files don't play nice with other Javascript files. They basically rendered my jQuery useless.
How did I fix the problem? I have to admit I didn't. Well, not in that version. Time is precious and because I knew a version 2 of my site was part of my final assignment in one of my classes this semester, I just left it. So it did Lightbox stuff, but no cool jQuery transitions.
How did I fix the problem in my version 2? To tell you the truth, I tried Greybox first. Greybox looks really sweet, but my images wouldn't load. Not until the second or third trip through the gallery. Couldn't have that. I heard that this might be because Greybox is old and came before even Lightbox. It's just something I heard, though. I can't confirm it.
Okay, so seriously, how'd I fix my problem in version 2? I found Fancybox . Problem solved. I like that it doesn't look entirely like a typical Lightbox clone. I even customized it a bit by playing with the CSS and the images it comes with.
And that's what I learned while making my new site. :)
No comments:
Post a Comment