One great way to use fancyBox is to open Google Maps over your webpage. If you need to have a map but don’t have enough room on the page to embed the map you can integrate fancyBox with Google Maps and open the enlarged map when you click on a link. Checkout the demo and download. Since this latest release of fancyBox is responsive the frame around the map resizes based on the size of the browser window!

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

Old FancyBox video / browser large.

Old FancyBox video / browser small (and cutoff).

New FancyBox video / browser large.

New FancyBox video / browser small (and auto resized!).

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

The website for fancyBox tells you how to add all the files to make everything work, but doesn’t have a simple, packaged together download. Since I use fanyBox on a fairly regular basis I need to have a simple package ready to go. I’ve created this, and am offering it to everyone to use.

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

The idea of creating responsive websites for real world business websites raises a few questions. The main question many designers and developers had (including myself) was “What about image galleries and sliders?”. Most websites have moved away from Flash in the last few years, many Flash animations being replaced by jQuery sliders. So how do you deal with a slider when developing a responsive website? Until now that left most people scratching their heads, but recently there have been some great responsive image sliders, galleries and plugins released.. so let me introduce my roundup of the 10 best responsive image sliders and galleries you can use on your website today(in no special order).. enjoy!

1. FlexSlider

2. Blueberry

3. Responsive Image Gallery

4. Responsive jQuery Slideshow

5. UnoSlider

6. Elastislide

7. Photoswipe

8. Responsive jQuery Carousel

9. Seamless Responsive Photo Grid

10. responsive thumbnail image gallery plugin

Webpages that don’t fit vertically in the browser window have a vertical scroll bar, pages that do fit in the browser window don’t have this scroll bar. All is great until you click from a short page to a tall page and the content ‘jumps’, in order to make room for the scroll bar. If you’re a developer you’re used to this and probably don’t even notice it. I’ve had multiple clients ask me why the page jumps and have had to explain the reasoning, just to hear “oooh that’s weeeird, isn’t it???”. No, I just explained it. Anyway, to avoid this conversation, add the following CSS to your style sheet. This code forces the vertical scroll bar, and voila, no more page jumps or calls from the client.

html { overflow-y: scroll }

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

Here’s another method some people use which you can try.

sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}

Times New Roman-based stack

Modern Georgia-based serif stack

Traditional Garamond-based serif stack

Helvetica/Arial-based sans serif stack

Verdana-based sans serif stack

Trebuchet-based sans serif stack

Impact-based sans serif stack

Monospace stack

/****************
 * From the article "8 Definitive Web Font Stacks"
 * by Michael Tuck
 * http://www.sitepoint.com/article/eight-definitive-font-stacks
 * Copyright SitePoint 2008
 */

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

The Idea

What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.

The Solution

Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to display block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% (or whatever you want to use for your project). One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.

Check out the demo, and grab the free download.

jQuery Method

The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:

<a class="image"  href="#">
	<span class="roll" ></span>
	<img class="imgborder" alt="" src="images/pic.jpg">
</a>

Here is the CSS for this method:

span.roll {
	background:url(images/mag.png) center center no-repeat #000;
	height: 346px;
	position: absolute;
	width: 347px;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000;
}

And the jQuery:

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

CSS3 Method

With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:

<a class="image"  href="#">
	<span class="rollover" ></span>
	<img class="imgborder" alt="" src="images/pic2.jpg">
</a>

Here’s the CSS, where all the magic happens:

span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 346px;
	width: 347px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

Credits:
jQuery Fade Script
Magnifying Glass Image

/* zero out margins */
*{
   margin:0;
   padding:0
}

/* this is needed for IE */
body {
   text-align:center
}

/* main container, make sure to set a width */
#container {
   width:960px;
   margin:0 auto;
   text-align:left;
}

Here’s the CSS used for the Post-it in the demo (which is a div with class “post-it”).

.post-it {
background:#fefabc;
padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px;
color: #000;
width:200px; 

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

You can customize your CSS Post-it note by changing the background color, changing how much the note is rotated, or changing the font. Here is the font I used for the demo: Gloria Hallelujah