3 de mai de 2011

Template Galeria Flip

                  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://lh5.googleusercontent.com/-rjX1_pVZcx0/TX_DkpPrQQI/AAAAAAAAAJg/cuVezjmONDE/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://lh6.googleusercontent.com/-sTJ1JgtrFRI/TX_PQm1oSlI/AAAAAAAAAME/OrNGw8Z5ZTU/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://lh6.googleusercontent.com/-SVOj9CKLJlY/TX-H6l4wXZI/AAAAAAAAAHc/JXRAgRPPkjA/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://lh6.googleusercontent.com/-_UuC3MuZUEU/TX-H5PX-gJI/AAAAAAAAAHM/DeNaaqc-I74/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://lh4.googleusercontent.com/-pRfy3_rGN1I/TX-H6DzgPiI/AAAAAAAAAHY/9VEzff9fUTQ/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://lh5.googleusercontent.com/-669RNIHxvHc/TX-H523SH5I/AAAAAAAAAHQ/8r5_UrJ11Eg/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'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;iframes-styles-bubble&quot;, function() {
          if (window.iframes &amp;&amp; iframes.open) {
            iframes.open(
                &#39;//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&#39;,
                {
                  container: &quot;navbar-iframe-container&quot;,
                  id: &quot;navbar-iframe&quot;
                },
                {
                });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</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://lh6.googleusercontent.com/-6nNjVXCg-ZI/TX_EjRWtERI/AAAAAAAAAJ8/18Uz8_NihWc/s1600/blogger-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' src='https://lh6.googleusercontent.com/-XlD_1OWbtvM/TX_EmNZaCVI/AAAAAAAAAKA/UjW6yf_IFwc/s1600/facebook-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' src='https://lh4.googleusercontent.com/-ur4RyoQxS5A/TX_EukUmziI/AAAAAAAAAKI/vz2Y8QRZA54/s1600/twitter-bird2-square-webtreats.png'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' src='https://lh5.googleusercontent.com/-PJnfFgWnQkY/TX_F3vQHosI/AAAAAAAAAKQ/fEhH0OpeiG0/s1600/orkut-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' src='https://lh6.googleusercontent.com/-bzsfE56WHU8/TX_F5qRoWoI/AAAAAAAAAKU/Te0-qANNQ7k/s1600/rss-cube-webtreats.png'/></a>

<a href='ENDEREÇO DE SEU CANAL NO YOUTUBE' title='Meu canal no YouTube'><img alt='' src='https://lh4.googleusercontent.com/-wzELnDONBkY/TX_EsA0g3XI/AAAAAAAAAKE/k8Y3yHddw10/s1600/you-tube2-s-webtreats.png'/></a>


<a href='mailto: ENDEREÇO DE SEU MSN' title='contate-me'><img alt='' src='https://lh6.googleusercontent.com/-zbYpoa3L-eI/TX_F0STZALI/AAAAAAAAAKM/0CndlbI72R0/s1600/msn-logo-square-webtreats.png'/></a>

<a href='mailto: ENDEREÇO DE SEU EMAIL' title='contate-me'><img alt='' src='https://lh6.googleusercontent.com/-F7STZA84aw0/TX_F_S6hTJI/AAAAAAAAAKY/Dvxhk6EEx-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.

Mostruário de Templates / baseado no Simple | por © Templates e Acessórios ©2011