API tools faq
paste
Advertisement
lostmemento

[Old Theme] Follow Forever v3

lostmemento
Oct 1st, 2011
13,935
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7. <!-- DO NOT REMOVE
  8.  
  9. FOLLOW FOREVER BLOG ROLL v3 MADE BY: http://lostmemento.tumblr.com (lmthemes)
  10.  
  11. -->
  12.  
  13. <!----------------------------------------------- REHOSTING
  14.  
  15. Please if you have a webs.com or somewhere to host scripts PLEASE PLEASE rehost
  16. This script: http://almostfamousfame.webs.com/proximity.js
  17.  
  18. And replace it with your rehosted script link here:
  19. <script type="text/javascript" src="http://almostfamousfame.webs.com/proximity.js"></script>
  20.  
  21. ----------------------------------------------->
  22.  
  23.  
  24. <title>YOUR TITLE HERE</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}<meta name="description" content="{MetaDescription}"/> {/block:Description}
  29. <link rel="shortcut icon" href="{Favicon}" />
  30. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Lekton|Terminal+Dosis+Light|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
  34. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  35. <script type="text/javascript" src="http://almostfamousfame.webs.com/proximity.js"></script>
  36.  
  37. <style type="text/css">
  38. body {background-color: #fdfdfd;
  39. font-family: Calibri, Helvetica;
  40. margin: 0px;}
  41.  
  42. a {text-decoration: none;}
  43.  
  44. .t_links {width: 830px;
  45. margin: auto;
  46. font-family: 'Open Sans Condensed';
  47. font-size: 20px;
  48. margin-top: 20px;}
  49.  
  50. .t_title {font-size: 24px;
  51. background-color: #ededed;
  52. color: #fff;
  53. padding: 0px 10px;}
  54.  
  55. .t_links a:link, .t_links a:visited, .t_links a:active {color: #a7a7a7;}
  56.  
  57. .fl-container {width: 810px;
  58. height: 590px;
  59. overflow-y: auto;
  60. overflow-x: hidden;
  61. margin:auto;
  62. border: 10px solid #f8f8f8;
  63. background-color: #fdfdfd}
  64.  
  65. .fl-thumbs{width: 800px;
  66. margin: 20px auto;
  67. position: relative;
  68. margin-left: 10px;
  69. padding-left: 10px;}
  70.  
  71. .fl-thumbs:before {content: ""; display: block; position: absolute; top: 0px; left: 0px; width: 90%; height: 90%;}
  72. .fl-thumbs li{float:left; position: relative; list-style: none;}
  73. .fl-thumbs li a, .fl-thumbs li a img{display: block; position: relative;}
  74.  
  75. .fl-thumbs li a img {width:75px;
  76. opacity: 0.5;}
  77.  
  78. .fl-thumbs li a div.fl-description{width: 250px;
  79. max-width: 250px;
  80. overflow: hidden;
  81. height: 75px;
  82. background-color: #f8f8f8;
  83. opacity: 0.95;
  84. position: absolute;
  85. top: 0px;
  86. left: -200px;
  87. color: #a4a4a4;
  88. display: none;
  89. z-index: 1001;
  90. text-align: left;}
  91.  
  92. .fl-description h3 {padding: 10px;
  93. line-height: 20px;
  94. font-family: 'Open Sans Condensed';
  95. font-size: 22px;
  96. margin: 0px;
  97. font-weight: normal;
  98. background-color: #fff;
  99. border-bottom: 1px solid rgba(241,241,241,0.8);}
  100.  
  101. .fl-description p {padding: 10px 0px;
  102. margin: 0px 10px; margin-bottom: 10px;
  103. font-size: 11px;
  104. font-style: italic;}
  105.  
  106.  
  107. </style>
  108. </head>
  109.  
  110. <body>
  111.  
  112. <div class="t_links"><table cellspacing="0" cellpadding="0"><tr>
  113. <td class="t_title"><img src="{PortraitURL-16}"> TITLE HERE FOLLOW FOREVER ETC.</td>
  114. <td style="padding: 0px 50px;"><a href="/">&#10096; BACK</a>
  115. <a href="http://www.tumblr.com/dashboard" style="margin-left: 10px;">DASHBOARD &#10097;</a></td>
  116.  
  117. <!--- DO NOT REMOVE CREDIT --->
  118. <Td style="font-size: 15px"><a href="http://lmthemes.tumblr.com">&copy; LMTHEMES</a></td></tr></table></div>
  119. <!--- DO NOT REMOVE CREDIT --->
  120.  
  121. <div class="fl-container"><ul id="fl-thumbs" class="fl-thumbs">
  122. {block:Following} {block:Followed}<li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-96}">
  123. <div class="fl-description"><h3>{FollowedName}</h3><p>{FollowedTitle}</p></div></a></li>{/block:Followed}{/block:Following}
  124. </ul>
  125. </div>
  126.  
  127.  
  128. <!--- DO NOT EDIT ANYTHING BELOW EXCEPT FOR WHAT IS SAID IN STEP 7A --->
  129. <script type="text/javascript">
  130. $(function() {
  131.  
  132. var Photo = (function() {
  133.  
  134. // list of thumbs
  135. var $list = $('#fl-thumbs'),
  136. // list's width and offset left.
  137. // this will be used to know the position of the description container
  138. listW = $list.width(),
  139. listL = $list.offset().left,
  140. // the images
  141. $elems = $list.find('img'),
  142. // the description containers
  143. $descrp = $list.find('div.fl-description'),
  144. // maxScale : maximum scale value the image will have
  145. // minOpacity / maxOpacity : minimum (set in the CSS) and maximum values for the image's opacity
  146. settings = {
  147. maxScale : 1.3,
  148. maxOpacity : 0.9,
  149. minOpacity : Number( $elems.css('opacity') )
  150. },
  151. init = function() {
  152.  
  153. // minScale will be set in the CSS
  154. settings.minScale = _getScaleVal() || 1;
  155. // preload the images (thumbs)
  156. _loadImages( function() {
  157.  
  158. _calcDescrp();
  159. _initEvents();
  160.  
  161. });
  162.  
  163. },
  164. // Get Value of CSS Scale through JavaScript:
  165. // http://css-tricks.com/get-value-of-css-rotation-through-javascript/
  166. _getScaleVal= function() {
  167.  
  168. var st = window.getComputedStyle($elems.get(0), null),
  169. tr = st.getPropertyValue("-webkit-transform") ||
  170. st.getPropertyValue("-moz-transform") ||
  171. st.getPropertyValue("-ms-transform") ||
  172. st.getPropertyValue("-o-transform") ||
  173. st.getPropertyValue("transform") ||
  174. "fail...";
  175.  
  176. if( tr !== 'none' ) {
  177.  
  178. var values = tr.split('(')[1].split(')')[0].split(','),
  179. a = values[0],
  180. b = values[1],
  181. c = values[2],
  182. d = values[3];
  183.  
  184. return Math.sqrt( a * a + b * b );
  185.  
  186. }
  187.  
  188. },
  189. // calculates the style values for the description containers,
  190. // based on the settings variable
  191. _calcDescrp = function() {
  192.  
  193. $descrp.each( function(i) {
  194.  
  195. var $el = $(this),
  196. $img = $el.prev(),
  197. img_w = $img.width(),
  198. img_h = $img.height(),
  199. img_n_w = settings.maxScale * img_w,
  200. img_n_h = settings.maxScale * img_h,
  201. space_t = ( img_n_h - img_h ) / 2,
  202. space_l = ( img_n_w - img_w ) / 2;
  203.  
  204. $el.data( 'space_l', space_l ).css({
  205. height : settings.maxScale * $el.height(),
  206. top : -space_t,
  207. left : img_n_w - space_l
  208. });
  209.  
  210. });
  211.  
  212. },
  213. _initEvents = function() {
  214.  
  215. $elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
  216.  
  217. var $el = $(this),
  218. $li = $el.closest('li'),
  219. $desc = $el.next(),
  220. scaleVal = proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
  221. scaleExp = 'scale(' + scaleVal + ')';
  222.  
  223. // change the z-index of the element once it reaches the maximum scale value
  224. // also, show the description container
  225. if( scaleVal === settings.maxScale ) {
  226.  
  227. $li.css( 'z-index', 1000 );
  228.  
  229. if( $desc.offset().left + $desc.width() > listL + listW ) {
  230.  
  231. $desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
  232.  
  233. }
  234.  
  235. $desc.fadeIn( 800 );
  236.  
  237. }
  238. else {
  239.  
  240. $li.css( 'z-index', 1 );
  241.  
  242. $desc.stop(true,true).hide();
  243.  
  244. }
  245.  
  246. $el.css({
  247. '-webkit-transform' : scaleExp,
  248. '-moz-transform' : scaleExp,
  249. '-o-transform' : scaleExp,
  250. '-ms-transform' : scaleExp,
  251. 'transform' : scaleExp,
  252. 'opacity' : ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
  253. });
  254.  
  255. });
  256.  
  257. },
  258. _loadImages = function( callback ) {
  259.  
  260. var loaded = 0,
  261. total = $elems.length;
  262.  
  263. $elems.each( function(i) {
  264.  
  265. var $el = $(this);
  266.  
  267. $('<img/>').load( function() {
  268.  
  269. ++loaded;
  270. if( loaded === total )
  271. callback.call();
  272.  
  273. }).attr( 'src', $el.attr('src') );
  274.  
  275. });
  276.  
  277. };
  278.  
  279. return {
  280. init : init
  281. };
  282.  
  283. })();
  284.  
  285. Photo.init();
  286.  
  287. });
  288. </script>
  289. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!