Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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" xml:lang="en" lang="en">
- <head>
- <!-- DO NOT REMOVE
- FOLLOW FOREVER BLOG ROLL v3 MADE BY: http://lostmemento.tumblr.com (lmthemes)
- -->
- <!----------------------------------------------- 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="/">❰ BACK</a>
- <a href="http://www.tumblr.com/dashboard" style="margin-left: 10px;">DASHBOARD ❱</a></td>
- <!--- DO NOT REMOVE CREDIT --->
- <Td style="font-size: 15px"><a href="http://lmthemes.tumblr.com">© LMTHEMES</a></td></tr></table></div>
- <!--- DO NOT REMOVE CREDIT --->
- <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>
- <!--- DO NOT EDIT ANYTHING BELOW EXCEPT FOR WHAT IS SAID IN STEP 7A --->
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement