Scroll horizontal e vertical - Tumblr

dsjunior · Fevereiro 22, 2013

Oi, pessoal.

Estou criando um portfólio no Tumblr. Eu optei por scroll horizontal, que acho mais bonito e funcional para portfólio fotográfico.

<script src="http://static.tumblr.com/fiton9k/D0Plgbx3t/hscroll.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://static.tumblr.com/tcozonu/Wd4ln9dfo/jquery.js"></script>

A questão é que se eu criar páginas para dividir as fotos por categorias, o scroll horizontal não funciona.

Gostaria de saber se tem como adicionar scroll horizontal também para as páginas, para que pudessem ficar iguais a Home. Ou, em último caso, scroll vertical somente para as páginas.

Segue html completo:

<!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">
<head>
<title>{Title}</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}
<!--




-->

<script src="http://static.tumblr.com/fiton9k/D0Plgbx3t/hscroll.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://static.tumblr.com/tcozonu/Wd4ln9dfo/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

 $(".btn-slide").click(function(){
  $("#panelclick").slideToggle("slow");
  $(this).toggleClass("active"); return false;
 });
 
  
});
</script>

<script type="text/javascript" src="http://static.tumblr.com/tcozonu/C3Glxi2sg/popup.js"></script>



<script type="text/javascript" charset="utf-8">
$(function(){
$("#page-wrap").wrapInner("<table><tr>");
$(".post").wrap("<td>");
});
</script> 



<meta name="image:Bottom" content=""/>
<meta name="image:Permalink" content=""/>
<meta name="color:Background" content="#fff"/>
<meta name="color:Posts Background" content="#fff"/>
<meta name="color:Bottom Background" content="#fff"/>
<meta name="color:Text" content="#333"/>
<meta name="color:Links" content="#333"/>
<meta name="color:Bottom Links" content="#333"/>
<meta name="text:Space between posts" content="20"/>
<meta name="text:Bottom letter spacing" content="0.3"/>
<meta name="text:Margin top" content="50"/>
<meta name="text:Height posts" content="400"/>
<meta name="text:Text" content="12"/>
<meta name="text:Title" content="10"/>
<meta name="font:Body" content="Arial"/>
<meta name="font:Bottom" content="Lucida Grande, Tahoma"/>
<meta name="image:Background" content=""/>

<meta name="text:Info" content="Info"/>


<meta name="if:Fade Images" content="0"/>
<meta name="if:Lowercase title" content="0"/>
<meta name="if:Lowercase bottom links" content="0"/>
<meta name="if:Italic title" content="0"/>
<meta name="if:Cover background" content="0"/>
<meta name="if:Fade bottom" content="0"/>
<meta name="if:Show Archive link" content="1"/>


<style type="text/css">

* { margin: 0; padding: 0;}

body { 
padding: 20px; 
background:{color:Background} url('{image:Background}');
{block:ifCoverbackground}
background-size:auto 100%;
{/block:ifCoverbackground}
background-attachment:fixed;
color:{color:Text};
font-family: Helvetica;
font-size:13px;
}

a:link {color:{color:Links}; text-decoration:none;}
a:visited {color:{color:Links}; text-decoration:none;}
a:hover {color:{color:Links}; text-decoration:none;}
a:active {color:{color:Links}; text-decoration:none;} 

::-webkit-scrollbar-thumb:vertical{ 
background-color: {color:Borders};
height: 100px;
-webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal{ 
background-color: {color:Borders};
height: 10px;
-webkit-border-radius: 3px;
}

::-webkit-scrollbar{ 
height: 10px;
width: 8px; 
background-color: {color:#DCDCDC};
}
/* BASIC */
img {
border:none;
}


{block:IfFadeImages}
{block:IndexPage}
img{border:none;     opacity:0.85;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;}
img:hover{    opacity:1;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;}
{/block:IndexPage}
 {/block:IfFadeImages}





/* BASIC */


/* entries */
.post { 
{block:IndexPage}
height:{text:Height posts}px;
{/block:IndexPage}
{block:PermalinkPage} 
height:100%;
max-width:700px!important;
{/block:PermalinkPage} 
margin-top:{text:Margin top}px;
vertical-align: middle;
margin-right:{text:Space between posts}px; 
}

.post table td {
    vertical-align: middle;}
    

.post .text, .permanotes, .textperma{
padding:15px;
{block:IndexPage} 
min-height:150px;
{/block:IndexPage} 
{block:PermalinkPage} 
max-width:700px!important;
{/block:PermalinkPage} 
background:{color:Posts Background};
}

.text {
    vertical-align:50%;
    min-width:355px;
}

.textperma {
overflow:auto;
}

#photo img {
    {block:IndexPage}
height:{text:Height posts}px;
{/block:IndexPage}
{block:PermalinkPage} 
width:700px;
{/block:PermalinkPage} 
}

.permanotes {
overflow:auto; 
height:500px;
float:right;
right:20px;
position:absolute;
top:15px;
top:{text:Margin top}px;
width:500px;
}

/* entries */

/* bottom bar */

{block:PermalinkPage}
#botbar {
    display:none;
}
{/block:PermalinkPage}

#botbar {
width:100%;
min-height:70px;
bottom:0px;
left:0px;
position:fixed;
background:{color:Bottom Background} url('{image:Bottom}');
{block:ifFadebottom}
    opacity:0.5;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
{/block:ifFadebottom}
}

{block:ifFadebottom}
#botbar:hover {
    opacity:1;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
{/block:ifFadebottom}
    

#botbar a {
color:{color:Bottom Links};
}

.botcontenido {
top:50%;
padding:20px;
font-family: {font:Bottom};
font-size: 10px;
font-weight: lighter;
font-variant: normal;
{block:ifnotLowercasebottomlinks}
text-transform: uppercase;
{/block:ifnotLowercasebottomlinks}
{block:ifLowercasebottomlinks}
text-transform: none;
{/block:ifLowercasebottomlinks}
color: #666666;
letter-spacing: {text:Bottom letter spacing}em;
}

.bottitle {
font-family: {font:Bottom};
font-size: {text:Title}px;
font-weight: lighter;
font-variant: normal;
{block:ifLowercasetitle}
text-transform: none;
{/block:ifLowercasetitle}
{block:ifnotLowercasetitle}
text-transform: uppercase!important;
{/block:ifnotLowercasetitle}
{block:ifItalictitle}
font-style:italic!important;
{/block:ifItalictitle}
color: #666666;
margin-right:50px;
}

/* bottom bar */


.sub, .permalink {
font-family:"Lucida Grande", Tahoma;
font-size:80%;
}

.sub p {
display:none;
}

ul.chat {
list-style-type:none;
list-style-position:outside;
}

ul {
list-style-type:square;
list-style-position:inside;
}

ol {
list-style-position:inside;
}

iframe#tumblr_controls{position:fixed!important;}


blockquote {
margin-left:20px;
border-left: solid 4px gainsboro;
padding:2px;
}



 {block:Description}
#infostyle {
max-width:400px;
padding:30px;
background:#fff;
margin:auto 0px;
}
 {/block:Description}


.permalink {
    opacity:0.0;
 -webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity: 0.00;
min-width:40px;
width:40px!important;
min-height:20px;
padding:10px;
background: {color:background};
z-index:2;
position:absolute;
margin-right:20px;
float:right;
}

.permalink img {
    width:100%;
}

.post:hover .permalink {
      opacity:0.5; 
filter: alpha (opacity=5)
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}

ol.notes {
    list-style-type:none;
}

#panelclick  {padding:15px; display:none;}

{CustomCSS}
</style>

<script type="text/javascript" src="http://static.tumblr.com/twte3d7/BH7lio0yf/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/RhUlio0y7/lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
$j("img").lazyload({
effect: "fadeIn",
});
});</script>



</head>




<body>
             


<div id="botbar">

 <div id="panelclick">
 {Description}
 </div>
 
 
<div class="botcontenido">




 <span class="bottitle"><a href="/">{title}</a></span>






{block:AskEnabled}<a href="/ask">{AskLabel}  </a>{/block:AskEnabled}

{block:ifShowArchivelink}<a href="/archive">{lang:Archive}  {/block:ifShowArchivelink}</a>{block:SubmissionsEnabled}<a href="/submit">

{SubmitLabel}  </a>{/block:SubmissionsEnabled}{block:HasPages}{block:Pages}  <a href="{URL}">{Label}  </a> {/block:Pages}

{/block:HasPages}



<span style="padding-left:10px;">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">‹{lang:Prev} </a>
{/block:PreviousPage}



{block:NextPage}
<a href="{NextPage}">{lang:Next}›</a>
{/block:NextPage}
{/block:Pagination}
</span>

<br>
{CopyrightYears}


</div>



</div>





<div id="page-wrap"> <!--page-->




{block:Posts}
<div class="post"> <!--post-->

{block:IndexPage} 
<span class="permalink">
<a href="{permalink}">
{block:IfPermalinkImage}<img src="{image:Permalink}">{/block:IfPermalinkImage}
{block:IfnotPermalinkImage}{lang:Posted TimeAgo with NoteCount notes}{/block:IfnotPermalinkImage}
</a>
</span>
{/block:IndexPage} 


{block:Text}

<div class="text">
{block:Title}<span class="sub" style="text-transform:uppercase;"><b>{Title}</b></span>{/block:Title}
{Body}
</div>
{/block:Text}



{block:Photo}
<div id="photo">
<center>
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
</center>
</div>
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
{/block:Photo}

{block:Photoset}
{block:IndexPage} 
{Photoset-250}
{/block:IndexPage}
{block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
{/block:Photoset}

{block:Quote}
<div class="text">
<center>
<div style="font-style:oblique; font-size:150%; margin:10px;">"{Quote}"</div>
{block:Source}<span class="sub">{Source}</span>{/block:Source}
</center>
</div>
{/block:Quote}

{block:Link}
<div class="text">
<span class="sub" style="text-transform:uppercase;"><b><a href="{URL}">{Name}</a></b></span>
{block:Description} {Description}{/block:Description}
</div>
{/block:Link}

{block:Chat} 
<div class="text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}

<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="sub" style="text-transform:uppercase;">{Label}</span>
{/block:Label}

{Line}
</li>
{/block:Lines}
</ul>
</li>
</div>
{/block:Chat}


{block:Video}
{Video-500}
{/block:Video}

{block:Audio}
{block:AudioEmbed} 
{AudioEmbed-250}
{/block:AudioEmbed} 
{block:AudioPlayer}
<div class="text">

 
{block:AlbumArt}
<img src="{AlbumArtURL}" height="150px">
{/block:AlbumArt}

{block:AlbumArt}<span style="width:200px; float:right;">{/block:AlbumArt}{AudioPlayerBlack}

{block:TrackName}<i>"{TrackName}"</i>{/block:TrackName}
{block:Artist}by {Artist}{/block:Artist}
<span class="sub"><br>{PlayCountWithLabel}</span>


</div>
{/block:AudioPlayer} 
{/block:Audio}

{block:Answer}
<div class="text">

<img style="float:left; margin-right:2px; margin-bottom:2px;" src="{AskerPortraitURL-40}">
<big><span class="sub" style="text-transform:uppercase;"><b>{Asker}:</b></span> <i>{Question}</i></big><br>

{Answer}
</div>
{/block:Answer}




{block:PermalinkPage} 



<div class="textperma">
{block:Caption}{Caption}{/block:Caption}
<div class="sub"><center>
{block:HasTags} 
<div style="width:500px!important;">
{block:Tags}<a href="{TagURL}"><span style="text-transform:uppercase;">{Tag}  </span></a>{/block:Tags}
</div>{/block:HasTags} <br>
{block:RebloggedFrom} 
{lang:Originally from ReblogRootName 2}<br>
{lang:Reblogged from ReblogParentName 2}<br>
{/block:RebloggedFrom}
<br>
<br>
    {block:PermalinkPagination}
    <span style="text-transform:uppercase;">
{block:NextPost}  <a href="{NextPost}">‹{lang:Prev post}</a>{/block:NextPost}
<a href="/">BACK</a>
{block:PreviousPost}<a href="{PreviousPost}">{lang:Next post}›</a>  {/block:PreviousPost}
</div>

    {/block:PermalinkPagination}
</center></div>


</div>



{block:PostNotes}
<div class="permanotes">
<span class="sub" style="text-transform:uppercase;"><b>{NoteCountWithLabel}</b></span>
{PostNotes}
</div>

{/block:PostNotes}


{/block:PermalinkPage}



</div> <!--post-->
{/block:Posts}




</div> <!--page-->

{block:PermalinkPage}
<div style="position:relative; bottom:10px; right:10px;text-transform:uppercase;" class="sub"><a href="http://thaislehmann.tumblr.com/">Home </a></div> <!--DO NOT REMOVE, FUCKER!.... thanks ^^-->
{/block:PermalinkPage}





</body>

	

</html>

Diéssica · Fevereiro 23, 2013

Não está claro.

O scroll horizontal nas postagens (no seu caso, fotografias) está funcionando, certo? De que páginas você está falando? Páginas como "sobre", "contato"... em scroll?

Explique melhor.

dsjunior · Fevereiro 27, 2013

Sim! Nas postagens funciona corretamente.

As páginas nas quais me refiro são essas como "sobre" e "contato", também em scroll horizontal.

Quero colocar fotos nelas, pra separar tudo direitinho por categorias.

Consegui explicar corretamente?

dsjunior · Março 15, 2014

Estou ressurgindo esse tópico das trevas porque ainda não consegui resolver o problema, tampouco encontrar algum layout que suprisse a minha necessidade.

Alguém, por favor, sabe informar se tem como adicionar scroll horizontal também em páginas como "sobre" e "contato", por exemplo? A intenção é criar mais páginas para dividir as postagens e inserir fotografias nelas, pra não deixar a home bagunçada.

Entrar

Arquivado

Scroll horizontal e vertical - Tumblr

Recommended Posts

dsjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

dsjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dsjunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante