tumblr image resize - width auto
http://wmmmd.tumblr.com/
^theres the site.
http://www.tumblr.com/docs/en/custom_themes#posts < --Heres the documentation
question:
Ok so if you go to the link and click on a photo post (not a photoset, but
an indivual photo) I have made a lil lightbox for it.
Why can't i get the width of the image to scale proportional to the top.
Basically I am trying to have every image fit on the screen, all the time,
with enough room at the bottom, for the X, the caption, and that line of
text... any thoughts?
theres the code -->
<html>
<head>
<title>{Title}</title>
<divnk rel="shortcut icon" href="{Favicon}">
<divnk rel="alternate" type="appdivcation/rss+xml" href="{RSS}">
<link href='http://fonts.googleapis.com/css?family=Signika:400,300'
rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400'
rel='stylesheet' type='text/css'>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
</script>
<style>
body {
color:#A9D6D9;
font-family: 'Signika', sans-serif;
background: url(http://i.imgur.com/Obc50Hk.jpg);
background-size: 100%;
font-family: 'Quicksand', sans-serif;
}
h1 {
font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue,
Arial, sans-serif;
}
h2, .attribution-tags {
font-family: 'Quicksand', sans-serif;
}
.sub-title {
width: 100%;
}
h1 {
color: cyan;
font-size: 60px;
font-weight: bold;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
}
h1:hover {
color: white;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan 5px 1px 1px,
cyan 6px 1px 1px,
red -6px 2px 1px;
}
.floattyh
{
position: fixed;
top:14px;
right:-40px;
opacity: .6;
z-index:1000000000000;
}
.floattyh2
{
position: fixed;
top:94px;
right:-40px;
opacity: .6;
z-index:1000000000000;
}
.floattyh:hover, .floattyh2:hover {
right:-30px;
}
.transport
{
position: fixed;
top:65%;
right:-140px; opacity: .6;
z-index:1000000000000;
}
.transportleft
{
position: fixed;
top:65%;
left:-140px; opacity: .6;
text-align: right;
z-index:1000000000000;
}
.footer, #footer {
position: absolute;
bottom:0px;
width:100%;
margin: auto;
right: 70%;
opacity: .6;
}
.the_head {
margin: auto:
text-align: center;
BACKGROUND: URL(http://i.imgur.com/0vf1t2M.jpg);
PADDING-TOP:200PX;
padding-bottom: 30px;}
.textualpleasure, h1 {
margin: auto;
width: 100%;
TEXT-ALIGN: CENTER;
}
.LEFT {
MARGIN-LEFT:-10px;
text-align: right;
BACKGROUND: black;
width: 70%;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
-webkit-border-bottom-left-radius: 0;
-moz-border-bottom-left-radius: 0;
-border-bottom-left: 0;
-webkit-border-top-left-radius: 0;
-moz-border-top-left-radius: 0;
-border-top-left: 0;
opacity: .5;
PADDING:35PX;
box-shadow: inset 1px 3px 3px cyan;
}
.RIGHT {
MARGIN-left:200px;
text-align: left;
opacity: .5;
BACKGROUND: black;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
-webkit-border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
-border-bottom-left: 0;
-webkit-border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
-border-top-left: 0;
PADDING:35PX;
box-shadow: inset 1px 3px 3px red;
}
h1 a,
.load-more,
.exposed-nav-wrapper li a,
.sub-title,
.search-header {
color: {TitleColor};
}
.h-line {
background: {TitleColor};
}
a {
color: {LinkColor};
}
body {
MARGIN: AUTO;
width:100%
}
#posts {
margin: atuo;
}
h2 {
BACKGROUND: black;
-webkit-border-radius: 44px;
-moz-border-radius: 44px;
border-radius: 44px;
PADDING: 20PX;
box-shadow: inset 3px 2px 0px red;
font-size: 20px;
width: 300px;
margin-top: 100px;
margin: auto;
}
h2 a {color: white}
.posts{
margin-top:100px;
text-align: center;
}
.row {
margin: auto;
text-align: center;
padding-left: 100px;
}
.post{
background: white;
width:300px;
height: 300px;
float: left;
padding: 10px;
overflow: hidden;
margin:auto;
/*
position: relative;
text-align: center;
*/
}
.post img,.caption {
width:90%;
}
.griddy {
width: 90%;
margin: auto;
}
.hider_seeker {
display:none;
}
.clickit_boy {
}
</style>
<script>
$('.floattyh2').click(function(){
$('.hider_seeker').toggle('slow');
})
/* $("postcontainer").parent(".post").css("background", "yellow");
*/
</script>
<style>
.postcontainer {
/*
transform: scale(.2,.2);
-ms-transform: scale(.2,.2);
-webkit-transform: scale(.2,.2); */
}
</style>
</head>
<!-- Start of Tumblrbox Code -->
<body>
<div class="floattyh">
<h2>
<a href="http://en.wikipedia.org/wiki/Anaglyph_3D" target="_blank">What's
an anaglyph?</a>
</h2>
</div>
<div class="floattyh2">
<h2>
<span onclick="$('.hider_seeker').show('slow'); window.scrollTo(1,
300);;">About this stuff.</span>
</h2>
</div>
<div class='the_head'>
<h1>THE ASTONISHING 3D ART OF<BR> WILL DELPHIA<br><br></h1>
<div class="hider_seeker scaled">
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
</div>
</div>
<div id="posts" class="row">
{block:Posts}
{block:Text}
<div class="post text col-lg-3">
{block:Title}
<h3><a href="{Permadivnk}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
{/block:Text}
<style>
.photoset , .photo, .video, .Audio, .text, .quote {
margin: 20px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.photo_thatis_hover {
width:100%;
height: 80%;
position: fixed;
top: 0px;
left:0px;
display: block;
padding-top: 200px;
-moz-box-shadow: 0 12 10px #000000;
-webkit-box-shadow: 0 12 10px #000000;
box-shadow: 0 12 10px #000000;
z-index: 10000000;
text-align: center;
}
.the-black-back {
display: none;
position: fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
z-index: 100;
}
.closeit {
position: relative;
background-color: black;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
z-index: 1000000000000000000000000000000000000000000000000000;
font-size: 50px;
text-align: center;
padding: 20px;
margin:auto;
margin-top: -70px;
margin-bottom: 5px;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
width: 100px;
}
.closeit:hover {
position: relative;
background-color: #33bfb3;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
z-index: 1000000000000000000000000000000000000000000000000000;
font-size: 50px;
text-align: center;
padding: 20px;
margin:auto;
margin-top: -70px;
margin-bottom: 5px;
text-shadow: #1abc9c 0 0 1px,
#19B394 0 4px 3px,
#1AAD90 0 5px 3px,
#16a085 0 5px 1px,
cyan -14px 1px 300px,
cyan -16px 1px 300px,
cyan -22px 2px 300px;
transition: all 1s ease;
width: 100px;
}
}
.griddy_up {
margin: auto;
}
.theimage {
margin: auto;
}
</style>
{block:Photo}
<div class="post photo
col-lg-3">
<div
class="postcontainer">
<img class="griddy"
src="{PhotoURL-HighRes}"
alt="{PhotoAlt}"/>
<script>
$(".griddy").click(function(){
$(this).siblings(".photo_thatis_hover").show();
$(this).siblings(".the-black-back").show();
});
</script>
<div
class="the-black-back"></div>
<div
style="display:none"
class="photo_thatis_hover"
>
<img
class="theimage"
height="500px"
width=""
src="{PhotoURL-500}"
alt="{PhotoAlt}"/>
<p
align="center"><div
class="closeit">X</div><br><br>
{block:Caption}
<div
class="caption">{Caption}</div>
{/block:Caption}
<br><span
style="font-size:
10px">want to order
prints of this
photo? contact me
at willdelphia (at)
gmail...</span></p>
<script>
$(".closeit").click(function(){
$(".photo_thatis_hover").hide();
$(".the-black-back").hide();
});
$(".the-black-back").click(function(){
$(".photo_thatis_hover").hide();
$(".the-black-back").hide();
});
</script>
</div>
{block:Caption}
<div
class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama col-lg-3">
<div
class="postcontainer">
{divnkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{divnkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Panorama}
{block:Photoset}
<li class="post photoset">
{Photoset-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption} {ReblogButton size="20"}
</li>
{/block:Photoset}
{block:Quote}
<div class="post quote col-lg-3">
<div
class="postcontainer">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
</div>
{/block:Quote}
{block:divnk}
<div class="post divnk col-lg-3">
<div class="postcontainer">
<a href="{URL}" class="divnk" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
</div>
{/block:divnk}
{block:Chat}
<div class="post chat col-lg-3">
{block:Title}
<h3><a href="{Permadivnk}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:divnes}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{divne}
</div>
{/block:divnes}
</ul>
</div>
{/block:Chat}
{block:Video}
<div class="post video col-lg-3">
<div
class="postcontainer">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Video}
{block:Audio}
<div class="post audio col-lg-3">
<div
class="postcontainer">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
</div>
{/block:Audio}
{/block:Posts}
</div>
<div class="transportleft">
{block:PreviousPage}
<h2> <a href="{PreviousPage}">« Previous</a></h2>
{/block:PreviousPage}
</div>
<div class="transport">
{block:NextPage}
<h2> <a href="{NextPage}">Next »</a> </h2>
{/block:NextPage}
</div>
<div id="footer">
{block:PreviousPage}
{/block:PreviousPage}
{block:NextPage}
{/block:NextPage}
<a href="/archive">Archive</a>
</div>
<style>
.scootch {
left: -120px;
}
</style>
</body>
</html>
No comments:
Post a Comment