Se você quer um template para mostrar fotos e relacionar suas redes sociais, eis o template para você.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<script type='text/javascript'>
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Template Galeria
http://templateseacessorios.blogspot.com adaptado
http://tympanus.net/ desenvolvido
----------------------------------------------- */
body {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtaa1r0FIxZ4YsnJvzRwmgwqtPHY75QV2hz_gpLfLWZLqswshVPxk-2k_HdaqduhO-Y9XatnQeopS1gMLSQJGs6noDe_nNSWjfIYxahyphenhyphenIowZn_112r_XGHtJvFOTLY5X17yglw6lipO0Lp/s1600/aloha-turkey.gif) repeat;}
.menu-social{ width: 80px;}
.menu-social img{ border: 0; margin: -9px 1px; width: 80px;}
.tf_bg{
width:100%;
height:100%;
position:fixed;
top:0px;
left:90px;
}
.tf_bg img{
position:absolute;
top:0px; /*-482px; -(imgh/2 - wh/2) */
left:90px; /* calculate a negative value to center horizontally */
width:300px; /* windowwidth plus negative value of left */
/*height:300px; /* windowheight plus negative value of top */
z-index: 1;
display:none;
}
.tf_pattern{
position:absolute;
width:100%;
height:100%;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNgq6exY_55q_aHox1c6NINKyk8Id3KV2KYKQmvks8v1UEhoCE7A57sGF-1XFdQrW1QryEzwEsmSgKmhQurX8V1DYcmR4q7LKVMYITK7Hcog52n1Ea2MxQf3tPiir3DMd4jWbLYTOHo5wN/s1600/patterns+2.png) repeat top left;
z-index:2;
}
.tf_content{
position:absolute;
bottom:50px;
left:120px;
z-index:10;
display:none;
}
.tf_content h2{
color:#F9810B;
font-size:70px;
padding:0;
margin:0;
font-family: 'Dancing Script', arial, serif;
text-shadow:1px 1px 2px #000;
}
.tf_content p{
color:#fff;
padding:0;
margin:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-2IWYz9ZyJSlfR5FqKtrJLM10Go81fb1MuNbxx9PyX1CUTXhLBg4hFFx_m8lleWIFnCld04wY2eaLPwCQPYF4owX0BLHbGRyrXvZpHhpEg5HCM-9PUNjadjUC3bke7W_-LNmyMHqcboS/s1600/bg_content.png) repeat top left;
padding:40px;
width:500px;
font-family: 'PT Sans Narrow', arial, serif;
font-size:20px;
line-height:25px;
text-transform:uppercase;
text-shadow:2px 2px 1px #000;
-moz-box-shadow:1px 1px 5px #202020;
-webkit-box-shadow:1px 1px 5px #202020;
box-shadow:1px 1px 5px #202020;
border:4px solid #fff;
}
.tf_thumbs{
width: 350px; height: 280px;
position:absolute;
z-index:12;
right:40px;
top:4px;
margin-top:1px;
border:4px solid #fff;
-moz-box-shadow:1px 1px 5px #202020;
-webkit-box-shadow:1px 1px 5px #202020;
box-shadow:1px 1px 5px #202020;
-webkit-box-reflect:
below 5px
-webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.6, transparent),
to(rgb(18, 18, 18))
);
}
.tf_thumbs img{width: 350px; height: 220px;
display:block;
}
.tf_loading{
position:fixed;
top:50%;
left:50%;
margin:-30px 0px 0px -30px;
width:60px;
height:60px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvl8ZKEGwlGdKcmcLVb8WRa2QGzoygwKnoOyD29lYJmINvYJs_qiXFQxEoOrEjTvy96L4pPuUJpEhDU815jGxQPz6lCJBczqOA92VkDrM-Ndv3ZIitwGzxJbodYEQFOL6k3rIa3bSpKOdF/s1600/loader.gif) no-repeat center center;
z-index:999;
opacity:0.7;
}
.tf_next,
.tf_prev{
width:35px;
height:14px;
position:absolute;
top:50%;
right:410px;
z-index:100;
cursor:pointer;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVnEwshs_JrXiK9QNK4ht1Jd2TXRf9N_V0IEf8ivn13nhycV0NMEQlNsFirQGkWZJHGIZVKgiPGTxCwDfMC_MCYZJWxNIqWD1NQXqr0O3A2RmiOlulat3WZvTk0y6Z9ykHzStA2X1xT80/s1600/nav.png) no-repeat top left;
opacity:0.5;
}
.tf_next{
background-position:0px -14px;
margin-top:220px;
}
.tf_prev{
background-position:0px 0px;
margin-top:-55px;
}
.tf_next:hover,
.tf_prev:hover{
opacity:0.9;
}
.tf_zoom,
.tf_fullscreen{
width:20px;
height:20px;
position:absolute;
top:6px;
right:6px;
cursor:pointer;
z-index:100;
opacity:0.6;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSDvZv02hjkiJ5aYrxczIy8-4qJQ7-6N-5NTO4AmLi-9KWBBxGHJvQgGD1Rsa-vWhPaBfmSp7c7WrcAEHcsT931VyACBJn9E7V8blDl9aYJ_nLna2uWatW4ugLuXT1t9lGUpiyR_9p4_yd/s1600/icons.png) no-repeat top left;
}
.tf_zoom{
background-position:0px -20px;
}
.tf_fullscreen{
background-position:0px 0px;
}
.tf_zoom:hover,
.tf_fullscreen:hover{
opacity:0.9;
}
.reference{
position:fixed;
bottom:0px;
right:0px;
background:#000;
height:23px;
text-align:right;
width:100%;
text-shadow:1px 1px 1px #000;
z-index:999;
opacity:0.8;
}
.description{
position:fixed;
top:5px;
right:5px;
text-shadow:1px 1px 1px #000;
z-index:999;
}
.reference a, .description span{
color:#fff;
text-transform: uppercase;
margin-left:20px;
text-decoration:none;
font-family:Arial;
font-size:10px;
}
a.last{
float:left;
line-height:23px;
}
.reference a:hover{
text-shadow:0px 0px 1px #fff;
}
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/* Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(i){var g=i||window.event,f=[].slice.call(arguments,1),j=0,h=true,e=0,d=0;i=c.event.fix(g);i.type="mousewheel";if(i.wheelDelta){j=i.wheelDelta/120}if(i.detail){j=-i.detail/3}d=j;if(g.axis!==undefined&&g.axis===g.HORIZONTAL_AXIS){d=0;e=-1*j}if(g.wheelDeltaY!==undefined){d=g.wheelDeltaY/120}if(g.wheelDeltaX!==undefined){e=-1*g.wheelDeltaX/120}f.unshift(i,j,e,d);return c.event.handle.apply(this,f)}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* Flip! jQuery Plugin (http://lab.smashup.it/flip/)
* @author Luca Manno (luca@smashup.it) [http://i.smashup.it]
* [Original idea by Nicola Rizzo (thanks!)]
*
* @version 0.9.9 [Nov. 2009]
*
* @changelog
* v 0.9.9 -> Fix transparency over non-colored background. Added dontChangeColor option.
* Added $clone and $this parameters to on.. callback functions.
* Force hexadecimal color values. Made safe for noConflict use.
* Some refactoring. [Henrik Hjelte, Jul. 10, 2009]
* Added revert options, fixes and improvements on color management.
* Released in Nov 2009
* v 0.5 -> Added patch to make it work with Opera (thanks to Peter Siewert), Added callbacks [Feb. 1, 2008]
* v 0.4.1 -> Fixed a regression in Chrome and Safari caused by getTransparent [Oct. 1, 2008]
* v 0.4 -> Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds | Update: jquery.color.js plugin or jqueryUI still needed :( [Sept. 29, 2008]
* v 0.3 -> Now is possibile to define the content after the animation.
* (jQuery object or text/html is allowed) [Sept. 25, 2008]
* v 0.2 -> Fixed chainability and buggy innertext rendering (xNephilimx thanks!)
* v 0.1 -> Starting release [Sept. 11, 2008]
*
*/
(function($) {
function int_prop(fx){
fx.elem.style[ fx.prop ] = parseInt(fx.now,10) + fx.unit;
}
var throwError=function(message) {
throw({name:"jquery.flip.js plugin error",message:message});
};
var isIE6orOlder=function() {
// User agent sniffing is clearly out of fashion and $.browser will be be deprectad.
// Now, I can't think of a way to feature detect that IE6 doesn't show transparent
// borders in the correct way.
// Until then, this function will do, and be partly political correct, allowing
// 0.01 percent of the internet users to tweak with their UserAgent string.
//
// Not leadingWhiteSpace is to separate IE family from, well who knows?
// Maybe some version of Opera?
// The second guess behind this is that IE7+ will keep supporting maxHeight in the future.
// First guess changed to dean edwards ie sniffing http://dean.edwards.name/weblog/2007/03/sniff/
return (/*@cc_on!@*/false && (typeof document.body.style.maxHeight === "undefined"));
};
// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/
var colors = {
aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0],
transparent: [255,255,255]
};
var acceptHexColor=function(color) {
if(color && color.indexOf("#")==-1 && color.indexOf("(")==-1){
return "rgb("+colors[color].toString()+")";
} else {
return color;
}
};
$.extend( $.fx.step, {
borderTopWidth : int_prop,
borderBottomWidth : int_prop,
borderLeftWidth: int_prop,
borderRightWidth: int_prop
});
$.fn.revertFlip = function(){
return this.each( function(){
var $this = $(this);
$this.flip($this.data('flipRevertedSettings'));
});
};
$.fn.flip = function(settings){
return this.each( function() {
var $this=$(this), flipObj, $clone, dirOption, dirOptions, newContent, ie6=isIE6orOlder();
if($this.data('flipLock')){
return false;
}
var revertedSettings = {
direction: (function(direction){
switch(direction)
{
case "tb":
return "bt";
case "bt":
return "tb";
case "lr":
return "rl";
case "rl":
return "lr";
default:
return "bt";
}
})(settings.direction),
bgColor: acceptHexColor(settings.color) || "#FFF",
color: acceptHexColor(settings.bgColor) || $this.css("background-color"),
content: $this.html(),
speed: settings.speed || 500,
onBefore: settings.onBefore || function(){},
onEnd: settings.onEnd || function(){},
onAnimation: settings.onAnimation || function(){}
};
$this
.data('flipRevertedSettings',revertedSettings)
.data('flipLock',1)
.data('flipSettings',revertedSettings);
flipObj = {
width: $this.width(),
height: $this.height(),
bgColor: acceptHexColor(settings.bgColor) || $this.css("background-color"),
fontSize: $this.css("font-size") || "12px",
direction: settings.direction || "tb",
toColor: acceptHexColor(settings.color) || "#FFF",
speed: settings.speed || 500,
top: $this.offset().top,
left: $this.offset().left,
target: settings.content || null,
transparent: "transparent",
dontChangeColor: settings.dontChangeColor || false,
onBefore: settings.onBefore || function(){},
onEnd: settings.onEnd || function(){},
onAnimation: settings.onAnimation || function(){}
};
// This is the first part of a trick to support
// transparent borders using chroma filter for IE6
// The color below is arbitrary, lets just hope it is not used in the animation
ie6 && (flipObj.transparent="#123456");
$clone= $this.css("visibility","hidden")
.clone(true)
.data('flipLock',1)
.appendTo("body")
.html("")
.css({visibility:"visible",position:"absolute",left:flipObj.left,top:flipObj.top,margin:0,zIndex:9999,"-webkit-box-shadow":"0px 0px 0px #FFF","-moz-box-shadow":"0px 0px 0px #FFF"});
var defaultStart=function() {
return {
backgroundColor: flipObj.transparent,
fontSize:0,
lineHeight:0,
borderTopWidth:0,
borderLeftWidth:0,
borderRightWidth:0,
borderBottomWidth:0,
borderTopColor:flipObj.transparent,
borderBottomColor:flipObj.transparent,
borderLeftColor:flipObj.transparent,
borderRightColor:flipObj.transparent,
background: "none",
borderStyle:'solid',
height:0,
width:0
};
};
var defaultHorizontal=function() {
var waist=(flipObj.height/100)*25;
var start=defaultStart();
start.width=flipObj.width;
return {
"start": start,
"first": {
borderTopWidth: 0,
borderLeftWidth: waist,
borderRightWidth: waist,
borderBottomWidth: 0,
borderTopColor: '#FFF',
borderBottomColor: '#FFF',
top: (flipObj.top+(flipObj.height/2)),
left: (flipObj.left-waist)},
"second": {
borderBottomWidth: 0,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopColor: flipObj.transparent,
borderBottomColor: flipObj.transparent,
top: flipObj.top,
left: flipObj.left}
};
};
var defaultVertical=function() {
var waist=(flipObj.height/100)*25;
var start=defaultStart();
start.height=flipObj.height;
return {
"start": start,
"first": {
borderTopWidth: waist,
borderLeftWidth: 0,
borderRightWidth: 0,
borderBottomWidth: waist,
borderLeftColor: '#FFF',
borderRightColor: '#FFF',
top: flipObj.top-waist,
left: flipObj.left+(flipObj.width/2)},
"second": {
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderBottomWidth: 0,
borderLeftColor: flipObj.transparent,
borderRightColor: flipObj.transparent,
top: flipObj.top,
left: flipObj.left}
};
};
dirOptions = {
"tb": function () {
var d=defaultHorizontal();
d.start.borderTopWidth=flipObj.height;
d.start.borderTopColor=flipObj.bgColor;
d.second.borderBottomWidth= flipObj.height;
d.second.borderBottomColor= flipObj.toColor;
return d;
},
"bt": function () {
var d=defaultHorizontal();
d.start.borderBottomWidth=flipObj.height;
d.start.borderBottomColor= flipObj.bgColor;
d.second.borderTopWidth= flipObj.height;
d.second.borderTopColor= flipObj.toColor;
return d;
},
"lr": function () {
var d=defaultVertical();
d.start.borderLeftWidth=flipObj.width;
d.start.borderLeftColor=flipObj.bgColor;
d.second.borderRightWidth= flipObj.width;
d.second.borderRightColor= flipObj.toColor;
return d;
},
"rl": function () {
var d=defaultVertical();
d.start.borderRightWidth=flipObj.width;
d.start.borderRightColor=flipObj.bgColor;
d.second.borderLeftWidth= flipObj.width;
d.second.borderLeftColor= flipObj.toColor;
return d;
}
};
dirOption=dirOptions[flipObj.direction]();
// Second part of IE6 transparency trick.
ie6 && (dirOption.start.filter="chroma(color="+flipObj.transparent+")");
newContent = function(){
var target = flipObj.target;
return target && target.jquery ? target.html() : target;
};
$clone.queue(function(){
flipObj.onBefore($clone,$this);
$clone.html('').css(dirOption.start);
$clone.dequeue();
});
$clone.animate(dirOption.first,flipObj.speed);
$clone.queue(function(){
flipObj.onAnimation($clone,$this);
$clone.dequeue();
});
$clone.animate(dirOption.second,flipObj.speed);
$clone.queue(function(){
if (!flipObj.dontChangeColor) {
$this.css({backgroundColor: flipObj.toColor});
}
$this.css({visibility: "visible"});
var nC = newContent();
if(nC){$this.html(nC);}
$clone.remove();
flipObj.onEnd($clone,$this);
$this.removeData('flipLock');
$clone.dequeue();
});
});
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options);
o = $.meta ? $.extend({}, opts, this.data()) : opts;
var c = this.length,
l = 0;
return this.each(function() {
var $i = $(this);
$('<img/>').load(function(i){
++l;
if(l == c) o.onComplete();
}).attr('src',$i.attr('src'));
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
var $tf_bg = $('#tf_bg'),
$tf_bg_images = $tf_bg.find('img'),
$tf_bg_img = $tf_bg_images.eq(0),
$tf_thumbs = $('#tf_thumbs'),
total = $tf_bg_images.length,
current = 0,
$tf_content_wrapper = $('#tf_content_wrapper'),
$tf_next = $('#tf_next'),
$tf_prev = $('#tf_prev'),
$tf_loading = $('#tf_loading');
//preload the images
$tf_bg_images.preload({
onComplete : function(){
$tf_loading.hide();
init();
}
});
//shows the first image and initializes events
function init(){
//get dimentions for the image, based on the windows size
var dim = getImageDim($tf_bg_img);
//set the returned values and show the image
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
}).fadeIn();
//resizing the window resizes the $tf_bg_img
$(window).bind('resize',function(){
var dim = getImageDim($tf_bg_img);
$tf_bg_img.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : dim.top
});
});
//expand and fit the image to the screen
$('#tf_zoom').live('click',
function(){
if($tf_bg_img.is(':animated'))
return false;
var $this = $(this);
if($this.hasClass('tf_zoom')){
resize($tf_bg_img);
$this.addClass('tf_fullscreen')
.removeClass('tf_zoom');
}
else{
var dim = getImageDim($tf_bg_img);
$tf_bg_img.animate({
width : dim.width,
height : dim.height,
top : dim.top,
left : dim.left
},350);
$this.addClass('tf_zoom')
.removeClass('tf_fullscreen');
}
}
);
//click the arrow down, scrolls down
$tf_next.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('tb');
});
//click the arrow up, scrolls up
$tf_prev.bind('click',function(){
if($tf_bg_img.is(':animated'))
return false;
scroll('bt');
});
//mousewheel events - down / up button trigger the scroll down / up
$(document).mousewheel(function(e, delta) {
if($tf_bg_img.is(':animated'))
return false;
if(delta > 0)
scroll('bt');
else
scroll('tb');
return false;
});
//key events - down / up button trigger the scroll down / up
$(document).keydown(function(e){
if($tf_bg_img.is(':animated'))
return false;
switch(e.which){
case 38:
scroll('bt');
break;
case 40:
scroll('tb');
break;
}
});
}
//show next / prev image
function scroll(dir){
//if dir is "tb" (top -> bottom) increment current,
//else if "bt" decrement it
current = (dir == 'tb')?current + 1:current - 1;
//we want a circular slideshow,
//so we need to check the limits of current
if(current == total) current = 0;
else if(current < 0) current = total - 1;
//flip the thumb
$tf_thumbs.flip({
direction : dir,
speed : 400,
onBefore : function(){
//the new thumb is set here
var content = '<span id="tf_zoom" class="tf_zoom"></span>';
content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
$tf_thumbs.html(content);
}
});
//we get the next image
var $tf_bg_img_next = $tf_bg_images.eq(current),
//its dimentions
dim = getImageDim($tf_bg_img_next),
//the top should be one that makes the image out of the viewport
//the image should be positioned up or down depending on the direction
top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
//set the returned values and show the next image
$tf_bg_img_next.css({
width : dim.width,
height : dim.height,
left : dim.left,
top : top
}).show();
//now slide it to the viewport
$tf_bg_img_next.stop().animate({
top : dim.top
},1000);
//we want the old image to slide in the same direction, out of the viewport
var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
$tf_bg_img.stop().animate({
top : slideTo
},1000,function(){
//hide it
$(this).hide();
//the $tf_bg_img is now the shown image
$tf_bg_img = $tf_bg_img_next;
//show the description for the new image
$tf_content_wrapper.children()
.eq(current)
.show();
});
//hide the current description
$tf_content_wrapper.children(':visible')
.hide()
}
//animate the image to fit in the viewport
function resize($img){
var w_w = $(window).width(),
w_h = $(window).height(),
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h;
if(i_w > i_h){
new_w = w_w;
new_h = w_w * r_i;
if(new_h > w_h){
new_h = w_h;
new_w = w_h / r_i;
}
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
$img.animate({
width : new_w + 'px',
height : new_h + 'px',
top : '0px',
left : '0px'
},350);
}
//get dimentions of the image,
//in order to make it full size and centered
function getImageDim($img){
var w_w = $(window).width(),
w_h = $(window).height(),
r_w = w_h / w_w,
i_w = $img.width(),
i_h = $img.height(),
r_i = i_h / i_w,
new_w,new_h,
new_left,new_top;
if(r_w > r_i){
new_h = w_h;
new_w = w_h / r_i;
}
else{
new_h = w_w * r_i;
new_w = w_w;
}
return {
width : new_w + 'px',
height : new_h + 'px',
left : (w_w - new_w) / 2 + 'px',
top : (w_h - new_h) / 2 + 'px'
};
}
});
//]]>
</script>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("iframes-styles-bubble", function() {
if (window.iframes && iframes.open) {
iframes.open(
'//www.blogger.com/navbar.g?targetBlogID\0752871976977670684466\46blogName\75Template+Galeria+Flip\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75BLUE\46layoutType\75LAYOUTS\46searchRoot\75http://templategaleriaflip.blogspot.com/search\46blogLocale\75pt_BR\46v\0752\46homepageUrl\75http://templategaleriaflip.blogspot.com/\46vt\75-4059403982616385761',
{
container: "navbar-iframe-container",
id: "navbar-iframe"
},
{
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
</b:section>
<div class='menu-social'>
<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglf1yluGZvgz4T1eWKT73cRZNWwsTQ2aorqWdfBTQD-rGq2KSMCp6LeeTgPg8RjEQ7XR1gjsGo3lGMQ4xULy3z7Pmo87_NVY4S-0qeDUqcbzV-H_MI-dGdWPdu3h1dnFX8vzlflhvM7DHc/s1600/blogger-logo-square-webtreats.png'/></a>
<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqQX4_f_OHEMlAmVwhWNXf3MeXpX7Vpqox0MIFMH7inEvyYYwyPpzcxcLiQpXaYseOPwo-21smXfpab6tS5GbTGg5KkqYGyrAjF-rA6XgNwQuTI15SwtUm7g24-n35tjOo67uuba8dQOQ0/s1600/facebook-logo-square-webtreats.png'/></a>
<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHPf0m23sw4Um_3Bv-FhlCRc4KSlKLt5CsXNadK2iqm2_AdA5tvcr_hDxnWnJupTNBx8eYDAcEvUIFJA_gOlbrZAC7aiO9KIB65Ta0v4O0HdQiDVvAVVOSm3P43Ziy2oCY40zzl2fvib9/s1600/twitter-bird2-square-webtreats.png'/></a>
<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPM9OySomoVCWGbBguY3aQYvk0njiJpSoWd2w1X84DQUGb_S1n_R0ZI48d5bOQudnlG4JBZFdpR_4K6KDUY636lnz3ossFxC8isTn73TH97_oGL3c2ULnlIDyX6oPJpPCg8nczeuBPLWu/s1600/orkut-logo-square-webtreats.png'/></a>
<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrZWK50WFhdGyTv9TNPZv9iT_2P8bnDwyZxh5x3Ex2BODMOhJyfsUrVAonFwlt_0geiGP6JUiiiuGM0V75gMucU2RevP4AC2DsuypH1-EMFoPbXcH5oc8uNJHnuxVZfLYt5JLGlTB-L7VB/s1600/rss-cube-webtreats.png'/></a>
<a href='ENDEREÇO DE SEU CANAL NO YOUTUBE' title='Meu canal no YouTube'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUr1b-xR1gckpdtSvr2KmYQ8RUkWjcTy_3FyqYQKA1hns2xc7gROcW8ZHo1WfKSCqrTs3IsyUyfHBzMtTTOauKAsQ0XcA5RgLd8gcC9FAieiuvFcrU0zjrIbAUG7PKK5gIuSMhZbP9bxUa/s1600/you-tube2-s-webtreats.png'/></a>
<a href='mailto: ENDEREÇO DE SEU MSN' title='contate-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfEAm_hzR-fSFUQ8rYH-tWOxQ64esEwzUecAJxcbuf-GyZXBRCvGsYvGcfXWp_bl4DpAcw2OyBspL60Ci7hWQPzR4HEj4ofpCtu6RmxbtxRKcGjfMyYQUAaYUu58uVSlfYTLQRH2OvQOBx/s1600/msn-logo-square-webtreats.png'/></a>
<a href='mailto: ENDEREÇO DE SEU EMAIL' title='contate-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj826Kznm629h07yA8mlsnfl0KKBtDfMUod6lyMwyY20f13LeGYCdK87X0nmKqob8FJimDwJsgPxwsS-EoyKoNihuQ9rimujNgtXeDikPBdUuMIKRiSY8018Yu88aKAav83u2t3zL8A4U_i/s1600/mail-square-webtreats.png'/></a>
</div>
<div class='tf_loading' id='tf_loading'/>
<div class='tf_bg' id='tf_bg'>
<img alt='Image 1' longdesc='ENDEREÇO DA IMAGEM 1' src='REPITA AQUI O ENDEREÇO DA IMAGEM 1'/>
<img alt='Image 2' longdesc='ENDEREÇO DA IMAGEM 2' src='REPITA AQUI O ENDEREÇO DA IMAGEM 2'/>
<img alt='Image 3' longdesc='ENDEREÇO DA IMAGEM 3' src='REPITA AQUI O ENDEREÇO DA IMAGEM 3'/>
<img alt='Image 4' longdesc='ENDEREÇO DA IMAGEM 4' src='REPITA AQUI O ENDEREÇO DA IMAGEM 4'/>
<img alt='Image 5' longdesc='ENDEREÇO DA IMAGEM 5' src='REPITA AQUI O ENDEREÇO DA IMAGEM 5'/>
<img alt='Image 6' longdesc='ENDEREÇO DA IMAGEM 6' src='REPITA AQUI O ENDEREÇO DA IMAGEM 6'/>
<img alt='Image 7' longdesc='ENDEREÇO DA IMAGEM 7' src='REPITA AQUI O ENDEREÇO DA IMAGEM 7'/>
<img alt='Image 8' longdesc='ENDEREÇO DA IMAGEM 8' src='REPITA AQUI O ENDEREÇO DA IMAGEM 8'/>
<img alt='Image 9' longdesc='ENDEREÇO DA IMAGEM 9' src='REPITA AQUI O ENDEREÇO DA IMAGEM 9'/>
<img alt='Image 10' longdesc='ENDEREÇO DA IMAGEM 10' src='REPITA AQUI O ENDEREÇO DA IMAGEM 10'/>
<div class='tf_pattern'/>
</div>
<div class='tf_content_wrapper' id='tf_content_wrapper'>
<div class='tf_content' id='content1' style='display:block;'>
<h2>Título 1</h2>
<p>Texto da imagem 1</p>
</div>
<div class='tf_content' id='content2'>
<h2>Título 2</h2>
<p>Texto da imagem 2</p>
</div>
<div class='tf_content' id='content3'>
<h2>Título 3</h2>
<p>texto da iamgem 3</p>
</div>
<div class='tf_content' id='content4'>
<h2>Título 4</h2>
<p>Texto da imagem 4</p>
</div>
<div class='tf_content' id='content5'>
<h2>Título 5</h2>
<p>Texto da imagem 5</p>
</div>
<div class='tf_content' id='content6'>
<h2>Título 6</h2>
<p>Texto da imagem 6</p>
</div>
<div class='tf_content' id='content7'>
<h2>Título 7</h2>
<p>Texto da imagem 7</p>
</div>
<div class='tf_content' id='content8'>
<h2>Título 8</h2>
<p>Texto da imagem 8</p>
</div>
<div class='tf_content' id='content9'>
<h2>Título 9</h2>
<p>Texto da imagem 9</p>
</div>
<div class='tf_content' id='content10'>
<h2>Título 10</h2>
<p>Texto da imagem 10</p>
</div>
</div>
<div class='tf_thumbs' id='tf_thumbs'>
<span class='tf_zoom' id='tf_zoom'/>
<img alt='Thumb1' height='280' src='REPITA AQUI O ENDEREÇO DA IMAGEM 1' width='350'/>
</div>
<div class='tf_next' id='tf_next'/>
<div class='tf_prev' id='tf_prev'/>
</body>
</html>
Nenhum comentário:
Postar um comentário
Deixe seu comentário apenas sobre o template.