|
|||||||
|
|
|
 |
|
|
Strumenti |
17-08-2012, 08:50
|
#1 |
|
Member
Iscritto dal: Jan 2010
Messaggi: 49
|
[CSS/JS/XHTML] LightBox Blogger Problemi
Salve. Dopo una letta dei topics riguardo lightbox, ecc.. non ho trovato nula in merito a ciò che cerco pertanto apro questo topic.
Inizio così: Ho un'immagine auto-resized visualizzata con lightbox in FireFox. Stessa cosa con Chrome, e l'immagine è diversa. Ovviamente conosco le differenze cross-browser che intercorrono, però devo risolvere queste differenze, in quanto in FF ne viene affetta la qualità dell'immagine mentre nella seconda no (anche se in firefox il caricamento e i movimenti della pagina sono più veloci, mentre in chrome no, comunque una cosa per volta...). Premettendo che per avere la lihgtbox in blogger, basta solo cliccare un pulsante in impostazioni, dato che l'immagine, una volta cliccato sulla thumbnail era in dimensioni originali, e quindi dovevi spostare sempre le scroll bar pezzo per pezzo (una tortura), ho modificato il codice o sovrapposto da qualche parte (e questo è un problema perchè non ricordo dove, poi posterò il codice intero così mi aiutate a capire), e ora quando clicco, l'immagine viene ridimensionata in automatico in base allo screen del browser quindi ora è perfetto, anche se vorrei aggiungere comunque un tasto "Full Size" (aiutatemi anche qui per favore). Solo che nel ridimensionare l'immagine, in Firefox l'immagine diventa sfocata mentre in chrome la scala perfettamente e niente viene sgranato, è perfetta. Ora, vorrei capire come risolvere questo inconveniente in FF, dato che viene talmente sgranata che non si posso leggere le parole e questo è un problema! Ecco alcune immagini con: FireFox Codice:
http://img191.imageshack.us/img191/2460/44813943.jpg Codice:
http://img189.imageshack.us/img189/985/39597893.jpg Provato in vari modi e dimensioni ed il risultato non cambia. Inoltre non penso sia direttamente collegato alla lightbox, ma proprio al metodo di visualizzazione delle immagini di firefox che differisce da chrome nelle immagini ridimensionate al di sotto della loro attuale risoluzione, dato che ho provato anche con immagini simili e senza lightbox, quindi ci vorrebbe un codice più preciso e specifico esclusivamente per firefox. Inoltre altro problema occorso recentemente, questa volta penso legato alla lghtbox, compare in firefox nelle immagini mostrate in lightbox, un bordo rosso intorno alle immagini di quelle mostrate, ma a random, mentre in chrome no, che cos'è? Come le tolgo? Ecco l'esempio: FireFox Codice:
http://img822.imageshack.us/img822/2834/ff2dq.jpg Codice:
http://img191.imageshack.us/img191/4262/ch2l.jpg Questo è tutto il codice del blog compreso di widget: Codice:
http://pastebin.com/C4h57Yij Codice HTML:
<?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> <title> <b:if cond='data:blog.homepageUrl == data:blog.url'> <data:blog.title/> <b:else/> <data:blog.pageName/> | <data:blog.title/> </b:if> </title> <b:include data='blog' name='all-head-content'/> <meta content='streaming anime' name='Keywords'/> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <meta content='h-avs' name='title'/> <meta content='Hentai Free Streaming' name='Description'/> <meta content='h-avs' name='copyright'/> <meta content='General' name='rating'/> <meta content='1 day' name='revisit'/> <meta content='1 day' name='revisit-after'/> <meta content='REI' name='author'/> <meta content='01/05/2012' name='creation_Date'/> <meta content='Public' name='doc-rights'/> <meta content='Completed' name='doc-class'/> <meta content='Anime anime Streaming streaming free Free gratis Gratis Video video' name='Keywords'/> <meta content='02E38052EDE0B4F54A2F33D4ED35151A' name='msvalidate.01'/> <meta content='hcw0aNiyvbPcgpXP9C5DIHgsB57hck-WK5ofmXesRyA' name='google-site-verification'/> <meta content='global' name='distribution'/> <meta content='10 days' name='revisit'/> <meta content='document' name='resource-type'/> <meta content='all' name='audience'/> <meta content='general' name='rating'/> <meta content='all' name='robots'/> <meta content='index, follow' name='robots'/> <meta content='en' name='language'/> <meta content='US' name='country'/> <meta content='blogger' name='generator'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'/> <b:skin><![CDATA[/* ------------------------------------------------------- */ #navbar-iframe { display: none !important; } /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#cc6600"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Oswald"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"> <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"> */ /* Use this with templates/template-twocol.html */ body { background: url("http://2.bp.blogspot.com/-mTj4eOc8Z6o/T73CSfm-N1I/AAAAAAAAAg0/v51VdpOSt0M/s000/bg000.jpg") repeat scroll 0 0 transparent; font: 87.5% Arial, sans-serif; color: #666; margin: 0; } a:link { color: #0593b6; text-decoration: none; outline: none; cursor: pointer; } a:visited { color: #0593b6; text-decoration: none; outline: none; cursor: pointer; } a:hover {text-decoration: underline; color: #999;} a img { border-width:0; } h1, h2, h3, h4, h5, h6 { color: #333; } /* Header -----------------------------------------------*/ #header { margin: 0; text-align: left; color:#666666; width: 500px; } #header h1 {color:#fff; margin: 0px; padding:0;text-transform: uppercase; line-height:1.2em; text-transform:normal; letter-spacing:0em; font-family: Oswald, Serif; font-size: 20px; font-weight: normal; } #header a { color:#fff; text-decoration:none; } #header a:hover { color:#999; } #header .description {display: none !important; margin:0; padding:0 5px 15px; max-width:400px; text-transform:normal; letter-spacing:0em; line-height: 1.0em; font: normal 110% Arial, Verdana, Sans-serif; color: #fff; } #header img { margin-left: auto; margin-right: auto; } #header123 { background: #222; padding: 20px; color: #fff; border-bottom: 4px solid #f5c209; margin-bottom: 0px; } #header123 .left { width: 50%; } #header123 .right { width: 50%; padding-top: 0px; } .nav { float: right; position: relative; top: -35px; right: 0px; } #header123 .nav li { float: left; margin: 0 0 20px 10px; list-style: none; } #header123 .nav li ul li { display: none; } #page { padding-top: 0px; background: url("http://2.bp.blogspot.com/-mTj4eOc8Z6o/T73CSfm-N1I/AAAAAAAAAg0/v51VdpOSt0M/s000/bg000.jpg") repeat scroll 0 0 transparent; padding-bottom: 0px; border-top: 0px solid #41679A; } .box { width: 982px; margin: 0 auto; } .nav a:link, .nav a:visited, .nav a:active { padding: 5px 10px;text-transform: uppercase; font-weight: normal;font-size: 12px; font-family: Oswald, Serif; } .nav a:hover { border: 0; } .nav a:active { } .nav a:visited { color: #999; } #header123 .nav a:link, #header .nav a:visited, #header .nav a:active { color: #999; } #header123 .nav a:hover { color: #fff; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 982px; margin:0 auto; text-align:left; font: normal normal 100% Arial, Serif; } #content-wrapper { } #main-wrapper { width: 687px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 280px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font: 25px 'Oswald',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform:normal; letter-spacing:0em; color:#999999; } /* Posts -----------------------------------------------*/ h2.date-header { margin:0em 0 0em; font: bold 100% 'Arial',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.1em; text-transform:noone; letter-spacing:0em; color:#000; } .post { margin: 0px 0px 15px 5px; padding: 10px 15px; overflow:hidden; background: white; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow: auto; border: 6px solid rgba(0,0,0,0.05); margin: 0 0 20px 0; padding: 10px 10px 10px 10px; -webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); } .post h3 { margin:.1em 0 0; padding:0 0 4px; font-size:2.0em; font-weight:normal; line-height:1.1em; color:#444; font-family: Oswald, Serif; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:#444; font-weight:normal; font-family: Oswald, Serif; } .post h3 strong, .post h3 a:hover { color:#0274be; } .post-body { margin:1em 0 1em 0; line-height:1.6em; } .post ul { margin: 5px 0px 5px 20px; padding: 0px 0px 0px 0px; } .post ol { margin: 5px 0px 5px 20px; padding: 0px 0px 0px 0px; } .post ol li { margin: 5px 0px 5px 10px; padding: 0px; } .post-body blockquote { line-height:1.3em; } .post-footer { margin: 1.7em 0 0 0; color:#444; text-transform:normal; letter-spacing:0em; font: italic 85% Arial, Verdana, Sans-serif; line-height: 1.4em; padding: 5px; border-left: 3px solid #ccc; } .comment-link { float: right; margin-left:.6em; padding-left: 20px; background: url(http://2.bp.blogspot.com/-D3TS7M6I9xM/T73CSdUOI5I/AAAAAAAAAg8/4F_Y8x2SEsM/s000/more_bg.png) no-repeat; margin-left:.6em; } .post img { padding:4px; border:1px solid #cccccc; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } #showlink { float: right; margin-right: 0px; margin-top: 8px; } #showlink a {background: #f7f8f9; background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ); border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px 10px; margin:0; -webkit-box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf; -moz-box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf; box-shadow: 0 0 1px #f9f9f9 inset, 1px 1px 1px #dfdfdf; color: #888; text-shadow: 0 1px 0 #fff; line-height: 1.2; cursor: pointer; font-size: 12px; } #showlink a:visited { color: #888; } #showlink a:hover {background: #f1f1f1; background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { margin-top: 10px; clear: both; line-height: 2.5em; } /* Sidebar Content ----------------------------------------------- */ .sidebar { color: #666; line-height: 1.5em; } .sidebar h2 { margin: .2em 0 .5em; font: normal 120% 'Oswald',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform: uppercase; letter-spacing:0em; color:#444; padding-left: 0px; border-bottom: 1px solid #ccc; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li {border-bottom: 1px dashed #eee; list-style-type:none; padding-left:1px; margin-left:0px; } .main .widget { } .sidebar .widget { margin: 0 0 15px 0; padding: 2px 8px; background: white; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; overflow: auto; border: 6px solid rgba(0,0,0,0.05); margin: 0 0 20px 0; padding: 10px 10px 10px 10px; -webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.2); } .main .Blog { border-bottom-width: 0; } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin-top: 0; margin-right: 5px; margin-bottom: 5px; margin-left: 0; padding: 4px; border: 1px solid #cccccc; } .profile-data { margin:0; text-transform:normal; letter-spacing:.1em; font: normal 115% 'Oswald', Arial, Verdana, Sans-serif; color: #555; font-weight: normal; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: italic normal 100% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif; text-transform: normal; letter-spacing: .1em; } /* Footer ----------------------------------------------- */ #footer-wrapper {width:100%; margin: 0 auto; background: url("http://2.bp.blogspot.com/-AW8SQBLme2Y/T73CTVPz3cI/AAAAAAAAAhE/mXJ0Xy3xcJ8/s000/footer.png") repeat; margin-top:5px;border-top: 4px solid #f5c209;border-bottom: 1px solid #444; } #footer { color:white; font-size:14px; margin:0 auto; text-align:left; width:982px; } #footer-wrapper #Text1 {margin-right:0px;} #footer-wrapper .widget { float:left; margin-right:20px; padding:20px 20px 0 20px; width:27%; } #footer-wrapper ul li { border-bottom:1px dashed #444; font-size:14px; padding-left:1px; margin-left:0px; line-height:1.8em; padding:5px 0 5px 0px;list-style-type: none; } #footer-wrapper ul { padding-left:1px; margin-left:0px; margin:0;padding:0; } #footer-wrapper a { color:#fff; text-decoration:none; } #footer-wrapper a:hover { color:#999; text-decoration:none; } #footer-wrapper h2 { color:#eeeeee;font-family:Oswald; font-size:20px;border-bottom: 1px solid #444; font-weight:normal; letter-spacing:-0.01em; margin:5px 0 5px; padding-bottom:5px; text-align:left; word-spacing:-1px; text-transform:uppercase; } /* Credit ----------------------------------------------- */ #credit {margin: 0 auto;padding: 20px 0px 0px 0px;width: 100%;height: 30px;font:normal normal 12px Arial; clear:both;color:#fff;font-weight:normal;text-align:center;background:#333;border-top: 1px solid #222;} #credit p {margin: 0;padding: 0} #credit a, .credit a:visited {color: #f5c209;font-weight:normal;text-decoration: none;} #credit a:hover{color: #3D72C0;text-decoration: underline;} ]]></b:skin> </head> <style> .comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 12px; margin-bottom: 16px; font-weight: normal; text-align:left; line-height: 1.4em; } .comments .comment .comment-actions a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; padding:2px 8px; margin-right:10px; } .comments .comment .comment-actions a:hover { text-decoration: none; background:#fff; border:1px solid #5AB1E2; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: none; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 40px; font-size:12px; background:#EBF5FE; } .comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px; } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-style:normal; font-weight:bold; } .comments .comments-content .user a { color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none; } .comments .comments-content .icon.blog-author { width: 18px; height: 18px; display: inline-block; margin: 0 0 -4px 6px; } .comments .comments-content .datetime { color: #999999; float: right; font-size: 11px; text-decoration: none; } .comments .comments-content, .comments .comments-content .comment-content { margin:0 0 8px; } .comment-header {background-color: #F4F4F4; border: thin solid #E6E6E6; margin-bottom: 5px; padding: 5px; } .comments .comments-content .comment-content { text-align:none; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .continue { cursor: pointer; } .comments .continue a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; padding:2px 8px; margin-right:10px; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container {background-image: url("http://4.bp.blogspot.com/-EpPl3-jpL8k/T73CTuX9WzI/AAAAAAAAAhM/sSfgrvAVV9o/s000/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden; border: 1px solid #DDDDDD;} .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; } /* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } } </style> <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'><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <iframe src="//www.blogger.com/navbar.g?targetBlogID=5039594598112627463&amp;blogName=h-avs&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=LAYOUTS&amp;searchRoot=http://h-avs.blogspot.com/search&amp;blogLocale=en_US&amp;v=1&amp;homepageUrl=http://h-avs.blogspot.com/&amp;vt=6312467332333953248" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe> <div></div><script type="text/javascript"> (function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js'; var head = document.getElementsByTagName('head')[0]; if (head) { head.appendChild(script); }})(); </script> </b:includable> </b:widget> </b:section> <div id='header123'> <div class='box'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='h-avs (Header)' type='Header'> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "REPLACE"'> <!--Show just the image, no text--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> </div> <b:else/> <!-- Show image as background to text. You can't really calculate the width reliably in JS because margins are not taken into account by any of clientWidth, offsetWidth or scrollWidth, so we don't force a minimum width if the user is using shrink to fit. This results in a margin-width's worth of pixels being cropped. If the user is not using shrink to fit then we expand the header. --> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + "background-repeat: no-repeat; "' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:include name='title'/> </h1> </div> <b:include name='description'/> </div> </b:if> </b:includable> </b:widget> </b:section> <!-- Pages-based menu added by BTemplates.com --> <div class='nav'><div> <!-- Pages --> <b:section id='pages' maxwidgets='1' showaddelement='no'/> <!-- /Pages --> </div></div> </div></div> <div id='page'> <div class='box'> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='content-wrapper'> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/> »</a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>« <data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:includable> <b:includable id='shareButtons' var='post'> <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if> </b:includable> <b:includable id='threaded_comment_js' var='post'> <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/> <script type='text/javascript'> (function() { var items = <data:post.commentJso/>; var msgs = <data:post.commentMsgs/>; var config = <data:post.commentConfig/>; // <![CDATA[ var cursor = null; if (items && items.length > 0) { cursor = parseInt(items[items.length - 1].timestamp) + 1; } var bodyFromEntry = function(entry) { if (entry.gd$extendedProperty) { for (var k in entry.gd$extendedProperty) { if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') { return '<span class="deleted-comment">' + entry.content.$t + '</span>'; } } } return entry.content.$t; } var parse = function(data) { cursor = null; var comments = []; if (data && data.feed && data.feed.entry) { for (var i = 0, entry; entry = data.feed.entry[i]; i++) { var comment = {}; // comment ID, parsed out of the original id format var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t); comment.id = id ? id[2] : null; comment.body = bodyFromEntry(entry); comment.timestamp = Date.parse(entry.published.$t) + ''; if (entry.author && entry.author.constructor === Array) { var auth = entry.author[0]; if (auth) { comment.author = { name: (auth.name ? auth.name.$t : undefined), profileUrl: (auth.uri ? auth.uri.$t : undefined), avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined) }; } } if (entry.link) { if (entry.link[2]) { comment.link = comment.permalink = entry.link[2].href; } if (entry.link[3]) { var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href); if (pid && pid[1]) { comment.parentId = pid[1]; } } } comment.deleteclass = 'item-control blog-admin'; if (entry.gd$extendedProperty) { for (var k in entry.gd$extendedProperty) { if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') { comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value; } } } comments.push(comment); } } return comments; }; var paginator = function(callback) { if (hasMore()) { var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50'; if (cursor) { url += '&published-min=' + new Date(cursor).toISOString(); } window.bloggercomments = function(data) { var parsed = parse(data); cursor = parsed.length < 50 ? null : parseInt(parsed[parsed.length - 1].timestamp) + 1 callback(parsed); window.bloggercomments = null; } url += '&callback=bloggercomments'; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } }; var hasMore = function() { return !!cursor; }; var getMeta = function(key, comment) { if ('iswriter' == key) { var matches = !!comment.author && comment.author.name == config.authorName && comment.author.profileUrl == config.authorUrl; return matches ? 'true' : ''; } else if ('deletelink' == key) { return config.baseUri + '/delete-comment.g?blogID=' + config.blogId + '&postID=' + comment.id; } else if ('deleteclass' == key) { return comment.deleteclass; } return ''; }; var replybox = null; var replyUrlParts = null; var replyParent = undefined; var onReply = function(commentId, domId) { if (replybox == null) { // lazily cache replybox, and adjust to suit this style: replybox = document.getElementById('comment-editor'); if (replybox != null) { replybox.height = '250px'; replybox.style.display = 'block'; replyUrlParts = replybox.src.split('#'); } } if (replybox && (commentId !== replyParent)) { document.getElementById(domId).insertBefore(replybox, null); replybox.src = replyUrlParts[0] + (commentId ? '&parentID=' + commentId : '') + '#' + replyUrlParts[1]; replyParent = commentId; } }; var hash = (window.location.hash || '#').substring(1); var startThread, targetComment; if (/^comment-form_/.test(hash)) { startThread = hash.substring('comment-form_'.length); } else if (/^c[0-9]+$/.test(hash)) { targetComment = hash.substring(1); } // Configure commenting API: var configJso = { 'maxDepth': config.maxThreadDepth }; var provider = { 'id': config.postId, 'data': items, 'loadNext': paginator, 'hasMore': hasMore, 'getMeta': getMeta, 'onReply': onReply, 'rendered': true, 'initComment': targetComment, 'initReplyThread': startThread, 'config': configJso, 'messages': msgs }; var render = function() { if (window.goog && window.goog.comments) { var holder = document.getElementById('comment-holder'); window.goog.comments.render(holder, provider); } }; // render now, or queue to render when library loads: if (window.goog && window.goog.comments) { render(); } else { window.goog = window.goog || {}; window.goog.comments = window.goog.comments || {}; window.goog.comments.loadQueue = window.goog.comments.loadQueue || []; window.goog.comments.loadQueue.push(render); } })(); // ]]> </script> </b:includable> <b:includable id='backlinks' var='post'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <b:if cond='data:post.numBacklinks != 0'> <dl class='comments-block' id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'>*</span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> </b:if> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a> </p> </b:includable> <b:includable id='mobile-main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <b:if cond='data:blog.pageType == "index"'> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-index-post'/> </b:loop> <b:else/> <b:loop values='data:posts' var='post'> <b:include data='post' name='mobile-post'/> </b:loop> </b:if> </div> <b:include name='mobile-nextprev'/> </b:includable> <b:includable id='post' var='post'> <div class='post hentry'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body entry-content'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span id='showlink'><a expr:href='data:post.url'>Continue</a></span> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> </div> </b:if> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> <img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </div> <div class='post-footer-line post-footer-line-2'><span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <!-- Feature added by BTemplates.com --> <b:if cond='data:top.showReactions'> <span class='reaction-buttons'> <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr> <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'> <span class='reactions-label'> <data:top.reactionsLabel/></span>*</td> <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td> </tr></table> </span> </b:if> </div> <div class='post-footer-line post-footer-line-3'><span class='post-location'> <b:if cond='data:top.showLocation'> <b:if cond='data:post.location'> <data:postLocationLabel/> <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a> </b:if> </b:if> </span> </div> </div> </div> </b:includable> <b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>'); </script> </div> </b:includable> <b:includable id='threaded_comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <div class='comments-content'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='threaded_comment_js'/> </b:if> <div id='comment-holder'> <data:post.commentHtml/> </div> </div> <p class='comment-footer'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> </p> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'> <img src='http://www.blogger.com/img/icon_delete13.gif'/> </a> </span> </b:includable> <b:includable id='mobile-nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <div class='mobile-link-button' id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a> </div> </b:if> <b:if cond='data:olderPageUrl'> <div class='mobile-link-button' id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&rsaquo;</a> </div> </b:if> <div class='mobile-link-button' id='blog-pager-home-link'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </div> <div class='mobile-desktop-link'> <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a> </div> </div> <div class='clear'/> </b:includable> <b:includable id='mobile-post' var='post'> <div class='date-outer'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <div class='date-posts'> <div class='post-outer'> <div class='post hentry uncustomized-post-template'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <b:if cond='data:post.authorProfileUrl'> <span class='fn'> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <data:post.author/> </a> </span> <b:else/> <span class='fn'><data:post.author/></span> </b:if> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </b:if> </span> <!-- Feature added by BTemplates.com --> <b:if cond='data:post.sharePostUrl'> <div class='post-share-buttons'> <b:include data='post' name='shareButtons'/> </div> </b:if> </div> <div class='post-footer-line post-footer-line-2'> <b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <a href='javascript:void(0);'><data:shareMsg/></a> </div> </b:if> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div> </b:if> </div> </div> </div> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </div> </div> </div> </b:includable> <b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'> <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </b:if> </b:includable> <b:includable id='main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:defaultAdStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:post.includeAd'> <b:if cond='data:post.isFirstPost'> <data:defaultAdEnd/> <b:else/> <data:adEnd/> </b:if> <div class='inline-ad'> <data:adCode/> </div> <data:adStart/> </b:if> <b:if cond='data:post.trackLatency'> <data:post.latencyJs/> </b:if> </b:loop> <data:adEnd/> </div> <!-- navigation --> <b:include name='nextprev'/> <!-- feed links --> <b:include name='feedLinks'/> <b:if cond='data:top.showStars'> <script src='http://www.google.com/jsapi' type='text/javascript'/> <script type='text/javascript'> google.load("annotations", "1", {"locale": "<data:top.languageCode/>"}); function initialize() { google.annotations.setApplicationId(<data:top.blogspotReviews/>); google.annotations.createAll(); google.annotations.fetch(); } google.setOnLoadCallback(initialize); </script> </b:if> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'> <img src='http://www.blogger.com/img/icon_delete13.gif'/> </a> </span> </b:includable> <b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div class='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable> <b:includable id='threaded-comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/> <b:else/> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>'); </script> </div> </b:includable> <b:includable id='mobile-index-post' var='post'> <div class='mobile-date-outer date-outer'> <b:if cond='data:post.dateHeader'> <div class='date-header'> <span><data:post.dateHeader/></span> </div> </b:if> <div class='mobile-post-outer'> <a expr:href='data:post.url'> <h3 class='mobile-index-title entry-title'> <data:post.title/> </h3> <div class='mobile-index-arrow'>&rsaquo;</div> <div class='mobile-index-contents'> <b:if cond='data:post.thumbnailUrl'> <div class='mobile-index-thumbnail'> <div class='Image'> <img expr:src='data:post.thumbnailUrl'/> </div> </div> </b:if> <div class='post-body'> <b:if cond='data:post.snippet'><data:post.snippet/></b:if> </div> </div> <div style='clear: both;'/> </a> <div class='mobile-index-comment'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.numComments != 0'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </b:if> </div> </div> </div> </b:includable> <b:includable id='feedLinksBody' var='links'> <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable> <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments == 1'> 1 <data:commentLabel/>: <b:else/> <data:post.numComments/> <data:commentLabelPlural/>: </b:if> </h4> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a> * <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a> * <data:post.commentRangeText/> * <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a> * <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a> </span> </b:if> <dl expr:class='data:post.avatarIndentClass' id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl> <b:if cond='data:post.commentPagingRequired'> <span class='paging-control-container'> <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> <data:post.oldestLinkText/> </a> <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> <data:post.olderLinkText/> </a> * <data:post.commentRangeText/> * <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> <data:post.newerLinkText/> </a> <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> <data:post.newestLinkText/> </a> </span> </b:if> <p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <div id='backlinks-container'> <div expr:id='data:widget.instanceId + "_backlinks-container"'> <b:if cond='data:post.showBacklinks'> <b:include data='post' name='backlinks'/> </b:if> </div> </div> </div> </b:includable> </b:widget> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='HTML5' locked='false' title='Donations' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='HTML4' locked='false' title='Shout Box' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Label1' locked='false' title='Anime' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='Label2' locked='false' title='Doujinshi' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit'/> </div> </b:includable> </b:widget> </b:section> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'>*</div> </div> <!-- end content-wrapper --> </div></div> </div></div><!-- end outer-wrapper --> <div id='footer-wrapper'> <b:section class='footer' growth='horizontal' id='footer' maxwidgets='6' showaddelement='yes'> <b:widget id='Stats1' locked='false' title='Stats' type='Stats'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + "_content"' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> </b:if> <b:include name='quickedit'/> </div> </div> </b:includable> </b:widget> <b:widget id='HTML2' locked='false' title='Requirements' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='HTML1' locked='false' title='About' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> <div class='clear' id='copyright'> </div> <br/> </div> <div id='credit'> <div class='credit'> <p>Copyright © 2012 by <a expr:href='data:blog.homepageUrl' name='bottom'><data:blog.title/></a> All rights reserved.</p> </div> </div> </body> </html> - Risolvere il problema di sfocamento in Firefox delle immagini, dovute al resize automatico, mentre in chrome il tutto lavora perfettamente. - Bordo rosso in immagini a random solo su FF su chrome no mostrate in lightbox. - Come inserire un tasto "Full Size" vicino all'immagine ridimensionata visualizzata in lighttbox. - Aiutatemi a ricordare ed ad indicarmi, dove ho inserito e che codice ho inserito (guardando il codice del blog completo che ho postato sopra) per il resize automatico allo screen del browser quando clicco sulla lightbox di un'immagine. - Problema di lentezza nei movimenti e nei caricamenti della pagina con le immagini ridimensionate (avviene solo su chrome)! E questo è tutto, lo so che sono tante cose, vedete quelle dove potete aiutarmi, e grazie in anticipo. Ah, dato che è un anno e passa, non vi preoccupate di dare risposta troppo distanti da questo messaggio. Dato che è una cosa a lungo termine. Comunque ovviamente prima sistemo prima risolvo! Grazie ancora, ciao. Ah, e se avete bisogno di altre info per aiutarmi, ecc.. chiedete e ve le fornirò! Ultima modifica di L3n : 17-08-2012 alle 09:44. |
|
|
|
18-08-2012, 16:27
|
#2 |
|
Member
Iscritto dal: Jan 2010
Messaggi: 49
|
Ok. Anche se nessuno mi ha aiutato, sembra che sia riuscito da solo a risolvere il problema della lentezza nei caricamenti su chrome. Erano i thumbnails, ne ho messi direttamente delle dimensioni piccole, senza aspettare il ridimensionamento automatico del browser in base ai valori forzati html di width e height, e sembra funzionare.
Il problema dei bordi rossi che compaiono a random su alcune immagini aperte in lightbox su firefox, se devo essere sincero, non ne ho proprio la più pallida idea di cosa sia dovuto, l'unica cosa che penso è che bisogni specificare in modo più preciso nel codice questa sottigliezza, dato che in chrome non compare, sarà sicuramente dovuto ad una sintassi che necessita un po' più di pignoleria, ma comunque non riesco ad individuare il codice in questione. Il problema dello sfocamento delle immagini in FF (Punto che mi preme più di tutti), è troppo difficile e non ci riesco proprio. Il codice di autoresize, non lo trovo neanche. L'unica cosa che adesso, invece, sto cercando di fare, e che sembra l'unica fattibile nelle mie capacità, è quella dell'inserimento di un tasto full size per l'immagine in lightbox, ma non è per niente semplice come al solito, dato che su blogger, non ho i 3 soliti files di lightbox di .css .js ecc.., quindi mi risulta alquanto difficile il tutto anche se trovassi la soluzione... Come sempre aspetto il vostro valido aiuto, voi che siete più esperti di me! EDIT: Quando metto la spunta in "Impostazioni" su Blogger per attivare la lightbox, credo che comunque ci siano i tre files .css e .js ecc.. di una lightbox predefinita per tutti gli utilizzatori di blogspot che la attivano, sapete i links di questi, così da poter leggere il codice ed andarlo a sovrascriverlo (sia css che js) con il comando "!important" nel codice personale del mio blog? Perchè sembra che abbia trovato il modo per aggiungere il tasto full size, ma, dato che devo modificare delle righe di js e di css, il css posso sovrascriverlo con "!important", ma per il js non so come fare per sovrascriverlo e non so se "!important" funziona con il js, penso di no, oppure basta che lo scrivo nel mio codice del blog e si sovrascrive automaticamente?? Non penso, però... Help... RE-EDIT: Ok, ho trovato i files da dove attinge per la lightbox blogger Codice:
http://www.blogger.com/static/v1/jsbin/3375576448-lbx.js Codice:
http://www.blogger.com/static/v1/v-css/228702327-lightbox_bundle.css EDIT3: Niente, il codice in js è troppo diverso, per il codice che volevo inserire, anche se trovassi un modo per sovrascriverlo, non saprei dove inserirlo... Devo cambiare strategia.. Sempre in attesa di aiuti. EDIT4: Ecco il codice per il tasto full-size. Codice:
http://pastebin.com/xZgX5UNW EDIT5: Sembra che per il tasto per il full screen non riesca a trovare nulla, nè a capirci. Help. Adesso come adesso ho studiato il fatto dello sfocamento delle immagini in FF, e da quanto ho capito, dipende dall'algoritmo di image scaling utilizzato dal browser in sè, in questo caso mozilla, che è buono per le immagini upsized, ma non per le downsized, cioè quello che mi serve a me, perchè per le downsized il migliore è il bicubic, ma a quanto pare, anche nelle css di firefox per l'image-rendering, non è previsto tale attributo che permetta questo algoritmo, mentre in chrome per esempio si, come anche in ie. Insomma, è un bug di FF bello e buono, quindi... non so se avete vie alternative per aggirare ciò. Per i bordi rossi in FF intorno alle immagini sempre alto mare. Ah, un'altra cosa. Forse il codice che ho inserito per l'autoresize dell'immagine in base alla risoluzione dello screen del browser con cui viene aperta l'immagine in lightbox, è collegato con la risoluzione dello sfocamento dell'immagine, dato che forse utilizza uno specifico algoritmo per fare il downsize, forse posso sfruttare il medesimo nel migliorare i particolari e la sharpness. Quindi rinnovo la mia richiesta di aiuto di dove diavolo ho piazzato quel pezzo di codice che mi permette questo auto resize in lightbox delle immagini. Grazie ancora per l'attenzione. Saluti. EDIT6: Sembra che i bordi rossi intorno le images, compaiono solo nella versione 13 di Firefox. Nella 14 e nella 15 no, quindi, non so se sia poi così rilevante la sua soluzione. Diciamo comunque che l'obiettivo primario è il rendere nitide le immagini downsized. Adesso come adesso sto utilizzando vari servizi online come browserstack, browsershots, ecc.. per analizzare perfettamente le differenze tra i vari browser/os e determinarne i problemi e quindi fare le dovute correzioni per un perfetto cross-browsing del blog. Attendo come sempre aiuto dai specialisti. Ultima modifica di L3n : 31-08-2012 alle 08:47. |
|
|
|
|
29-08-2012, 16:19
|
#3 |
|
Member
Iscritto dal: Jan 2010
Messaggi: 49
|
Mi sembra di aver scoperto, se non ho sbagliato nulla, che l'autoresize delle immagini non è dato da qualche script che ho inserito io, ma è già di default nel lightbox di blogger. Credevo davvero di averlo fatto io, ma vabbè, quindi, adesso come adesso, però rimane il fatto che mi serve creare un pulsante/bottone nella lightbox a fianco all'immagine resized che se ci clicco, l'immagine viene zoomata alla sua reale dimensione, e che andando avanti si continui a visualizzare le immagini così in full size, finche non si ri-clicca sul pulsante per ritornare alla modalità resized. Qualcuno, in grado di aiutarmi con questa cosa? Grazie.
Quindi, riassumendo, adesso le cose che chiedo aiuto sono queste: - Risolvere il problema di sfocamento in Firefox delle immagini, dovute al resize automatico, mentre in chrome il tutto lavora perfettamente. - Come inserire un tasto "Full Size" vicino all'immagine ridimensionata visualizzata in lighttbox. Aiutatemi con il tasto full size per ora, dato che per lo sfocamento la cosa è mooooolto complicata. EDIT: A quanto pare, l'unico problema riguardo il downsizing dell'immagine, avviene solo sui firefox per OS Windows, i firefox per gli altri os non hanno di questo problema, quindi, ho deciso di eliminare anche questa richiesta, dato che come priorità, adesso come adesso, anche se la qualità del downsizing dell'immagine è perfetta, non c'è la certezza che si riesca a leggere le scritte delle immagini, perchè troppo piccole, rinnovo la mia richiesta di aiuto unicamente sull'inserimento del pulsante fullsize. Grazie ancora! Ultima modifica di L3n : 29-08-2012 alle 18:03. |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 21:52.
