The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Need help with Tumblr Code / Click through / Lightbox
adammusic
post Apr 11 2012, 06:01 PM
Post #1





Group: Members
Posts: 3
Joined: 5-February 12
Member No.: 16,403



factorystyling.tumblr.com
Im doing my friends tumblr. I took a theme and edited it. 2 things i need to fix...if i make a single post. theres no code to click the picture and open it in another window. Its unclickable. & With lightbox, when i view big pictures in lightbox it a skews the big pictures ... see the most recent most. How can i fix this? This is my code :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>


<!--

✧ "Opaque" is a theme for Tumblr.com, designed by

✧ JASON LUCAS

http://andbamnan.tumblr.com

http://opaque-theme.tumblr.com
http://www.tumblr.com/theme/31524

-->



<meta http-equiv="x-dns-prefetch-control" content="off"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}</title>
<meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{PostSummary}{/block:PermalinkPage}" />
<meta name="author" content="Jason Lucas" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css" />

<!-- Customizable Options -->
<meta name="color:Text" content="#979797"/>
<meta name="color:Links" content="#000000"/>

<meta name="font:Body" content="Helvetica"/>
<meta name="font:Header" content="Helvetica"/>

<meta name="if:Infinite Scroll" content="1" />
<meta name="if:Show Ask" content="1" />
<meta name="if:Show Archive" content="1" />
<meta name="if:Show RSS" content="1" />

<style type="text/css">


/*General Markup */

body {
color: {color:Text};
font-size: 10px;
font-family: {font:Body};
line-height: 15px;
letter-spacing: 1px;
cursor: default;
background: #FFFFFF;
background-image: url();
}

::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-track {
background-color: #FFF;
}

::-webkit-scrollbar-thumb {
background-color: #ffffff;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
}

::-webkit-scrollbar-thumb:window-inactive {
background-color: #ffffff;
}

a img, a img:hover {
border-width: 0px;
background-color: #FFF;
}

*:active, *:focus {
outline: 0px;
}

a {
font-family: {font:Header};
color: {color:Links};
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
font-style: normal;
font-size: 8px;
}

a.photo:hover {
background-color: #FFF;
}

img {
max-width: 530px;
opacity: 0.85;
border: 0;
filter:alpha(opacity=85);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}

h1 {
font-family: {font:Header};
text-transform: uppercase;
}

h2 {
font-family: {font:Header};
text-transform: uppercase;
}

h3 {
font-family: {font:Header};
text-transform: uppercase;
}

hr {
color: #FFF;
background-color: #FFF;
border: 0px dotted #ffffff;
margin: 15px 0;
border-style: dotted none none;
}

ol, ul {
padding: 0 0 0 10px;
margin: 0 0 8px 0;
}

p {
margin: 0;
padding-bottom: 8px;
}

blockquote, li blockquote {
border-left: 0px solid #ffffff;
padding: 0 0 0 10px;
margin: 0 0 8px 0;
}

blockquote > p:first-child {
padding: 0;
}

pre code {
font-family: 'Courier New', Courier, monospace;
background: #ffffff;
}

b, strong {
font-weight: normal;
color: #000000;
}

i, em {
font-family: {font:Header};
font-size: 10px;
font-style: italic;
}

.bull {
padding: 0 15px 0 15px;
}

.bull2 {
padding: 0 60px 0 60px;
}

.space {
padding-left: 15px;
}

.clear {
clear: both;
color: #FFF;
}

.right {
float: right;
}

.center {
width: 100%;
text-align: center;
}

/* End General Markup */


/* Content Container Markup */

#wrapper {
position: relative;
width: 100%;
padding: 0;
text-align: center;
margin: 0px auto;
}

#wrapper #header {
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
}

#wrapper #content {
position: relative;
width: 840px;
height: 100%;
margin: 50px auto 50px auto;
}

/* End Content Container Markup */


/* Header Markup */

.headbox {
width: 100%;
position: center;
overflow: hidden;
text-align: center;
background-color: #FFF;
border-bottom: 0px dotted #ffffff;

}

.headboxtitle {
text-transform: uppercase;
color: #000;
font-family: {font:Header};
padding: 20px;
border-bottom: 0px dotted #ffffff;
background-color: #ffffff;
}

.headboxtext {
width: 840px;
margin: 10;
text-align: center;
padding: 0px;
font-family: {font:Header};
text-transform: uppercase;
}

.headboxtext img {
display: none;
}

.headboxinfo {
padding: 0px;
border-top: 0px dotted #ffffff;
background-color: #Ffffff;
font-family: {font:Header};
}

.headboxtitle i, .headboxtitle em, .headboxtext i, .headboxtext em, .headboxinfo i, .headboxinfo em {
text-transform: lowercase;
font-size: 10px;
font-style: italic;
color: #ffffff;
}

/* End Header Markup */


/* Entry Markup */

.entry {
position: relative;
float: center;
text-align: center;
display: inline-block;
margin: 15px;
width: 250px;
background-color: #FFF;
-webkit-border-radius:4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-moz-box-shadow: 0px 2px 2px #ffffff;
-webkit-box-shadow: 0px 2px 2px #ffffff;
box-shadow: 0px 2px 2px #ffffff;
{block:PermalinkPage}
position: relative !important;
width: 500px;
background-color: transparent;
{/block:PermalinkPage}
}

.entry img {
display: block;
}

.entrytitle {
text-transform: uppercase;
color: #000;
font-family: {font:Header};
padding: 10px;
border-bottom: 1px dotted #ffffff;
background-color: #ffffff;
}

.entrytext {
padding: 10px;
text-align: center;
position: relative;
}

.entrytext hr {
margin-top: 2px;
}

.entrytext img {
{block:IndexPage}
max-width: 250px;
{/block:IndexPage}
{block:PermalinkPage}
max-width: 500px;
{/block:PermalinkPage}
margin: 7px 0 7px -10px;
}

.entrytags {
padding: 10px;
text-align: justify;
position: relative;
border-top: 1px dotted #ffffff;
}

.entrytags a {
font-style: italic;
text-transform: lowercase;
font-size: 10px;
color: #ffffff;
margin-right: 10px;
display: inline-block;
padding-left: 15px;
background-image: url();
background-repeat: no-repeat;
}

.tags {
min-height: 15px;
height: 15px;
display: block;
overflow: hidden;
}

.entryinfo {
padding: 10px;
border-top: 1px dotted #ffffff;
background-color: #ffffff;
font-family: {font:Header};
}

/* End Entry Markup */


/* Photo Entry Markup */

.photoinfo {
font-family: {font:Header};
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}

{block:IndexPage}
.entry:hover .photoinfo {
opacity: 0.9;
filter:alpha(opacity=0.9);
-webkit-transition-duration: .6s;
-moz-transition-duration: .6s;
}
{/block:IndexPage}

.photoinfotable {
height: 100%;
width: 100%;
}

.photoinfotd {
text-align: center;
padding: 10px;
width: 100%;
background-color: #FFF;
height: 10px;
}

.photoset .photoset_row .photoset_photo {
margin-left: 5px !important;
margin-top: 5px !important;
}

.photoset_row img {
margin-bottom: -5px;
}

#vignette {
display: none;
}

#tumblr_lightbox {
background-image: url('http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png') !important;
background-color: transparent !important;
}

#tumblr_lightbox img {
opacity: 1;
filter:alpha(opacity=100);
}

#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
-moz-box-shadow: 0px 2px 2px #CCC !important;
-webkit-box-shadow: 0px 2px 2px #CCC !important;
box-shadow: 0px 2px 2px #CCC !important;
}

/* End Photo Entry Markup */


/* Audio Entry Markup */

.audio {
font-family: {font:Header};
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

.audioplayer {
-webkit-border-radius: 18px;
border-radius: 18px;
-moz-border-radius: 18px;
height: 38px;
width:38px;
overflow: hidden;
background-color: #FFF;
position: absolute;
text-align: center;
top: 33px;
left: 33px;
opacity: 0.9;
filter:alpha(opacity=0.9);
}

.albumart {
width: 100px;
height: 100px;
float: left;
background-color: #FFF;
-moz-box-shadow:inset 3px 2px 20px #ffffff;
-webkit-box-shadow:inset 3px 2px 20px #ffffff;
box-shadow:inset 3px 2px 20px #ffffff;
}

/* End Photo Entry Markup */


/* Permalink Markup */

.permbox {
width: 280px;
position: relative;
overflow: hidden;
margin: 15px 15px 0 0;
background-color: transparent;
float: right;
}

.perminfo {
padding: 10px;
border-bottom: 1px dotted #ffffff;
font-family: {font:Header};
text-align: justify;
}

/* End Permalink Markup */


#pagination {
{block:IfInfiniteScroll}
display: none;
{/block:IfInfiniteScroll}
font-family: {font:Header};
width: 100%;
padding: 10px 0 0 0;
text-transform: uppercase;
margin-top: 50px;
background-color: #ffffff;
border-top: 1px dotted #ffffff;
position: relative;
bottom: 0px;
left: 0px;
/*display: none;*/
}

#infscr-loading {
z-index: 5000;
position: fixed;
text-align: left;
background-color: transparent;
margin-left: 845px;
bottom: 40px;
text-transform: uppercase;
}

#top-link {
position: fixed;
z-index: 5000;
width: 120px;
padding: 5px;
border-bottom: 1px dotted #ffffff;
right: 0;
bottom: 33px;
background-color: {color:Background};
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
}


/* Theme Credit -- Please do not delete */

#themecredit {
position: fixed;
z-index: 5;
background: transparent;
padding: 10px;
bottom: 0;
right: 0;
}

/* End Theme Credit */



/* Notes Markup */

ol.notes {
border-top: 1px dotted #ffffff;
text-align: justify;
text-transform: none;
width: 500px;
list-style-type: none;
margin: 30px 0 30px 15px;
padding: 30px 0;
}

ol.notes img.avatar {
margin: 5px 10px -4px 10px;
-moz-box-shadow: 0px 2px 2px #ffffff;
-webkit-box-shadow: 0px 2px 2px #ffffff;
box-shadow: 0px 2px 2px #EFEFEF;
}

ol.notes blockquote {
margin: 0 0 0 40px !important;
}

ol.notes blockquote a {
text-decoration: none;
}

li.note.more_notes_link_container {
padding-top: 30px;
}

/* End Notes Markup */



/* Your Custom CSS from the Tumblr Customize -> Advanced Options goes in here */

{CustomCSS}

/* End Your Custom CSS from the Tumblr Customize -> Advanced Options goes in here */



</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/glziqhp/DMKlqoahr/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/df28qmy/Mpalh3i8p/jquery.scrollto-1.4.0-min.js" type="text/javascript"></script>
{block:IfInfiniteScroll}<script src="http://static.tumblr.com/glziqhp/dTTlsbw8e/jquery.infinitescroll.min.js"></script>{/block:IfInfiniteScroll}

</head>



<body>

<div id="wrapper">

<div id="header">

<div class="headbox">

<div class="headboxtitle">

<h1><a href="/">{Title}</a>


</div>

<div class="headboxtext">



{Description}

</div>

<div class="headboxinfo">

{block:IfShowAsk}<a href="/ask">Contact</a>{/block:IfShowAsk}
{block:IfShowArchive}<span class="bull">∖</span><a href="/archive">Archive</a>{/block:IfShowArchive}
{block:IfShowRSS}<span class="bull">∖</span><a href="{RSS}">RSS</a>{/block:IfShowRSS}
{block:HasPages}{block:Pages}<span class="bull">∖</span><a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}

</div>

</div>

</div>

<div id="content">

{block:Posts}

{block:Text}

<div class="entry">

<div class="entrytitle">
<h3>{block:Title}<a href="{Permalink}" target="new">{Title}</a>{/block:Title}</h3>
</div>

<div class="entrytext" style="margin-bottom: -8px !important;">
{Body}
</div>

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF; border-bottom: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Text}

{block:Photo}

<div class="entry" margin="15px !important;">

{block:IndexPage}
<img src="{PhotoURL-250}" alt="{PhotoAlt}" width="250px">
{/block:IndexPage}

{block:PermalinkPage}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px">{LinkCloseTag}
{/block:PermalinkPage}

{block:IndexPage}
<div class="photoinfo">
<table class="photoinfotable">
<tr><td></td></tr>


{block:HasTags}
<hr style="margin: 5px -10px; border-color: #CCC; width: 250px;">
<div class="entrytags" style="padding: 0; border: 0; text-align: center;">
<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>
</div>
{/block:HasTags}
<tr><td></td></tr>
</table>
</div>
{/block:IndexPage}

</div>

{block:PermalinkPage}
<div class="permbox">



{block:HasTags}
<div class="entrytags" style="border: 0 !important;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}

<div class="entrytext">
{Caption}<br><br>
</div>

</div>
{/block:PermalinkPage}

<img src="http://static.tumblr.com/glziqhp/eRkls6pz6/white-90perc-opacity.png" style="display: none;">

{/block:Photo}

{block:Audio}

<div class="entry">

<div class="entrytitle">
<h3><a href="{Permalink}" target="new">{block:TrackName}{TrackName}{/block:TrackName}</a></h3>
</div>

<div class="entrytext" style="height: 100px; padding: 0;">
<div class="albumart">
{block:AlbumArt}
<img src="{AlbumArtURL}" class="albumart" style="margin: 0 !important;">
{/block:AlbumArt}
</div>

<div class="audioplayer">
<div style="margin: 5px 0 0 5px; width: 18px; overflow:hidden;" id="{postID}">
{AudioPlayerWhite}
</div>
</div>

<div style="padding: 10px 10px 10px 110px;">

<p>{block:Artist}<i>by</i>&nbsp;&nbsp;<a href="http://www.last.fm/music/{Artist}" target="new">{Artist}</a>{/block:Artist}</a></p>
<hr>
{block:IndexPage}
<span class="right" style="font-family: {font:Header};">{PlayCount} plays</span>
{/block:IndexPage}

</div>
</div>

{block:HasTags}
<div class="entrytags">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}

</div>

{block:PermalinkPage}
<div class="permbox">

<div class="perminfo">
&nbsp;
</div>

<div class="entrytext">
{Caption}
</div>

</div>
{/block:PermalinkPage}

{/block:Audio}

{block:Quote}

<div class="entry">

<div class="entrytitle">
<h3><a href="{Permalink}" target="new">"{Quote}"</a></h3>
</div>

<div class="entrytext" style="text-align: right !important;">
{block:Source}~&nbsp;&nbsp;&nbsp;{Source}{/block:Source}
</div>

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Quote}

{block:Chat}

<div class="entry">

<div class="entrytitle">
<h3>{block:Title}<a href="{Permalink}" target="new">{Title}</a>{/block:Title}</h3>
</div>

<div class="entrytext" style="margin-bottom: -8px !important;">

<table cellspacing="0">
{block:Lines}
<tr>{block:Label}<td class="name line{UserNumber}" style="padding-right: 10px; text-align: right;"><h1 style="margin-bottom: 8px;">{Label}</h1></td>{block:Label}<td class="words line{UserNumber}" style="padding-bottom: 8px;">{Line}</td></tr>
{/block:Lines}
</table>

</div>

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Chat}

{block:Video}

<div class="entry">

{Video-250}

{block:Caption}
<div class="entrytext" style="margin-bottom: -8px !important;">
<div class="caption">{Caption}</div>
</div>
{/block:Caption}

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Video}

{block:Answer}

<div class="entry">

<div class="entrytitle">
<b>{Asker} asked:</b>
</div>

<div class="entrytext" style="margin-bottom: -8px !important;">
<p>{Question}</p>
<hr>
<i>{Answer}</i>
</div>

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Answer}

{block:Link}

<div class="entry">

<div class="entrytitle">
<h3><a href="{URL}" target="new">{Name}</a></h3>
</div>

<div class="entrytext" style="margin-bottom: -8px !important;">
{Description}
</div>

{block:HasTags}
<div class="entrytags" style="border-top: 1px dotted #EFEFEF;">

<div class="tags">{block:Tags}<a href="{TagURL}" target="new">{Tag}</a>{/block:Tags}</div>

</div>
{/block:HasTags}



</div>

{/block:Link}

{block:Permalink}

<div class="clear">&nbsp;</div>

{PostNotes}

{/block:Permalink}

{block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}--> {/block:ContentSource}

{/block:Posts}

</div>

<div class="clear"></div>

<a href="#"><div id="top-link"><span class="top-link">Scroll To Top</span></div></a>

<div id="themecredit">

<a href="http://opaque-theme.tumblr.com/" target="new"></a>&nbsp;&nbsp;<i></i>&nbsp;&nbsp;<a href="http://andbamnan.tumblr.com"></a>

</div>

<ul id="pagination">
<li>
{block:Pagination}
{block:PreviousPage}<a href="{PreviousPage}">{/block:PreviousPage}{lang:PREV}{block:PreviousPage}</a>{/block:PreviousPage}
<span class="bull">✧</span>
{block:NextPage}<a href="{NextPage}" class="pagination_nextlink">{/block:NextPage}{lang:NEXT}{block:NextPage}</a>{/block:NextPage}
{/block:Pagination}
</li>
</ul>

</body>


<!-- Masonry JS -->
<script type="text/javascript">
$(function(){

var $container = $('#content');

$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.entry',
columnWidth: 280
});
});

$container.infinitescroll({
navSelector : '#pagination', // selector for the paged navigation
nextSelector : '#pagination li a.pagination_nextlink', // selector for the NEXT link (to page 2)
itemSelector : '.entry', // selector for all items you'll retrieve
loading: {
img: 'http://static.tumblr.com/glziqhp/1hJlo5wh1/ajax-loader__1_.gif',
donetext : ''
}
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);

});
</script>

<!-- End Masonry JS -->


<!-- Scroll To Top JS -->

<script type="text/javascript">
//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.hide(); //in case the user forgot
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$('#top-link').topLink({
min: 400,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

</script>

<!-- End Scroll To Top JS -->


<!-- jquery CSS fix for old browsers JS -->

<script type="text/javascript">

$(document).ready(function() {

$('.followlinks li:nth-child(4n+4)').css({'margin-right' : '0'});

$('.notes li:last-child').css({'margin-bottom' : '-10px'});

});

</script>

<!-- End jquery CSS fix for old browsers JS -->

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th November 2014 - 10:26 PM