Using Fancybox for a PopUp
Posted by Lance | Filed under Fancybox, Jquery, Tutorials, css
I know, I know, a pop up is evil… and I agree. So let’s come up with a simple unobtrusive way of showing a pop up, but without actually making one. The answer… Fancybox.
If you don’t know fancybox is a jquery highlight box that allows you to display images, ajax, video, html, flash..etc.
Recently I had a client who’s site is a bit dated; wanting to put a flyer on the home page and have it pop up on load. Well, Fancybox is a perfect way to do this without using ancient ideas.
Here’s How:
1. Download the latest version of jquery (1.3.2 @ the time of this writing)
2. Download Fancybox.
3. Add this to the head of your html page:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.6.js"></script>
I use easing as well.. this makes the transition a bit smoother and bit cooler!
4. In your HTML, you’ll need to create a div that is set to display none… in that div, you will want to create an
<div style="display: none;">
<a class="fancybox" href="mypath/myimage.jpg"></a>
</div>
5. Now, you’ll need to call the document ready class to make this world go round’. Do that by add this under the last JS call in step 3:
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox({
'overlayOpacity' : 0.8,
'overlayColor' : 'black',
'overlayShow' : true
})
});
</script>
You’ll notice, I added a few extra parameters, if you check here, you’ll see more on all the options you have.
6. Ok, last but not least, we need to make this load every time the page loads.. so to do so, we just add the onload function to the body tag. Like this:
<body onload='$("a.fancybox").trigger("click");'>
So that’s it! You now have a cool pop up that’s clean, and smooth, and you’ll never have to worry about it not showing up because a user has “pop-up’s” disabled.
L
Tags: Fancybox, fancybox tutorial, Jquery, popup with fancybox
Just sayin…
Posted by Lance | Filed under Uncategorized
FIGHT 4 CANCER Event Announced for February 20th!
Posted by Lance | Filed under Fight 4 Cancer
We’ve just begun to put all the pieces to the puzzle together for the next F4C event. As soon as I know the details are concrete and we have all the print material, I’ll make sure to post it!
Thanks for all that support this!
Lance
Tags: cancer research, f4c, john kanzius
ReVamp!
Posted by Lance | Filed under DJLance.net, Fight 4 Cancer, Off The Beat, Web Design Work, lancekorsun.com
So, It’s been quite some time since I’ve revamped all my sites.. And the honest reason is, well.. a good one. I’ve been so busy designing, creating, developing… etc; that I haven’t had anytime to work on my own stuff.
I plan to roll this out in 5 phases (i know)
1. LanceKorsun.com Site updated — and code rework notes.
2. DJLance.net Site updated with all the digital mixes I can find. Free for download too! 
3. Fight4Cancer.org Site finished and uploaded (It’s pretty cool looking)
4. Zunski Graphics — Now this is the granddaddy of them all. Because I’ve been doing so much free”lance” lately, I’ve been doing it under Zunski Graphics, not “Lance Korsun”. This is really a 2 - 4 month project, so don’t expect this until after summer.
5. All the blogs are going to point in 1 direction. That way I won’t have to update 3 or 4 blogs everyday. Obviously since there is so much on this blog, I’ll be keeping this, but absolutely rocking out an awesome design.
All in all 2010 has started off great, and there are a few projects in the pipeline that either have yet to be released, or are at beginning stages of design. One VERY cool one for all the baseball fans out there.
None the less, thanks for reading this blog, (if your still around) and be sure to keep close, it’s going to be the new bar in town!
Lance
Tags: baseball, DJLance.net, fight4cancer.org, lancekorsun.com, re-design website, zunskigraphics.com
New Site Launched
Posted by Lance | Filed under Web Design Work
I’ve just launched a clients site…
Check out:
