CodePen

HTML

            
              
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">

<title> Rick Ryniak Architects</title>

<link rel="alternate" type="application/rss+xml" title="Rick Ryniak Architects &raquo; Feed" href="http://www.ryniak.com/wpdev/feed/" />
<link rel="alternate" type="application/rss+xml" title="Rick Ryniak Architects &raquo; Comments Feed" href="http://www.ryniak.com/wpdev/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Rick Ryniak Architects &raquo; home Comments Feed" href="http://www.ryniak.com/wpdev/home/feed/" />
<link rel='stylesheet' id='NextGEN-css'  href='http://www.ryniak.com/wpdev/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='wp-pagenavi-css'  href='http://www.ryniak.com/wpdev/wp-content/plugins/wp-pagenavi/pagenavi-css.css?ver=2.70' type='text/css' media='all' />
<script type='text/javascript' src='http://www.ryniak.com/wpdev/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://www.ryniak.com/wpdev/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='http://www.ryniak.com/wpdev/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.ryniak.com/wpdev/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.ryniak.com/wpdev/wp-includes/wlwmanifest.xml" /> 
<link rel='next' title='Residences' href='http://www.ryniak.com/wpdev/residences/' />
<meta name="generator" content="WordPress 3.5.1" />
<link rel='canonical' href='http://www.ryniak.com/wpdev/' />
<!-- <meta name="NextGEN" version="1.9.12" /> -->
<link type="text/css" media="screen" rel="stylesheet" href="http://www.ryniak.com/wpdev/wp-content/plugins/fbf-facebook-page-feed-widget/fbf_facebook_page_feed.css" />

<link rel="stylesheet" href="http://www.ryniak.com/wpdev/wp-content/themes/rick ryniak/style.css" type="text/css" media="screen" />
<link rel="pingback" href="http://www.ryniak.com/wpdev/xmlrpc.php" />

<script type="text/javascript" src="//use.typekit.net/jyx2xja.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<script type="text/javascript" src="http://www.ryniak.com/wpdev/js/jquery-1.7.1.min.js"></script>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>-->
<script type="text/javascript" src="http://www.ryniak.com/wpdev/js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="http://www.ryniak.com/wpdev/js/jquery.fitvids.js"></script>

</head>
<body class="home page page-id-5 page-parent page-template page-template-home_page-php">

<script>
$(document).ready(function() {
    // colour ul
    var cArray = new Array("#262524","#504c4b","#5c5756","#686361","#746e6d");
    for (i = 0;i<$("#nav-menu").children().length;i++) {
        $("#nav-menu li").eq(i).css("background", cArray[i]);
    }
});
</script>

<link rel="stylesheet" href="http://www.ryniak.com/wpdev/wp-content/themes/rick ryniak/new-menu.css" type="text/css" media="screen" />

<div id="navigation-bar">
    
    <div id="js-drawer"><!-- (GV) NEW CONTAINING ELEMENT -->
    
    <div id="home-logo-button">
            <a href="http://www.ryniak.com/wpdev"><img src="http://www.ryniak.com/wpdev/images/ryniak-home-logo.png" border="0"></a><!-- (GV) NEW IMAGE -->
    </div><!-- home-logo-button -->
    <div id="content-nav">
        <ul id="nav-menu">
			<li><a href="http://www.ryniak.com/wpdev">Home</a></li>
            <li class="page_item page-item-40"><a href="http://www.ryniak.com/wpdev/residences/">Residences</a></li>
<li class="page_item page-item-55"><a href="http://www.ryniak.com/wpdev/creative-process/">Creative Process</a></li>
<li class="page_item page-item-47"><a href="http://www.ryniak.com/wpdev/news/">Latest News</a></li>
<li class="page_item page-item-52"><a href="http://www.ryniak.com/wpdev/contact/">Contact</a></li>
        </ul>
    </div><!-- content-nav -->    
    
    <div id="social-media">
        <h3>Follow Us</h3>
        <p><span class="sssocial"><a href="http://www.twitter.com/share" target="_blank">&#62993;</a> <a href="http://www.facebook.com/sharer.php?u=http://www.ryniak.com/wpdev/" target="_blank">&#62992;</a> <a href="https://plus.google.com/" target="_blank">&#63088;</a></span></p>
    </div><!-- social-media -->
    
    <hr>
        
    </div><!-- close #js-drawer (GV) NEW CLOSE CONTAINER -->    
        
    <div id="toggleButton" class="js-drawer-action"><!-- (GV) NEW CLASS --> 
		<div id="m-toggle-open">
			<img src="http://www.ryniak.com/wpdev/images/m-menu-open.png" border="0">
		</div><!-- m-toggle-open -->
		<div id="m-toggle-close">
			<img src="http://www.ryniak.com/wpdev/images/m-menu-close.png" border="0">
		</div><!-- m-toggle-close -->
		<div id="toggle-tab-closed">
			<img src="http://www.ryniak.com/wpdev/images/toggle-tab.png" data-hover="http://www.ryniak.com/wpdev/images/toggle-tab-hover.png" border="0">
		</div>
		<div id="toggle-tab-open">
			<img src="http://www.ryniak.com/wpdev/images/toggle-tab-close.png" data-hover="http://www.ryniak.com/wpdev/images/toggle-tab-close-hover.png" border="0">
		</div>
    </div><!-- toggle button -->
</div><!-- end navigation-bar -->

<div id="content-wrapper" class="content">
	
	<div id="header">
		<div id="header-logo-button">
			<a href="http://www.ryniak.com/wpdev">RICK RYNIAK ARCHITECTS</a>
		</div><!-- header-logo-button-->
	</div><!-- end header -->
<style>
#footer {
	margin-top:40px;
	}
</style>


<script>
// The jQuery that calls and controls Isotope
$(window).load(function(){
	var $container = $('#container');
	tileHeights();
	$container.imagesLoaded( function() {
	// initialize Isotope on #container
	$container.isotope({		
		// disable normal resizing
		resizable: false,
		transformsEnabled: false,
		// set columnWidth to a percentage of container width
		masonry: { 
		  columnWidth: $container.width() / 48 
		}
		});
	});
  // update columnWidth on window resize
	$(window).resize(function(){
		tileHeights();
		$container.isotope({
	 	 // update columnWidth to a percentage of container width
	  	masonry: { 
			columnWidth: $container.width() / 48 
	  	}
		});
	});  
});
function tileHeights() {
	var h = $("#container .item").height();
	var w = $("#container .item:first img").width();
	if ($(window).width() > 365) {
		$(".hero-item").css("height", h*2);
	} else {
		$(".hero-item").css("height", h*1);
	}
	var f = Math.ceil($(".twitter-tile .home-tile").height() / h);
	$(".twitter-tile").css("height", f * h);
	$(".twitter-tile").css("width", w);
	var f = Math.ceil($(".facebook-tile .home-tile").height() / h);
	$(".facebook-tile").css("height", f * h);
	//$(".facebook-tile").css("width", w);
	// quantise heights to units...
	var f = Math.ceil($("#latest-news-container .content").height() / h);
	$("#latest-news-container").css("height", f * h);	
	//$(".video-tile").css("height", h);
	//$(".video-tile").css("width", w);
	$(".video-tile").fitVids();
}
</script>
  
<div id="main-content">	
	<div id="container" class="isotope-container">
		<div class="hero-item  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/bali-residence/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Hero-Tile-Bali1.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Bali Residence</h2> 
<h3>Kihei, Maui, HI, USA</h3> 
<h4>DATE OF COMPLETION: 2001/6</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/dinkel-residence/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tile-Thumb_Dinkel-completed.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Dinkel Residence</h2> 
<h3>Calgary, Alberta, Canada</h3> 
<h4>DATE OF COMPLETION: 2006/9</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/valkir-residence/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tall-Tile-Valkirs1.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Valkirs Residence</h2> 
<h3>Kapalua, Maui, Hawaii, USA</h3> 
<h4>DATE OF COMPLETION: 2008/12</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<img class="alignnone size-full wp-image-1619" alt="Tile-Ryniak-Logo" src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tile-Ryniak-Logo.jpg" width="380" height="242" /></div> 
</div><!--post --> 
 
<div class="item landscape   video-tile"> 
<div class="home-tile"> 
<iframe src="http://player.vimeo.com/video/41939247?title=0&amp;byline=0&amp;portrait=0&amp;color=f20c4d" height="242" width="380" allowfullscreen="" frameborder="0"></iframe></div> 
</div><!--post --> 
 
<div class="item landscape   twitter-tile"> 
<div class="home-tile"> 
<div class="twitter-header"><img style="margin-right: 6px;" alt="" src="http://www.ryniak.com/wpdev/images/rr_small_twitter.gif" align="left" /><a class="follow" href="http://twitter.com/rick_ryniak" target="_blank"><img alt="" src="http://www.ryniak.com/wpdev/images/tw-follow.gif" align="right" border="0" /></a><a href="http://twitter.com/rick_ryniak" target="_blank">Rick Ryniak Architects</a><br />
<a href="http://twitter.com/rick_ryniak" target="_blank">@rick_ryniak</a></div>
<p><!-- .twitter-header --><br />

<!-- WordPress Twitter Feed Plugin: http://pleer.co.uk/wordpress/plugins/wp-twitter-feed/ -->
<div id="twitter-container">
<ul>
<li style="display: inline-block; list-style: none; border-bottom: none; margin-bottom: 5px; padding-bottom: 5px;"> I went to Edmonton, Alberta a few weeks ago. See what happened at <a href="http://bit.ly/bQrCnu" rel="nofollow">http://bit.ly/bQrCnu</a> !!
<br><a href="http://twitter.com/intent/retweet?related=rick_ryniak&tweet_id=22573793441" rel="nofollow"><img src="http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png" alt="ReTweet"/></a>
<a href="http://twitter.com/intent/tweet?related=rick_ryniak&in_reply_to=22573793441" rel="nofollow"><img src="http://si0.twimg.com/images/dev/cms/intents/icons/reply.png" alt="Reply"/></a>
<a href="http://twitter.com/intent/favorite?related=rick_ryniak&tweet_id=22573793441" rel="nofollow"><img src="http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png" alt="Favorite"/></a>
<a class="timestamp" href="http://twitter.com/rick_ryniak/statuses/22573793441" rel="nofollow"><br /><font style="font-size: 85%;">(about 965 days ago)</font></a></li>
</ul>
</div>
</p>
</div> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<style>
#latest-news-container {
	width:100.5%;
	background:#262524;
	}
#latest-news-container .content {
	padding:20px;
	}
#latest-news-container h2 {
	margin:0;
	padding:10px 0px 20px 0px;
	font-weight:normal;
	}
#latest-news-container h2 a {
	color:#ffffff;
	text-decoration:none;
	}
#latest-news-container h2 a:hover {
	color:#C6AE6E;
	}
#more-articles-btn {
	position:absolute;
	bottom:10px;
	right:10px;
	}
#more-articles-btn a {
	display:inline-block;
	border:1px solid #444140;
	padding:5px;
	font-family:"museo-slab", Arial;
	}
#more-articles-btn a:hover {
	color: #C6AE6E;
	}
@media only screen and (max-width: 400px) {
	#more-articles-btn {
		position: relative;
		bottom: 0;
		right: 0;
		margin-bottom: 10px;
		margin-top: -30px;
		text-align: center;
	}
}
</style>

<script>
$(function(){
	// suck in content
	$("#latest-news-container .content").html($("#latest-news-content").html());
	// used document.ready to wrap contents in div "content-tile-content"
	var h = $("#container .item").height();
	var w = $("#container .item:first img").width();
	// quantise heights to units...
	var f = Math.ceil($("#latest-news-container .content").height() / h);
	$("#latest-news-container").css("height", f * h);	
})
</script>

<div id="latest-news-container">
	<div class="content">
	</div><!-- end content -->
	<div id="more-articles-btn">
		<a href="news">MORE ARTICLES</a>
	</div><!-- more-articles-btn -->
</div><!-- end latest-news-container -->
</div> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/santana/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tile-Thumb_Santana_completed.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Santana Residence</h2> 
<h3>Kapalua, Maui, Hawaii, USA</h3> 
<h4>DATE OF COMPLETION: 2002/6</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/kindred/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tile-Kindred-Thumb.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Kindred Residence</h2> 
<h3>Kapalua, Maui, Hawaii, USA</h3> 
<h4>DATE OF COMPLETION: 2008/6</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape  "> 
<div class="home-tile"> 
<a href="http://www.ryniak.com/wpdev/residences/bobrow/"><img src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/Tile-Thumb_Bobrow-completed2.jpg"></a> 
</div> 
<div class="project-title"> 
<div class="project-data"> 
<h2>Bobrow Residence</h2> 
<h3>Nevada, USA</h3> 
<h4>DATE OF COMPLETION: 2007/12</h4> 
</div><!-- project-data --> 
</div><!-- project-title --> 
</div><!--post --> 
 
<div class="item landscape   video-tile"> 
<div class="home-tile"> 
<iframe src="http://player.vimeo.com/video/57747975?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;color=ffffff" height="185" width="290" allowfullscreen="" frameborder="0"></iframe>
<!--<a class="fancybox-media" href="http://vimeo.com/9532951"><img class="alignnone size-full wp-image-106" alt="video-dummy-1" src="http://www.ryniak.com/wpdev/wp-content/uploads/2013/01/video-dummy-1.jpg" width="290" height="185" /></a>--></div> 
</div><!--post --> 
 
		
	</div><!-- isotope-container -->
	
	<script>
	// tiles interactivity
	$('#container .item, #container .hero-item').not('#container .facebook-tile').not('#container .twitter-tile').not('#container .video-tile').mouseenter(function() {
		showMe(this);
	});
	$('#container .item, #container .hero-item').not('#container .facebook-tile').not('#container .twitter-tile').not('#container .video-tile').mouseleave(function() {
		hideMe(this);
	});
	function showMe(div) {
		$(div).children('.project-title').fadeIn(200);	
	}
	function hideMe(div) {
		$(div).children('.project-title').fadeOut(200);
	}
	</script>
	
	<div id="latest-news-content" style="display:none;">
					
		<div class="news-post"><p class="date-time">January 16, 2013</p><h2><a href="http://www.ryniak.com/wpdev/post-8/">Dinkel/Spencer Residence in Alberta Magazine</a></h2></div>		
					
		<div class="news-post"><p class="date-time">July 16, 2012</p><h2><a href="http://www.ryniak.com/wpdev/post-4/">Valkirs Residence &#8211; Photographs by Mark Ammen</a></h2></div>		
					
		<div class="news-post"><p class="date-time">July 16, 2012</p><h2><a href="http://www.ryniak.com/wpdev/post-7/">A New Title for Me Would Be Good</a></h2></div>		
					</div><!-- latest-news-content -->	


			<div id="footer">
				<div id="footer-content">
					© Rick Ryniak Architects 2012
				</div><!-- end footer-content -->
			</div><!-- end footer -->

		</div><!-- end main-content -->
	</div><!-- end content-wrapper -->
			
<script type="text/javascript">
$(window).load(function() {
	if ($(window).height() > $("#content-wrapper").height()) {
		var d = $(window).height() - $("#content-wrapper").height() + 0;
		console.log("difference: " + d);
		$("#footer").css("margin-top", d);
	}
});
$(window).resize(function() {
	if ($(window).height() > $("#content-wrapper").height()) {
		var d = $(window).height() - $("#content-wrapper").height() + 0;
		console.log("difference: " + d);
		$("#footer").css("margin-top", d);
	}
});	
</script>

<script>
$(document).ready(function() {
    // hide/show nav bar
    $('#toggleButton').click(function() {
		if ($(window).width() >= 345) {
			if ($("#navigation-bar").css("left") != "0px") {
				openNav();
			} else {
				closeNav();
			}
		} else {
			$("#js-drawer").slideToggle("slow");
			$("#m-toggle-open").toggle();
			$("#m-toggle-close").toggle();
		}
    });
});
$(window).resize(function() {
	if ($(window).width() > 365) {
		$("#js-drawer").show();
	} else {
		$("#main-content").css("left", 0);
	}
});
// functions 
function closeNav() {
	$('#navigation-bar').animate({ left: -180 }, 'slow', function() {		
	});
	$('#main-content').animate({ left: 0 }, 'slow', function() {
		$("#toggle-tab-open").hide();
		$("#toggle-tab-closed").show();
	});	
}
function openNav() {		
	$('#navigation-bar').animate({ left: 0 }, 'slow', function() {
	});
	$('#main-content').animate({ left: 180 }, 'slow', function() {
		$("#toggle-tab-open").show();
		$("#toggle-tab-closed").hide();
	});
}
</script>

<script>
$(function() {
    $('img[data-hover]').hover(function() {
        $(this)
            .attr('tmp', $(this).attr('src'))
            .attr('src', $(this).attr('data-hover'))
            .attr('data-hover', $(this).attr('tmp'))
            .removeAttr('tmp');
    }).each(function() {
        $('<img />').attr('src', $(this).attr('data-hover'));
    });;
});
</script>

<script type="text/javascript" src="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox.css" media="screen" />

<link rel="stylesheet" href="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox-media.js?v=1.0.3"></script>
<link rel="stylesheet" href="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.ryniak.com/wpdev/fancybox/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<style type="text/css">
.fancybox-skin {
	background:#444140;
	border-radius:0;
	color:#ffffff;
	}
.fancybox-close {
	top:10px;
	right:10px;
	height:30px;
	width:30px;
	background: url("http://www.ryniak.com/wpdev/images/btn_lightbox_close.png") no-repeat;
	}
.fancybox-prev span {
	/*left:0px;*/
	width:23px;
	height:38px;
	background:url("http://www.ryniak.com/wpdev/images/btn_lightbox_prev.gif") no-repeat;
	}
.fancybox-next span {
	/*right:0px;*/
	width:23px;
	height:38px;
	background:url("http://www.ryniak.com/wpdev/images/btn_lightbox_next.gif") no-repeat;
	}
.fancybox-title {
	display:none;
	padding:14px;
	font-family: "museo-slab","Helvetica Neue", "Helvetica", Arial, sans-serif;
	font-weight:normal;
	}
.fancybox-title iframe {
    min-height: 30px;
	max-width:80px;
    vertical-align: middle;
}
.fancybox-share {
	position:absolute;
	top:14px;
	right:10px;
	}
.share-image {
	display: inline;
	margin-right: 6px;
	position: relative;
	top: -4px;
	}
.fancybox-nav span {
    visibility:hidden;
	}
#fancybox-count {
	display:none;
	}
.fancybox-title ul {
	position:absolute;
	margin:0px;
	padding:0px;
	top:-28px;
	left:14px;
	}
.fancybox-title ul li {
	display:inline-block;
	list-style-type:none;
	}
.fancybox-title ul li {
	margin-left:0px;
	margin-right:4px;
	}
#fancybox-thumbs ul li.active {
	border:none;
	}
.fancybox-title ul li a {width: 25px; height: 15px; display: block; background: #666; background: rgba(68,65,64,0.6); cursor:default;}
/*.fancybox-title ul li a:hover { background: #333; background: rgba(0,0,0,0.7) url('http://www.ryniak.com/wpdev/images/flex-pager-on.gif'); }*/
.fancybox-title ul li a.flex-active { background: #000; background: rgba(234,232,230,1); cursor: default; }
</style>

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div id="fancybox-count"><ul></ul></div>

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox({
			
			helpers : {
				title: {
					type: 'inside'
				},
				thumbs	: {
					width	: 50,
					height	: 50
				}
			},
			'padding': 0,
			'margin':0,
			'closeEffect': 'none',
			'width': 'auto',
			'height': 'auto',
			'autoScale': false,
			'autoDimensions': false,
			'scrolling': 'no',
			'transitionIn': 'none',
			'transitionOut': 'none',
			 beforeLoad: function() {
				this.title = $(this.element).children("img").attr('alt');
				// add item count indicator
				if ($("#fancybox-count ul li").length == 0) {
					console.log("create ul");
					for (i = 0;i<this.group.length;i++) {				
						$("#fancybox-count ul").append('<li id="image' + i + '"><a></a></li>');
					}
				}
			   $("#fancybox-count a").removeClass("flex-active");
			   $("#image" + (this.index) + " a").addClass("flex-active");
				this.title += $("#fancybox-count").html();				
			},
			afterClose: function() {
				$("#fancybox-count ul").html("");
			},
			afterLoad : function() {
			   //this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
			  },
			beforeShow: function () {
            if (this.title) {
                // add share icon
                this.title += '<div class="fancybox-share"><div class="share-image"><img src="http://www.ryniak.com/wpdev/images/share-icon.png"> Share</div> ';                
                // Add tweet button
                this.title += '<a href="https://twitter.com/share" class="twitter-share-button" data-url="' + this.href + '">Tweet</a> ';                
                // Add FaceBook like button
                this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:23px;" allowTransparency="true"></iframe>';
				this.title += '</div><!--fancybox-share -->';
            }
        },
        afterShow: function() {
            // Render tweet button
            twttr.widgets.load();
        }
		});
		$('.fancybox-media').fancybox({
		openEffect  : 'none',
		closeEffect : 'none',
		helpers : {
			media : {}
			}
		});
	});
</script>


</body>
</html>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................