Create a new version of paste: 4cpjZctb

Don't like ads? PRO users don't see any ads ;-)

Untitled1 sec ago
Untitled5 sec ago
Untitled11 sec ago
Untitled16 sec ago
ser_13689678011509 sec ago
Untitled11 sec ago
Untitled11 sec ago
startupLua | 13 sec ago

New Paste

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!----------------------------------------------- REHOSTING

Please if you have a webs.com or somewhere to host scripts PLEASE PLEASE rehost
This script: http://almostfamousfame.webs.com/proximity.js

And replace it with your rehosted script link here:
<script type="text/javascript" src="http://almostfamousfame.webs.com/proximity.js"></script>

----------------------------------------------->	
	
	
	<title>YOUR TITLE HERE</title>
	
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">
        {block:Description}<meta name="description" content="{MetaDescription}"/> {/block:Description}
		<link rel="shortcut icon" href="{Favicon}" />
		<link rel="apple-touch-icon" href="{PortraitURL-128}"/>
		<link rel="alternate" type="application/rss+xml" href="{RSS}" />
			
<link href='http://fonts.googleapis.com/css?family=Lekton|Terminal+Dosis+Light|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://almostfamousfame.webs.com/proximity.js"></script>
	
<style type="text/css">
body {background-color: #fdfdfd; 
	font-family: Calibri, Helvetica; 
	margin: 0px;}
	
a {text-decoration: none;}

.t_links {width: 830px; 
	margin: auto; 
	font-family: 'Open Sans Condensed'; 
	font-size: 20px; 
	margin-top: 20px;}
	
.t_title {font-size: 24px; 
	background-color: #ededed; 
	color: #fff; 
	padding: 0px 10px;}
	
.t_links a:link, .t_links a:visited, .t_links a:active {color: #a7a7a7;}

.fl-container {width: 810px; 
	height: 590px; 
	overflow-y: auto; 
	overflow-x: hidden; 
	margin:auto; 
	border: 10px solid #f8f8f8;
	background-color: #fdfdfd}
	
.fl-thumbs{width: 800px; 
	margin: 20px auto; 
	position: relative; 
	margin-left: 10px; 
	padding-left: 10px;}
	
.fl-thumbs:before {content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 90%; height: 90%;}
.fl-thumbs li{float:left; position: relative; list-style: none;}
.fl-thumbs li a, .fl-thumbs li a img{display: block; position: relative;}

.fl-thumbs li a img {width:75px;
	opacity: 0.5;}
	
.fl-thumbs li a div.fl-description{width: 250px; 
	max-width: 250px; 
	overflow: hidden; 
	height: 75px;
	background-color: #f8f8f8; 
	opacity: 0.95;
	position: absolute;
	top: 0px;
	left: -200px;
	color: #a4a4a4;
	display: none;
	z-index: 1001;
	text-align: left;}
	
.fl-description h3 {padding: 10px;
	line-height: 20px;
	font-family: 'Open Sans Condensed';
	font-size: 22px;
	margin: 0px; 
	font-weight: normal; 
	background-color: #fff; 
	border-bottom: 1px solid rgba(241,241,241,0.8);}
	
.fl-description p {padding: 10px 0px;
	margin: 0px 10px; margin-bottom: 10px;
	font-size: 11px;
	font-style: italic;}

</style>
</head>

<body>

<div class="t_links"><table cellspacing="0" cellpadding="0"><tr>
<td class="t_title"><img src="{PortraitURL-16}"> TITLE HERE FOLLOW FOREVER ETC.</td>
<td style="padding: 0px 50px;"><a href="/">&#10096; BACK</a>  
<a href="http://www.tumblr.com/dashboard" style="margin-left: 10px;">DASHBOARD &#10097;</a></td>

<Td style="font-size: 15px"><a href="http://lmthemes.tumblr.com">&copy; LMTHEMES</a></td></tr></table></div>

<div class="fl-container"><ul id="fl-thumbs" class="fl-thumbs">
{block:Following} {block:Followed}<li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-96}">
<div class="fl-description"><h3>{FollowedName}</h3><p>{FollowedTitle}</p></div></a></li>{/block:Followed}{/block:Following}
</ul>
</div>

<script type="text/javascript">
			$(function() {
				
				var Photo	= (function() {
					
						// list of thumbs
					var $list		= $('#fl-thumbs'),
						// list's width and offset left.
						// this will be used to know the position of the description container
						listW		= $list.width(),
						listL		= $list.offset().left,
						// the images
						$elems		= $list.find('img'),
						// the description containers
						$descrp		= $list.find('div.fl-description'),
						// maxScale : maximum scale value the image will have
						// minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
						settings	= {
							maxScale	: 1.3,
							maxOpacity	: 0.9,
							minOpacity	: Number( $elems.css('opacity') )
						},
						init		= function() {
							
							// minScale will be set in the CSS
							settings.minScale = _getScaleVal() || 1;
							// preload the images (thumbs)
							_loadImages( function() {
								
								_calcDescrp();
								_initEvents();
							
							});
						
						},
						// Get Value of CSS Scale through JavaScript:
						// http://css-tricks.com/get-value-of-css-rotation-through-javascript/
						_getScaleVal= function() {
						
							var st = window.getComputedStyle($elems.get(0), null),
								tr = st.getPropertyValue("-webkit-transform") ||
									 st.getPropertyValue("-moz-transform") ||
									 st.getPropertyValue("-ms-transform") ||
									 st.getPropertyValue("-o-transform") ||
									 st.getPropertyValue("transform") ||
									 "fail...";

if( tr !== 'none' ) {

var values = tr.split('(')[1].split(')')[0].split(','),
									a = values[0],
									b = values[1],
									c = values[2],
									d = values[3];

return Math.sqrt( a * a + b * b );
							
							}
							
						},
						// calculates the style values for the description containers,
						// based on the settings variable
						_calcDescrp	= function() {
							
							$descrp.each( function(i) {
							
								var $el		= $(this),
									$img	= $el.prev(),
									img_w	= $img.width(),
									img_h	= $img.height(),
									img_n_w	= settings.maxScale * img_w,
									img_n_h	= settings.maxScale * img_h,
									space_t = ( img_n_h - img_h ) / 2,
									space_l = ( img_n_w - img_w ) / 2;
								
								$el.data( 'space_l', space_l ).css({
									height	: settings.maxScale * $el.height(),
									top		: -space_t,
									left	: img_n_w - space_l
								});
							
							});
						
						},
						_initEvents	= function() {
						
							$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
								
								var $el			= $(this),
									$li			= $el.closest('li'),
									$desc		= $el.next(),
									scaleVal	= proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
									scaleExp	= 'scale(' + scaleVal + ')';
								
								// change the z-index of the element once it reaches the maximum scale value
								// also, show the description container
								if( scaleVal === settings.maxScale ) {
									
									$li.css( 'z-index', 1000 );
									
									if( $desc.offset().left + $desc.width() > listL + listW ) {
										
										$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
									
									}
									
									$desc.fadeIn( 800 );
									
								}	
								else {
									
									$li.css( 'z-index', 1 );
								
									$desc.stop(true,true).hide();
								
								}	
								
								$el.css({
									'-webkit-transform'	: scaleExp,
									'-moz-transform'	: scaleExp,
									'-o-transform'		: scaleExp,
									'-ms-transform'		: scaleExp,
									'transform'			: scaleExp,
									'opacity'			: ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
								});

});
						
						},
						_loadImages	= function( callback ) {
							
							var loaded 	= 0,
								total	= $elems.length;
							
							$elems.each( function(i) {
								
								var $el = $(this);
								
								$('<img/>').load( function() {
									
									++loaded;
									if( loaded === total )
										callback.call();
									
								}).attr( 'src', $el.attr('src') );
							
							});
						
						};
					
					return {
						init	: init
					};
				
				})();
				
				Photo.init();
				
			});
		</script>
</body></html>

Optional Paste Settings

Syntax Highlighting:

Paste Expiration:

Paste Exposure:

Paste Name / Title:

Hello Guest
Sign Up or Login

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Pastebin.com Tools & Applications

iPhone/iPad

Windows

Firefox

Chrome

WebOS

Android

Mac

Opera

Click.to

UNIX

WinPhone