cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

BLpJh

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<!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>

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console