A website navigation menu that follows the cursor, created with the jQuery framework and CSS that’s easy to implement and configure.

DEMO DOWNLOAD

The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two levels navigation and styling via css. An extra feature included in the plugin is the function that animates the page to anchor points which you can test on the single-page demo.

How to use it

Inside the head tag of your document attach the menu stylesheet (malihu.cfm.css) which holds the style for the menu and load both jquery.min.js (straight from Google) and the jquery.easing.1.3.js plugin that adds custom easing to our animations.

<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Inside the body tag, insert the menu markup

MENU

↑ Home
About me
+ Work

Recent
Web
Print


Blog
+ Interesting links

Freebies & Resources
People


Contact
+ Script info

See the post
↓ Download


malihu

You can have a single sub-level on menu options by adding an additional unordered list inside list items.

Add the menu script and plugin at the end of the document, just before the closing body tag.

<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>

<script src="malihu.jquery.cfm.js"></script>

You can easily configure the menu by changing each variable to your liking.

Enjoy

        

A simple and efficient way of dynamically resizing flash embedded objects with javascript and actionscript.

DEMO DOWNLOAD

Ever wanted to change the dimensions of a flash movie on-the-fly without refreshing the page? If yes, read on!

The idea is to wrap your flash movie within a div and embed it with swfobject making its width and height 100%. Resizing the wrapper div with javascipt is very simple and can be done with a single jquery function in the html code. The same function can also be called from flash using a simple getURL action, resulting an easy way of accomplishing the goal of dynamically resizing flash movies.

The code

Firstly we need to insert our flash movie in the html using swfobject. In our example the flash movie is resized.swf. Inside the head tag insert:

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = { 

};
var params = {
  allowFullScreen: "true",
  menu: "false",
  wmode: "window"
};
var attributes = {
  id: "resized",
  name: "resized",
  wmode: "window"
};

swfobject.embedSWF("resized.swf", "resized", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Note that we’re giving the embedded swf a width and height of 100% and for some caching speed, we load the swfobect from Google.

We also need to load the jQuery that we’ll need for our javascript function later on. We load jQuery also from Google by inserting still inside head tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

We now need some CSS for the wrapper div that’ll hold the flash movie and set its initial dimensions. For simplicity we’ve given it an id of resized.

#resized{width:550px; height:400px; margin:20px 40px;}

We insert the div in our markup and we also create a text link that we’ll use to call the jquery function.

Set width: 800px - height: 1200px

In ResizeFlash function, the first number (800) corresponds to the new width (in pixels) we want our flash to change and the second (1200) to the new height. We can also use percentages (e.g. 90%) instead of pixel values and leaving any of the 2 parameters empty will result in only resizing one dimension. For instance writing ResizeFlash(”,’1200′) will set the height of flash to 1200px while leaving its width as it is.

So know we need to insert the actual javascript function that’ll do the trick of resizing the div holder. At the very end of our document, right before the closing body tag insert:

<script>
function ResizeFlash(newWidth,newHeight){
	if(newWidth){
		$("#resized").css("width",newWidth);
	}
	if(newHeight){
		$("#resized").css("height",newHeight);
	}
}
</script>

The function checks if width and height parameters are set and if they are, gets their values and applies a new CSS style to the div.

The Flash (Actionscript 2.0)

Calling the function from within the flash is very easy with the use of the getURL action. So create the movie with flash and give it the name resized. Create a new button and give it an instance name of btn1. Then make an onRelease function in a frame in timeline and insert “javascript:ResizeFlash(”,’1000′);” as the URL inside the getURL action:

btn1.onRelease=function(){
	getURL("javascript:ResizeFlash('','1000');");
}

The button when clicked will set the flash movie height to 1000 pixels. You can see that we call the javascript function and set its parameters exactly like we do in html text links. Export the movie as resized.swf and you’re done

Note that in order to see the result, you need to upload your files on your server. if you wanna check it locally, you’ll need to change the flash player security settings (right-click swf, select “Global Settings…”).

See a working example of the tutorial
Download source files

        

A simple jQuery plugin to better style native browser tooltips.

Small in size (3kb unminified) script to enhance the look of tooltips. It works just like browser’s native tooltips with few options and styling via CSS. By default, the script applies to any element with a “title” attribute like links, paragraphs, images etc. but you can easily set it to affect only specific classes.

DEMO DOWNLOAD

The code

The styling of tooltips is done via the style-my-tooltips.css file. On this demo I used some CSS3 for rounded corners.

#s-m-t-tooltip{
	position:absolute;
	max-width:300px;
	padding:6px 8px 8px 8px;
	background:#222;
	z-index:10;
	display:inline-block; /*important*/
	/*font*/
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	line-height:16px;
	color:#fff;
	/*css3 rounded corners*/
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

The jquery.style-my-tooltips.js file

(function($){
 $.fn.style_my_tooltips = function(options) {
	var defaults = {
		tip_follows_cursor: "on",
		tip_delay_time: 1000
	};
	var options = $.extend(defaults, options);
	$("body").append("


"); //create the tooltip container
	smtTip=$("#s-m-t-tooltip");
	smtTip.hide(); //hide it
    return this.each(function() {
		function smtMouseMove(e){
			smtMouseCoordsX=e.pageX;
			smtMouseCoordsY=e.pageY;
			smtTipPosition();
		}
		function smtTipPosition(){
			var cursor_tip_margin_x=0; //horizontal space between the cursor and tooltip
			var cursor_tip_margin_y=24; //vertical space between the cursor and tooltip
			var leftOffset=smtMouseCoordsX+cursor_tip_margin_x+$(smtTip).outerWidth();
			var topOffset=smtMouseCoordsY+cursor_tip_margin_y+$(smtTip).outerHeight();
			if(leftOffset<=$(window).width()){
				smtTip.css("left",smtMouseCoordsX+cursor_tip_margin_x);
			} else {
				var thePosX=smtMouseCoordsX-(cursor_tip_margin_x)-$(smtTip).width();
				smtTip.css("left",thePosX);
			}
			if(topOffset<=$(window).height()){
				smtTip.css("top",smtMouseCoordsY+cursor_tip_margin_y);
			} else {
				var thePosY=smtMouseCoordsY-(cursor_tip_margin_y)-$(smtTip).height();
				smtTip.css("top",thePosY);
			}
		}
		$(this).hover(function(e) {
			// mouseover
			var $this=$(this);
			$this.data("smtTitle",$this.attr("title")); //store title
			var theTitle=$this.data("smtTitle");
			$this.attr("title",""); //remove title to prevent native tooltip showing
			smtTip.empty().append(theTitle).hide(); //set tooltip text and hide it
			smtTip_delay = setInterval(smtTip_fadeIn, options.tip_delay_time); //set tooltip delay
			if(options.tip_follows_cursor=="off"){
				smtMouseMove(e);
			} else {
				$(document).bind("mousemove", function(event){
					smtMouseMove(event);
				});
			}
		}, function() {
			// mouseout
			var $this=$(this);
			if(options.tip_follows_cursor!="off"){
				$(document).unbind("mousemove");
			}
			clearInterval(smtTip_delay);
			if(smtTip.is(":animated")){
				smtTip.hide();
			} else {
				smtTip.fadeTo("fast",0);
			}
			$this.attr("title",$this.data("smtTitle")); //add back title
		});
		$(this).click(function() {
			var $this=$(this);
			$this.attr("title",$this.data("smtTitle")); //add back title
		});
		function smtTip_fadeIn(){
			smtTip.fadeTo("fast",1,function(){clearInterval(smtTip_delay);});
		}
	});
 };
})(jQuery);

How to use it

All you need is to download the .zip file and extract the jquery.style-my-tooltips.js and style-my-tooltips.css on the same directory of your document, on which you must insert the following code inside the head tag.

<link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.style-my-tooltips.js" type="text/javascript"></script>
<script>
$().ready(function() {
	$("[title]").style_my_tooltips({
		tip_follows_cursor: "on", //on/off
		tip_delay_time: 1000 //milliseconds
	});
});
</script>

The code above affects all elements with a title attribute. If you want to apply the custom tooltip on elements with title that have a specific class (e.g. .myClassName) you change the selector as follows:

$(".myClassName[title]").style_my_tooltips({
	tip_follows_cursor: "on", //on/off
	tip_delay_time: 1000 //milliseconds
});

You can set the tooltip delay time and behavior via the two options.

Have fun!

        

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

DEMO DEMO 2 DOWNLOAD

SIDEWAYS image gallery is made by implementation of some previous scripts/tutorials posted on this blog and some (minor) CSS3. It utilizes the jQuery UI (jQuery User Interface), jQuery Easing by George McGinley Smith and Brandon Aaron’s jquery mousewheel plugin.

Changelog

20/11/2010

• Minor code optimization
• Loading new image with different dimensions updates correctly
• Clicking on final image loads the first one (looping)
• Added original view mode option (no image scale)
• Change default view mode quickly by setting $defaultViewMode variable in the script
• Fixed conflict when placing links inside thumbnail panel

19/10/2010

• Added second script that utilizes native browser scrollbars and click to open panel mode (better suited for touch devices)

26/9/2010

• Script and code have been optimized significantly

The code

The css with some CSS3 rounded corners, shadows etc. and few custom fonts

html,body{height:100%}
body {margin:0; padding:0; background:#333 url(sw_page_bg.png); overflow:hidden; font-family:Helvetica, Arial, sans-serif; font-size:16px;}
/* custom fonts */
@font-face {
	font-family: 'eurof55-webfont';
	src: url('fonts/eurof55-webfont.eot');
	src: local('☺'), url('fonts/eurof55-webfont.woff') format('woff'), url('fonts/eurof55-webfont.ttf') format('truetype'), url('fonts/eurof55-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'eurof35-webfont';
	src: url('fonts/eurof35-webfont.eot');
	src: local('☺'), url('fonts/eurof35-webfont.woff') format('woff'), url('fonts/eurof35-webfont.ttf') format('truetype'), url('fonts/eurof35-webfont.svg#webfont8xigBfG2') format('svg');
}
@font-face {
	font-family: 'graublauweb-webfont';
	src: url('fonts/graublauweb-webfont.eot');
	src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
.clear{clear:both;}
a:link,a:visited,a:hover{color:#ddd;}
a:hover{color:#fff; text-decoration:none;}
#bg{position:fixed; left:585px; top:0; width:100%; height:100%;}
#bgimg{display:none; cursor:pointer; -ms-interpolation-mode: bicubic;} /* special IE fix for resized images */
#preloader{position:absolute; z-index:2; width:140px; padding:20px; top:20px; left:50px; background:#000; color:#666; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:16px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#preloader img{margin-right:20px;}
#toolbar{display:inline-block; padding:4px 15px; margin:20px 15px; background:#262626 url(sw_btn_bg.png) repeat-x; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; font-size:12px; color:#fff; cursor:pointer;}
#outer_container{position:relative; margin:0; width:700px; padding:0 100px 0 0; z-index:2; background:url(empty.gif);} /* fucking IE needs a background value to understand hover area */
#customScrollBox{position:relative; overflow:hidden; background:url(sw_l_bg.png) repeat-y;}
#customScrollBox .container{position:relative; width:585px; top:0; float:left;}
#customScrollBox .content{clear:both;}
#customScrollBox .content h1{padding:5px; margin:10px; color:#fff; font-family:eurof55-webfont, Helvetica, Arial, sans-serif; font-size:48px;}
#customScrollBox .content h2{padding:5px; margin:10px 10px 0 10px; color:#fff; font-family:eurof35-webfont, Helvetica, Arial, sans-serif; font-size:24px;}
#customScrollBox .content p{padding:5px; margin:0 10px 10px 10px; color:#ddd; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif; line-height:26px;}
.light{font-family:eurof35-webfont, Helvetica, Arial, sans-serif;}
.grey{color:#999;}
.lightgrey{color:#ddd;}
.s36{font-size:36px;}
.s24{font-size:24px;}
#customScrollBox a.thumb_link{position:relative; margin:0 0 1px 1px; display:block; float:left;}
#customScrollBox img{border:none;}
#customScrollBox a.thumb_link .selected{position:absolute; top:0; left:0; width:145px; height:91px; background:url(sw_thumb_selected.png) no-repeat; display:none;}
#dragger_container{position:relative; width:30px; height:580px; float:left; margin:10px 0 0 0; background:url(sw_dragger_bg.png) repeat-y center;}
#dragger{position:absolute; width:30px; height:59px; background:url(round_custom_scrollbar_bg.png) no-repeat center center; cursor:pointer;}
#arrow_indicator{position:absolute; z-index:1; width:50px; padding:10px; top:50%; margin-top:-25px; left:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none;}
#nextimage_tip{position:fixed; z-index:1; padding:0 20px; line-height:40px; color:#fff; height:40px; top:50%; margin-top:-20px; right:20px; background:url(sw_transparent_black_bg.png); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; display:none; font-family:graublauweb-webfont, Helvetica, Arial, sans-serif;}
.with_border{border:1px solid #000;}
.with_shadow{-moz-box-shadow:0 0 40px #000; -webkit-box-shadow:0 0 40px #000; box-shadow:0 0 40px #000;}

The jQuery scripts and plugins inside head tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>

The full javascript code is inserted in the end of the document, just before the closing body tag.

<script>
	//set default view mode
	$defaultViewMode="full"; //full (fullscreen background), fit (fit to window), original (no scale)
	//cache vars
	$bg=$("#bg");
	$bgimg=$("#bg #bgimg");
	$preloader=$("#preloader");
	$outer_container=$("#outer_container");
	$outer_container_a=$("#outer_container a.thumb_link");
	$toolbar=$("#toolbar");
	$nextimage_tip=$("#nextimage_tip");

$(window).load(function() {
	$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
	ImageViewMode($toolbar.data("imageViewMode"));
	//cache vars
	$customScrollBox=$("#customScrollBox");
	$customScrollBox_container=$("#customScrollBox .container");
	$customScrollBox_content=$("#customScrollBox .content");
	$dragger_container=$("#dragger_container");
	$dragger=$("#dragger");

	CustomScroller();

	function CustomScroller(){
		outerMargin=0;
		innerMargin=20;
		$customScrollBox.height($(window).height()-outerMargin);
		$dragger_container.height($(window).height()-innerMargin);
		visibleHeight=$(window).height()-outerMargin;
		if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height
			$dragger_container,$dragger.css("display","block");
			totalContent=$customScrollBox_content.height();
			draggerContainerHeight=$(window).height()-innerMargin;
			animSpeed=400; //animation speed
			easeType="easeOutCirc"; //easing type
			bottomSpace=1.05; //bottom scrolling space
			targY=0;
			draggerHeight=$dragger.height();
			$dragger.draggable({
				axis: "y",
				containment: "parent",
				drag: function(event, ui) {
					Scroll();
				},
				stop: function(event, ui) {
					DraggerOut();
				}
			});

			//scrollbar click
			$dragger_container.click(function(e) {
				var mouseCoord=(e.pageY - $(this).offset().top);
				var targetPos=mouseCoord+$dragger.height();
				if(targetPos<draggerContainerHeight){
					$dragger.css("top",mouseCoord);
					Scroll();
				} else {
					$dragger.css("top",draggerContainerHeight-$dragger.height());
					Scroll();
				}
			});

			//mousewheel
			$(function($) {
				$customScrollBox.bind("mousewheel", function(event, delta) {
					vel = Math.abs(delta*10);
					$dragger.css("top", $dragger.position().top-(delta*vel));
					Scroll();
					if($dragger.position().top<0){
						$dragger.css("top", 0);
						$customScrollBox_container.stop();
						Scroll();
					}
					if($dragger.position().top>draggerContainerHeight-$dragger.height()){
						$dragger.css("top", draggerContainerHeight-$dragger.height());
						$customScrollBox_container.stop();
						Scroll();
					}
					return false;
				});
			});

			function Scroll(){
				var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight);
				var draggerY=$dragger.position().top;
				targY=-draggerY*scrollAmount;
				var thePos=$customScrollBox_container.position().top-targY;
				$customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing
			}

			//dragger hover
			$dragger.mouseup(function(){
				DraggerOut();
			}).mousedown(function(){
				DraggerOver();
			});

			function DraggerOver(){
				$dragger.css("background", "url(round_custom_scrollbar_bg_over.png)");
			}

			function DraggerOut(){
				$dragger.css("background", "url(round_custom_scrollbar_bg.png)");
			}
		} else { //hide custom scrollbar if content is short
			$dragger,$dragger_container.css("display","none");
		}
	}

	//resize browser window functions
	$(window).resize(function() {
		FullScreenBackground("#bgimg"); //scale bg image
		$dragger.css("top",0); //reset content scroll
		$customScrollBox_container.css("top",0);
		$customScrollBox.unbind("mousewheel");
		CustomScroller();
	});

	LargeImageLoad($bgimg);
});

	//loading bg image
	$bgimg.load(function() {
		LargeImageLoad($(this));
	});

	function LargeImageLoad($this){
		$preloader.fadeOut("fast"); //hide preloader
		$this.removeAttr("width").removeAttr("height").css({ width: "", height: "" }); //lose all previous dimensions in order to rescale new image data
		$bg.data("originalImageWidth",$this.width()).data("originalImageHeight",$this.height());
		if($bg.data("newTitle")){
			$this.attr("title",$bg.data("newTitle")); //set new image title attribute
		}
		FullScreenBackground($this); //scale new image
		$bg.data("nextImage",$($outer_container.data("selectedThumb")).next().attr("href")); //get and store next image
		if(typeof itemIndex!="undefined"){
			if(itemIndex==lastItemIndex){ //check if it is the last image
				$bg.data("lastImageReached","Y");
				$bg.data("nextImage",$outer_container_a.first().attr("href")); //get and store next image
			} else {
				$bg.data("lastImageReached","N");
			}
		} else {
			$bg.data("lastImageReached","N");
		}
		$this.fadeIn("slow"); //fadein background image
		if($bg.data("nextImage") || $bg.data("lastImageReached")=="Y"){ //don't close thumbs pane on 1st load
			SlidePanels("close"); //close the left pane
		}
		NextImageTip();
	}

	//slide in/out left pane
	$outer_container.hover(
		function(){ //mouse over
			SlidePanels("open");
		},
		function(){ //mouse out
			SlidePanels("close");
		}
	);

	//Clicking on thumbnail changes the background image
	$outer_container_a.click(function(event){
		event.preventDefault();
		var $this=this;
		$bgimg.css("display","none");
		$preloader.fadeIn("fast"); //show preloader
		//style clicked thumbnail
		$outer_container_a.each(function() {
    		$(this).children(".selected").css("display","none");
  		});
		$(this).children(".selected").css("display","block");
		//get and store next image and selected thumb
		$outer_container.data("selectedThumb",$this);
		$bg.data("nextImage",$(this).next().attr("href"));
		$bg.data("newTitle",$(this).children("img").attr("title")); //get and store new image title attribute
		itemIndex=getIndex($this); //get clicked item index
		lastItemIndex=($outer_container_a.length)-1; //get last item index
		$bgimg.attr("src", "").attr("src", $this); //switch image
	}); 

	//clicking on large image loads the next one
	$bgimg.click(function(event){
		var $this=$(this);
		if($bg.data("nextImage")){ //if next image data is stored
			$this.css("display","none");
			$preloader.fadeIn("fast"); //show preloader
			$($outer_container.data("selectedThumb")).children(".selected").css("display","none"); //deselect thumb
			if($bg.data("lastImageReached")!="Y"){
				$($outer_container.data("selectedThumb")).next().children(".selected").css("display","block"); //select new thumb
			} else {
				$outer_container_a.first().children(".selected").css("display","block"); //select new thumb - first
			}
			//store new selected thumb
			var selThumb=$outer_container.data("selectedThumb");
			if($bg.data("lastImageReached")!="Y"){
				$outer_container.data("selectedThumb",$(selThumb).next());
			} else {
				$outer_container.data("selectedThumb",$outer_container_a.first());
			}
			$bg.data("newTitle",$($outer_container.data("selectedThumb")).children("img").attr("title")); //get and store new image title attribute
			if($bg.data("lastImageReached")!="Y"){
				itemIndex++;
			} else {
				itemIndex=0;
			}
			$this.attr("src", "").attr("src", $bg.data("nextImage")); //switch image
		}
	});

	//function to get element index (fuck you IE!)
	function getIndex(theItem){
		for ( var i = 0, length = $outer_container_a.length; i < length; i++ ) {
			if ( $outer_container_a[i] === theItem ) {
				return i;
			}
		}
	}

	//toolbar (image view mode button) hover
	$toolbar.hover(
		function(){ //mouse over
			$(this).stop().fadeTo("fast",1);
		},
		function(){ //mouse out
			$(this).stop().fadeTo("fast",0.8);
		}
	);
	$toolbar.stop().fadeTo("fast",0.8); //set its original state

	//Clicking on toolbar changes the image view mode
	$toolbar.click(function(event){
		if($toolbar.data("imageViewMode")=="full"){
			ImageViewMode("fit");
		} else if($toolbar.data("imageViewMode")=="fit") {
			ImageViewMode("original");
		} else if($toolbar.data("imageViewMode")=="original"){
			ImageViewMode("full");
		}
	});

	//next image balloon tip
	function NextImageTip(){
		if($bg.data("nextImage")){ //check if this is the first image
			$nextimage_tip.stop().css("right",20).fadeIn("fast").fadeOut(2000,"easeInExpo",function(){$nextimage_tip.css("right",$(window).width());});
		}
	}

	//slide in/out left pane function
	function SlidePanels(action){
		var speed=900;
		var easing="easeInOutExpo";
		if(action=="open"){
			$("#arrow_indicator").fadeTo("fast",0);
			$outer_container.stop().animate({left: 0}, speed,easing);
			$bg.stop().animate({left: 585}, speed,easing);
		} else {
			$outer_container.stop().animate({left: -710}, speed,easing);
			$bg.stop().animate({left: 0}, speed,easing,function(){$("#arrow_indicator").fadeTo("fast",1);});
		}
	}

//Image scale function
function FullScreenBackground(theItem){
	var winWidth=$(window).width();
	var winHeight=$(window).height();
	var imageWidth=$(theItem).width();
	var imageHeight=$(theItem).height();
	if($toolbar.data("imageViewMode")!="original"){ //scale
		$(theItem).removeClass("with_border").removeClass("with_shadow"); //remove extra styles of orininal view mode
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;
		if($toolbar.data("imageViewMode")!="fit"){ //image view mode: full
			if ((winHeight / winWidth) < picHeight) {
				$(theItem).css("width",winWidth).css("height",picHeight*winWidth);
			} else {
				$(theItem).css("height",winHeight).css("width",picWidth*winHeight);
			};
		} else { //image view mode: fit
			if ((winHeight / winWidth) > picHeight) {
				$(theItem).css("width",winWidth).css("height",picHeight*winWidth);
			} else {
				$(theItem).css("height",winHeight).css("width",picWidth*winHeight);
			};
		}
		//center it
		$(theItem).css("margin-left",((winWidth - $(theItem).width())/2)).css("margin-top",((winHeight - $(theItem).height())/2));
	} else { //no scale
		//add extra styles for orininal view mode
		$(theItem).addClass("with_border").addClass("with_shadow");
		//set original dimensions
		$(theItem).css("width",$bg.data("originalImageWidth")).css("height",$bg.data("originalImageHeight"));
		//center it
		$(theItem).css("margin-left",((winWidth-$(theItem).outerWidth())/2)).css("margin-top",((winHeight-$(theItem).outerHeight())/2));
	}
}

//image view mode function - full or fit
function ImageViewMode(theMode){
	$toolbar.data("imageViewMode", theMode); //store new mode
	FullScreenBackground($bgimg); //scale bg image
	//re-style button
	if(theMode=="full"){
		$toolbar.html("IMAGE VIEW MODE › FULL");
	} else if(theMode=="fit") {
		$toolbar.html("IMAGE VIEW MODE › FIT");
	} else {
		$toolbar.html("IMAGE VIEW MODE › ORIGINAL");
	}
}

//preload script images
var images=["ajax-loader_dark.gif","round_custom_scrollbar_bg_over.png"];
$.each(images, function(i) {
  images[i] = new Image();
  images[i].src = this;
});
</script>

The markup (loads of it for our demo)

SIDEWAYS JQUERY FULLSCREEN IMAGE GALLERY

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS. Full post and download files.



            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            


Created by malihu and his cats on a hot summer day.








    
LOADING...

Click for next image

That’s about it. As with every script and tutorial on this blog, you can use it on any project you choose (yes, even commercial!), develop it further or just make it better. The images used on the demo are artwork of Tobias Roetsch. Have fun!

        

A fullscreen image gallery made with jQuery and CSS.

DEMO DOWNLOAD

Simple and elegant image gallery made by a combination of some previous scripts/tutorials posted on this blog.

As of 23/01/2011 the gallery features next/previous image functionality via buttons and keyboard arrows. Thumbnails scrolling function has been optimized significantly. The demo and .zip files are updated.

The code

The css with some custom font via Google font API

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
html,body{height:100%;}
*{outline:none;}
body{margin:0px; padding:0px; background:#000;}
#toolbar{position:fixed; z-index:3; right:10px; top:10px; padding:5px; background:url(fs_img_g_bg.png);}
#toolbar img{border:none;}
#img_title{position:fixed; z-index:3; left:10px; top:10px; padding:10px; background:url(fs_img_g_bg.png); color:#FFF; font-family:'Josefin Sans Std Light', arial, serif; font-size:24px; text-transform:uppercase;}
#bg{position:fixed; z-index:1; overflow:hidden; width:100%; height:100%;}
#bgimg{display:none; -ms-interpolation-mode: bicubic;}
#preloader{position:relative; z-index:3; width:32px; padding:20px; top:80px; margin:auto; background:#000;}
#thumbnails_wrapper{z-index:2; position:fixed; bottom:0; width:100%; background:url(empty.gif); /* stupid ie needs a background value to understand hover area */}
#outer_container{position:relative; padding:0; width:100%; margin:40px auto;}
#outer_container .thumbScroller{position:relative; overflow:hidden; background:url(fs_img_g_bg.png);}
#outer_container .thumbScroller, #outer_container .thumbScroller .container, #outer_container .thumbScroller .content{height:170px;}
#outer_container .thumbScroller .container{position:relative; left:0;}
#outer_container .thumbScroller .content{float:left;}
#outer_container .thumbScroller .content div{margin:5px; height:100%;}
#outer_container .thumbScroller img{border:5px solid #fff;}
#outer_container .thumbScroller .content div a{display:block; padding:5px;}
.nextImageBtn, .prevImageBtn{display:block; position:absolute; width:50px; height:50px; top:50%; margin:-25px 10px 0 10px; z-index:3; filter:alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity:0.4; opacity:0.4;}
.nextImageBtn:hover,.prevImageBtn:hover{filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8;}
.nextImageBtn{right:0; background:#000 url(nextImgBtn.png) center center no-repeat;}
.prevImageBtn{background:#000 url(prevImgBtn.png) center center no-repeat;}

The jQuery scripts and plugins inside head tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

The full javascript code is inserted in the end of the document, just before the closing body tag.

<script>
//config
//set default images view mode
$defaultViewMode="full"; //full, normal, original
$tsMargin=30; //first and last thumbnail margin (for better cursor interaction)
$scrollEasing=600; //scroll easing amount (0 for no easing)
$scrollEasingType="easeOutCirc"; //scroll easing type
$thumbnailsContainerOpacity=0.8; //thumbnails area default opacity
$thumbnailsContainerMouseOutOpacity=0; //thumbnails area opacity on mouse out
$thumbnailsOpacity=0.6; //thumbnails default opacity
$nextPrevBtnsInitState="show"; //next/previous image buttons initial state ("hide" or "show")
$keyboardNavigation="on"; //enable/disable keyboard navigation ("on" or "off")

//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper");
$outer_container=$("#outer_container");
$thumbScroller=$(".thumbScroller");
$thumbScroller_container=$(".thumbScroller .container");
$thumbScroller_content=$(".thumbScroller .content");
$thumbScroller_thumb=$(".thumbScroller .thumb");
$preloader=$("#preloader");
$toolbar=$("#toolbar");
$toolbar_a=$("#toolbar a");
$bgimg=$("#bgimg");
$img_title=$("#img_title");
$nextImageBtn=$(".nextImageBtn");
$prevImageBtn=$(".prevImageBtn");

$(window).load(function() {
	$toolbar.data("imageViewMode",$defaultViewMode); //default view mode
	if($defaultViewMode=="full"){
		$toolbar_a.html("").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$toolbar_a.html("").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
	ShowHideNextPrev($nextPrevBtnsInitState);
	//thumbnail scroller
	$thumbScroller_container.css("marginLeft",$tsMargin+"px"); //add margin
	sliderLeft=$thumbScroller_container.position().left;
	sliderWidth=$outer_container.width();
	$thumbScroller.css("width",sliderWidth);
	var totalContent=0;
	fadeSpeed=200;

	var $the_outer_container=document.getElementById("outer_container");
	var $placement=findPos($the_outer_container);

	$thumbScroller_content.each(function () {
		var $this=$(this);
		totalContent+=$this.innerWidth();
		$thumbScroller_container.css("width",totalContent);
		$this.children().children().children(".thumb").fadeTo(fadeSpeed, $thumbnailsOpacity);
	});

	$thumbScroller.mousemove(function(e){
		if($thumbScroller_container.width()>sliderWidth){
	  		var mouseCoords=(e.pageX - $placement[1]);
	  		var mousePercentX=mouseCoords/sliderWidth;
	  		var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
	  		var thePosA=mouseCoords-destX;
	  		var thePosB=destX-mouseCoords;
	  		if(mouseCoords>destX){
		  		$thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
	  		} else if(mouseCoords<destX){
		  		$thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
	  		} else {
				$thumbScroller_container.stop();
	  		}
		}
	});

	$thumbnails_wrapper.fadeTo(fadeSpeed, $thumbnailsContainerOpacity);
	$thumbnails_wrapper.hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo("slow", 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo("slow", $thumbnailsContainerMouseOutOpacity);
		}
	);

	$thumbScroller_thumb.hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, $thumbnailsOpacity);
		}
	);

	//on window resize scale image and reset thumbnail scroller
	$(window).resize(function() {
		FullScreenBackground("#bgimg",$bgimg.data("newImageW"),$bgimg.data("newImageH"));
		$thumbScroller_container.stop().animate({left: sliderLeft}, 400,"easeOutCirc");
		var newWidth=$outer_container.width();
		$thumbScroller.css("width",newWidth);
		sliderWidth=newWidth;
		$placement=findPos($the_outer_container);
	});

	//load 1st image
	var the1stImg = new Image();
	the1stImg.onload = CreateDelegate(the1stImg, theNewImg_onload);
	the1stImg.src = $bgimg.attr("src");
	$outer_container.data("nextImage",$(".content").first().next().find("a").attr("href"));
	$outer_container.data("prevImage",$(".content").last().find("a").attr("href"));
});

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
	$this.fadeOut("fast",function(){
		$this.attr("src", "").attr("src", imgSrc); //change image source
		FullScreenBackground($this,imageWidth,imageHeight); //scale background image
		$preloader.fadeOut("fast",function(){$this.fadeIn("slow");});
		var imageTitle=$img_title.data("imageTitle");
		if(imageTitle){
			$this.attr("alt", imageTitle).attr("title", imageTitle);
			$img_title.fadeOut("fast",function(){
				$img_title.html(imageTitle).fadeIn();
			});
		} else {
			$img_title.fadeOut("fast",function(){
				$img_title.html($this.attr("title")).fadeIn();
			});
		}
	});
}

//mouseover toolbar
if($toolbar.css("display")!="none"){
	$toolbar.fadeTo("fast", 0.4);
}
$toolbar.hover(
	function(){ //mouse over
		var $this=$(this);
		$this.stop().fadeTo("fast", 1);
	},
	function(){ //mouse out
		var $this=$(this);
		$this.stop().fadeTo("fast", 0.4);
	}
);

//Clicking on thumbnail changes the background image
$("#outer_container a").click(function(event){
	event.preventDefault();
	var $this=$(this);
	GetNextPrevImages($this);
	GetImageTitle($this);
	SwitchImage(this);
	ShowHideNextPrev("show");
}); 

//next/prev images buttons
$nextImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("nextImage"));
	var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

$prevImageBtn.click(function(event){
	event.preventDefault();
	SwitchImage($outer_container.data("prevImage"));
	var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
	GetNextPrevImages($this);
	GetImageTitle($this);
});

//next/prev images keyboard arrows
if($keyboardNavigation=="on"){
$(document).keydown(function(ev) {
    if(ev.keyCode == 39) { //right arrow
        SwitchImage($outer_container.data("nextImage"));
		var $this=$("#outer_container a[href='"+$outer_container.data("nextImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    } else if(ev.keyCode == 37) { //left arrow
        SwitchImage($outer_container.data("prevImage"));
		var $this=$("#outer_container a[href='"+$outer_container.data("prevImage")+"']");
		GetNextPrevImages($this);
		GetImageTitle($this);
        return false; // don't execute the default action (scrolling or whatever)
    }
});
}

function ShowHideNextPrev(state){
	if(state=="hide"){
		$nextImageBtn.fadeOut();
		$prevImageBtn.fadeOut();
	} else {
		$nextImageBtn.fadeIn();
		$prevImageBtn.fadeIn();
	}
}

//get image title
function GetImageTitle(elem){
	var title_attr=elem.children("img").attr("title"); //get image title attribute
	$img_title.data("imageTitle", title_attr); //store image title
}

//get next/prev images
function GetNextPrevImages(curr){
	var nextImage=curr.parents(".content").next().find("a").attr("href");
	if(nextImage==null){ //if last image, next is first
		var nextImage=$(".content").first().find("a").attr("href");
	}
	$outer_container.data("nextImage",nextImage);
	var prevImage=curr.parents(".content").prev().find("a").attr("href");
	if(prevImage==null){ //if first image, previous is last
		var prevImage=$(".content").last().find("a").attr("href");
	}
	$outer_container.data("prevImage",prevImage);
}

//switch image
function SwitchImage(img){
	$preloader.fadeIn("fast"); //show preloader
	var theNewImg = new Image();
	theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload);
	theNewImg.src = img;
}

//get new image dimensions
function CreateDelegate(contextObject, delegateMethod){
	return function(){
		return delegateMethod.apply(contextObject, arguments);
	}
}

//new image on load
function theNewImg_onload(){
	$bgimg.data("newImageW",this.width).data("newImageH",this.height);
	BackgroundLoad($bgimg,this.width,this.height,this.src);
}

//Image scale function
function FullScreenBackground(theItem,imageWidth,imageHeight){
	var winWidth=$(window).width();
	var winHeight=$(window).height();
	if($toolbar.data("imageViewMode")!="original"){ //scale
		var picHeight = imageHeight / imageWidth;
		var picWidth = imageWidth / imageHeight;
		if($toolbar.data("imageViewMode")=="full"){ //fullscreen size image mode
			if ((winHeight / winWidth) < picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("width",picWidth*winHeight);
			};
		} else { //normal size image mode
			if ((winHeight / winWidth) > picHeight) {
				$(theItem).attr("width",winWidth);
				$(theItem).attr("height",picHeight*winWidth);
			} else {
				$(theItem).attr("height",winHeight);
				$(theItem).attr("width",picWidth*winHeight);
			};
		}
		$(theItem).css("margin-left",(winWidth-$(theItem).width())/2);
		$(theItem).css("margin-top",(winHeight-$(theItem).height())/2);
	} else { //no scale
		$(theItem).attr("width",imageWidth);
		$(theItem).attr("height",imageHeight);
		$(theItem).css("margin-left",(winWidth-imageWidth)/2);
		$(theItem).css("margin-top",(winHeight-imageHeight)/2);
	}
}

//Image view mode function - fullscreen or normal size
function ImageViewMode(theMode){
	$toolbar.data("imageViewMode", theMode);
	FullScreenBackground($bgimg,$bgimg.data("newImageW"),$bgimg.data("newImageH"));
	if(theMode=="full"){
		$toolbar_a.html("").attr("onClick", "ImageViewMode('normal');return false").attr("title", "Restore");
	} else {
		$toolbar_a.html("").attr("onClick", "ImageViewMode('full');return false").attr("title", "Maximize");
	}
}

//function to find element Position
	function findPos(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curtop, curleft];
	}
</script>

The markup

The $defaultViewMode variable allows you to change the default images view mode. You can set the value to:

• normal – images fit in window (all image data is visible)
• full – images expand to window size (fullscreen)
• original – images keep their original sizes (centered on the screen)

The rest of configuration options you can set within the script are:

• $tsMargin – first and last thumbnail margin (for better cursor interaction)
• $scrollEasing – scroll easing amount (0 for no easing)
• $scrollEasingType – scroll easing type
• $thumbnailsContainerOpacity – thumbnails area default opacity
• $thumbnailsContainerMouseOutOpacity – thumbnails area opacity on mouse out
• $thumbnailsOpacity – thumbnails default opacity
• $nextPrevBtnsInitState – next/previous image buttons initial state (“hide” or “show”)
• $keyboardNavigation – enable/disable keyboard navigation (“on” or “off”)

That’s all! The images used on the demo are artwork of Tobias Roetsch. You’re free to use/modify this script however you like (donations are welcome)

        

A quick guide on how to use CSS @font-face in order to get custom fonts on any web page.

DEMO DOWNLOAD

Firstly, you’ll need to find a nice-free font in order to use it on your web page. Graublau Sans Web by Georg Seifert is a perfect font for our example since it’s free and supports many languages. Download the font on your drive and continue…

In order to support as many as possible browsers and devices, we need to first create and then use different formats of our font (.ttf/.otf, .eot, .woff, .svg etc.). There are numerous tools to convert fonts but the best I’ve come across is FontSquirrel @font-face Generator. A free and pretty fast online tool with many options and features that generates all necessary formats from a single font.

After you convert the font in all formats, create a directory named “fonts” and copy all the fonts formats inside it. Create a new html document in the root directory of your web site (on the same level where the fonts folder resides) and insert the following CSS:

@font-face {
	font-family: 'graublauweb-webfont';
	src: url('fonts/graublauweb-webfont.eot');
	src: local('☺'), url('fonts/graublauweb-webfont.woff') format('woff'), url('fonts/graublauweb-webfont.ttf') format('truetype'), url('fonts/graublauweb-webfont.svg#webfont8xigBfG2') format('svg');
}
h1 {
	font-family:"graublauweb-webfont", Helvetica, Arial, sans-serif;
	font-size:48px;
}

@font-face loads all necessary formats and we set the font-family the same way we would do normally.

It’s best not to use the original font name (e.g. GraublauWeb) in font-family to prevent any user that happens to have the font locally installed, to load it from his/her machine (CSS issue). We need and should load our font that resides on our web server and not on user’s pc, so remember to use different names (e.g. graublauweb-webfont).

Next we insert our simple markup:

This is a heading with some custom font.

That’s about it! Test the page in a browser to see the results.

        

A highly customizable, xml-driven dynamic flash slideshow/banner rotator with simple navigation and auto-play feature.

DEMO DOWNLOAD

Very easy to customize via SWFObject variables and XML attributes.
Features include:

• Set slideshow dimensions via CSS without editing the .fla file)
• Set the directory of the images and XML file through swfobject variable
• Set transition types, time, speed etc. via swfobject variables
• Customize slideshow appearance (images scaling, colors, borders, radius corners etc.) via swfobject variables
• Customize each slide appearance (text color, background, border, radius corners etc.) through XML attributes

This flash slideshow utilizes GreenSock custom classes (files included in the download .zip)

Have fun

        

Set a flash fullscreen background with html content on top and customize it within html via SWFObject variables.

DEMO DOWNLOAD

Why a flash background? Because we can and cause all those cool things flash does.

The code

Load the SWFObject that’ll embed the flash straight from Google

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>

The css with some custom fonts via Google font API

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light);
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
*{margin:0; padding:0; border:0;}
html,body{width:100%; height:100%;}
body{background:#000;}
#bg{position:fixed; left:0; top:0; z-index:1;}
#container{position:absolute; width:100%; height:100%; min-width:620px; z-index:2;}
#container .content{width:540px; color:#fff; margin:40px;}
#container .content h1{font-family:'Josefin Sans Std Light', arial, serif; font-size:48px;}
#container .content p{font-family:'Reenie Beanie', arial, serif; font-size:24px; margin:30px 0;}
#container .content p.alt{color:#000; background:#fff; padding:5px 10px;}
#container .content img{border:5px solid #fff;}

The markup

This is html content placed above flash

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate consequat massa, non ultrices enim aliquam vitae. Proin at ante ac nisl ultricies dignissim. Ut enim nunc, malesuada eu cursus sit amet, ultricies sit amet nunc. Aliquam rutrum mi nec eros cursus hendrerit.

        
Sed dui turpis, accumsan ac porta nec, mollis venenatis mi. Integer eget elit turpis, non congue nulla. Nullam blandit iaculis diam, sit amet gravida sem tempor in.





<script type="text/javascript">
var flashvars = {
  myFile: "a_bg_img.jpg", //set the file URL that flash will load
  myFileType: "image", //set filetype (values: image, flash)
  loadEffect: "Fade" //set load effect - options: "Fade", "Wipe", "Iris", "PixelDissolve", "Photo"
};
var params = {
  id: "bg",
  name: "bg",
  wmode: "transparent",
  menu: "false"
};
var attributes = {
  id: "bg",
  name: "bg",
  wmode: "transparent",
  menu: "false"
};

swfobject.embedSWF("bg.swf", "bg", "100%", "100%", "10.0.45.2","expressInstall.swf", flashvars, params, attributes);
</script>

Note the 3 variables (“myFile”, “myFileType” and “loadEffect”) inside SWFObject script. You can set the file that’ll be loaded in flash (“myFile”), set its file-type (“myFileType”) with values “image” or “flash” accordingly and the loading effect by setting an option in “loadEffect” variable. The available options are:

• “Fade” Fades in background
• “Wipe” Reveals background with a diagonal mask
• “Iris” Reveals background with a centered mask
• “PixelDissolve” Reveals background in blocks
• “Photo” Reveals background with a photographic-flash effect

For example, to load an image, you set its URL in “myFile” (e.g. myFile: “a_bg_img.jpg”) and set its filetype as “image” (myFileType: “image”). To load an external SWF, you set its URL in “myFile” (e.g. myFile: “a_bg_swf.swf”) and set its filetype as “flash” (myFileType: “flash”).

The actionscript (AS 2.0)

Stage.scaleMode = "noScale";
Stage.align = "TL";

import flash.display.*;
import mx.transitions.*;
import mx.transitions.easing.*;

preloader._x=Stage.width-preloader._width-25;
preloader._y=55;

function loadBitmapData(url:String, target:MovieClip) {
	var imgMC:MovieClip = target.createEmptyMovieClip("imgMC",target.getNextHighestDepth());
	var listener:Object = new Object();
	listener.tmc = target;
	listener.onLoadInit = function(mc:MovieClip) {
		mc._visible = false;

		if(myFileType=="image"){
			var bitmap:BitmapData = new BitmapData(mc._width, mc._height, true);
			this.tmc.attachBitmap(bitmap, this.tmc.getNextHighestDepth(),"auto", true);
			bitmap.draw(mc);
		} else {
			mc.loadMovie(myFile);
		}

		Fullscreen_bg();
		_quality="BEST"; //for best image quality set to "BEST", for better performance set to "HIGH"
		TransitionManager.start(preloader, {type:Fade, direction:Transition.OUT, duration:1, easing:None.easeInOut});
		if(loadEffect=="Fade"){
			TransitionManager.start(bg_mc, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeInOut});
		} else if(loadEffect=="Wipe"){
			TransitionManager.start(bg_mc, {type:Wipe, direction:Transition.IN, duration:3, easing:Regular.easeInOut, startPoint:1});
		} else if(loadEffect=="Iris"){
			TransitionManager.start(bg_mc, {type:Iris, direction:Transition.IN, duration:3, easing:Regular.easeInOut, startPoint:0});
		} else if(loadEffect=="PixelDissolve"){
			TransitionManager.start(bg_mc, {type:PixelDissolve, direction:Transition.IN, duration:3, easing:Regular.easeInOut});
		} else if(loadEffect=="Photo"){
			TransitionManager.start(bg_mc, {type:Photo, direction:Transition.IN, duration:2, easing:Regular.easeOut});
		}

		sizeListener = new Object();
		sizeListener.onResize = function() {
			Fullscreen_bg();
		}
		Stage.addListener(sizeListener);
	};
	var loader:MovieClipLoader = new MovieClipLoader();
	loader.addListener(listener);
	loader.loadClip(url, imgMC);
}

createEmptyMovieClip("bg_mc", getNextHighestDepth());
bg_mc.createEmptyMovieClip("cont", bg_mc.getNextHighestDepth());
loadBitmapData(myFile, bg_mc.cont);

function Fullscreen_bg(){
	picHeight = new Object ();
	picHeight = bg_mc._height / bg_mc._width;
	picWidth = new Object ();
	picWidth = bg_mc._width / bg_mc._height;
	if ((Stage.height / Stage.width) < picHeight) {
		bg_mc._width = Stage.width;
		bg_mc._height = picHeight * bg_mc._width;
	} else {
		bg_mc._height = Stage.height;
		bg_mc._width = picWidth * bg_mc._height;
	};
	bg_mc._x = (Stage.width-bg_mc._width)/2;
	bg_mc._y = (Stage.height-bg_mc._height)/2;
}

That's about it. The zip file contains the source .fla so you can customize it as you like. Have fun!

        

A simple navigation menu built with CSS3 and the jQuery UI.

DEMO DEMO WITH SELECTED STATE DOWNLOAD

As of 27/10/2011 the script features an optional selected state for menu options (as requested by some users). Also the code itself is much shorter and a bit more optimized. The demo and .zip files are updated.

The css with some custom fonts via Google font API

@import url(http://fonts.googleapis.com/css?family=Lobster);
body {margin:0; padding:0; background:#ddd;}
#nav{position:relative; margin:40px; background:#eee; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:21px; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:2px 2px 3px #ccc; -webkit-box-shadow:2px 2px 3px #ccc; box-shadow:2px 2px 3px #ccc;}
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 5px; margin:0; list-style:none;}
#nav li{float:left; margin:5px 10px 5px 0; background:#eee; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#nav li a{text-decoration:none; color:#9e0039; display:block; padding:10px 15px;}

Load the jquery library and UI straight from Google

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

The jQuery code

<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_a=$nav_li.children("a");
	var animSpeed=450; //fade speed
	var hoverTextColor="#fff"; //text color on mouse over
	var hoverBackgroundColor="#9e0039"; //background color on mouse over
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
		var $this=$(this);
		$this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
	});
});
</script>

Optional jQuery code that features a selected state when an option is clicked

<script>
$(document).ready(function(){
	$nav_li=$("#nav li");
	$nav_li_selected=$("#nav li.selected");
	$nav_li_a=$nav_li.children("a");
	var animSpeed=450; //fade speed
	var hoverTextColor="#fff"; //text color on mouse over
	var hoverBackgroundColor="#9e0039"; //background color on mouse over
	var textColor=$nav_li_a.css("color");
	var backgroundColor=$nav_li.css("background-color");
	//init selected
	$nav_li_selected.css("background-color",hoverBackgroundColor).children().css("color",hoverTextColor);
	$nav_li_a.hover(function() {
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed);
	},function() {
		var $this=$(this);
		if(!$this.parent().is(".selected")){
			$this.stop().animate({ color: textColor }, animSpeed).parent().stop().animate({ backgroundColor: backgroundColor }, animSpeed);
		}
	});
	//selected state
	$nav_li_a.click(function(){
		var $this=$(this);
		$this.stop().animate({ color: hoverTextColor }, animSpeed).parent().stop().animate({ backgroundColor: hoverBackgroundColor }, animSpeed).addClass("selected").siblings(".selected").removeClass("selected").stop().animate({ backgroundColor: backgroundColor }, animSpeed).children().stop().animate({ color: textColor }, animSpeed);
	});
});
</script>

The markup

About
Portfolio
Recent projects
Experiments / miscellaneous
Contact me

Optionally, if you need to have a menu option selected on page load, add the class-name selected on it. For example:

About

To add support for rounded corners in IE we can use DD_roundies script by Drew Diller. Add the following code inside the head tags.

<script src="DD_roundies_0.0.2a-min.js"</script>
<script>
DD_roundies.addRule("#nav", "5px");
DD_roundies.addRule("#nav li", "5px");
</script>

That’s about it. Feel free to modify it as you like

        

A dynamic Flash-xml driven image gallery, fully customizable through javascript variables within the html.

DEMO DOWNLOAD

Main features

• XML driven
• Configurable via the html document
• Multiple galleries
• Title and description for each image
• Dynamic texts (footer)
• All colors are configured via the html document
• Preloaders for each image and thumbnail
• Uses SWFObject to embed flash

Customization

Fancy horizontal animation on browser resize – values: “on” or “off”

browser_resize_animation = "on";

The directory of the image files (important: keep trailing slashes)

images_directory = "images/";

The total number of galleries

total_number_of_galleries = 8;

Galleries list
Format: “gallery_1″, “gallery_2″, “gallery_3″ etc. for your xml files
Format: “gallery_title_1″, “gallery_title_2″, “gallery_title_3″ etc. for the gallery title

gallery_1 = "xml/animals_birds.xml";
	gallery_title_1 = "Animals and birds";
gallery_2 = "xml/landscapes.xml";
	gallery_title_2 = "Landscapes";
gallery_3 = "xml/people.xml";
	gallery_title_3 = "People";
gallery_4 = "xml/abstract.xml";
	gallery_title_4 = "Abstract";
gallery_5 = "xml/cityscapes.xml";
	gallery_title_5 = "Cityscapes";
gallery_6 = "xml/computers_internet.xml";
	gallery_title_6 = "Computers and Internet";
gallery_7 = "xml/movies.xml";
	gallery_title_7 = "Movies";
gallery_8 = "xml/cars.xml";
	gallery_title_8 = "Cars";

Galleries title text

title_text = "GALLERIES";

Footer text (you can use some simple html tags like anchors, break lines etc.)

footer_text = "FluidGrid Gallery by malihu - Flash gallery for the masses web: http://manos.malihu.gr | e-mail: manos@malihu.gr";

Gallery styling
COLORS – format: 0×000000 (e.g. 0xffffff for white, 0xff0000 for red etc.)

page_background_color = "0x000000"; //document background hexadecimal color code
scrollbar_color = "0x666666"; //document scrollbar hexadecimal color code
menu_title_color = "0xffcc00"; //"Galleries" text hexadecimal color code
menu_background_color = "0x333333"; //menu background hexadecimal color code
menu_text_color = "0xffffff"; //galleries titles hexadecimal color code
menu_selected_color = "0x545454"; //selected gallery background hexadecimal color code
thumbnail_background_color = "0x333333"; //thumbnail background hexadecimal color code
image_background_color = "0x333333"; //large image background hexadecimal color code
thumbnail_border = "no"; //Change the borders of the thumbnails - values: "yes", "no" or "0-100" number which indicates opacity (e.g. "50" for 50% opacity of borders)
thumbnail_border_color = "0xffffff"; //thumbnail borders hexadecimal color code
thumbnail_title_color = "0x000000"; //thumbnail title hexadecimal color code
thumbnail_hover_color = "0xffcc00"; //thumbnail background hexadecimal color code on mouse over
image_preloader_color = "0x000000"; //preloader hexadecimal color code
tooltip_background_color = "0xffcc00"; //tooltip background hexadecimal color code
tooltip_text_color = "0x000000"; //tooltip text hexadecimal color code
exit_button_background_color = "0x000000"; //large image "X" button background hexadecimal color code
exit_button_x_color = "0xffffff"; //large image "X" button hexadecimal color code
footer_text_color = "0x999999"; //footer text hexadecimal color code
footer_background_color = "0x333333"; //footer background hexadecimal color code

In order to have the html/css background visible below flash, set wmode parameter and page_background_color values to “transparent”.

XML format

<myItem title="Image Title"
description="Image description"
img="thumbnail_image_filename.jpg"
img_large="large_image_filename.jpg"/>

The only thing to remember in order to use the FluidGrid Gallery is that the thumbnails size must be: 240×150 pixels and optimally the size of the large images should be analogous (ratio: 1.6) to thumbnails (e.g. 1920×1200, 1680×1050, 1280×800 etc.).

Have fun