Need help with Tumblr Code / Click through / Lightbox |
Need help with Tumblr Code / Click through / Lightbox |
adammusic |
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> <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"> </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}~ {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"> </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> <i></i> <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> |
Lo-Fi Version | Time is now: 19th April 2024 - 09:59 PM |