Vote count:
0
I have quite possibly the most frustrating problem I have ever encountered. I'm trying to get like buttons to appear on this Fancybox gallery, and for no reason I can fathom, it's invisible. The div is there, but seemingly empty! I haven't formatted the other social buttons yet, I'm just trying to get them to work!
I have pasted the code into this JS fiddle and I cant seem to replicate the problem, so it must either something to do with my domain, or a piece of code that I've missed.
I will be eternally grateful to anyone who can shed some light on this.
JS:
$(".fancybox").fancybox({
beforeShow: function () {
// Add FaceBook like button
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title += alt;
var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
$(".fancybox-inner").append(toolbar);
if (this.title) {
this.title += '<a href="http://ift.tt/Ilydzf' + encodeURIComponent(document.location.href) +
'&media=http%3A%2F%2Fwww.izzyhodge.com' + encodeURIComponent(this.href) +
'&description=Pin from IzzyHodge.com" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://ift.tt/H76Yf2" title="Pin It" /></a>';
this.title += '<a href="http://ift.tt/oQ7mBx" class="twitter-share-button" data-count="none" data-url="' + this.href + '">Tweet</a> ';
this.title += '<iframe src="http://ift.tt/UXYg4H' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
afterShow: function () {
// Render tweet button
twttr.widgets.load();
},
helpers: {
title: {
type: 'inside'
}
}
});
HTML (minus some of them images to save space):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ift.tt/nYkKzf">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="Izzy Hodge's online Illustration portfolio." />
<title>Portfolio </title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" media="all" href="/style.css" />
<link href='http://ift.tt/1jMP8Co' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://ift.tt/J5OMPW"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.js?v=2.1.5"></script>
<script src="/js/cycler.js" type="text/javascript"></script>
<script src="/js/fancy-settings-poem.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="content">
<div id="background-cycler" class="background-cycler">
<img id="imgPrev" src="" alt="" />
<img id="imgNext" src="" alt="" />
</div>
<div id="navbg" class="white-box">
<img id="logo" src="/images/logo.png" alt="Izzy Hodge Logo"></img>
<ul id="nav">
<li><a href="/">HOME</a>
</li>
<li><a href="/portfolio/">PORTFOLIO</a>
</li>
<li><a href="/books/">BOOKS</a>
</li>
<li><a href="/sketches/">SKETCHES</a>
</li>
<li><a href="/biography/">BIOGRAPHY</a>
</li>
<li><a href="/contact/">CONTACT</a>
</li>
</ul>
<div id="copyright">
<p style="font-size:11px;">© IZZY HODGE 2014</p>
<p style="font-size:8px;">ALL RIGHTS RESERVED</p>
</div>
</div>
<div id="page-bg" class="white-box">
<div id="thumb-container"> <a class="fancybox thumb" rel="group" href="http://ift.tt/1hQL7FX"><img src="http://ift.tt/1jMP8Cq" alt="<h2>LOLA LURKING IN THE LILYPADS <br/> Book Cover (Book in progress) <br/> Pencil and Digital</h2>"/></a>
<a class="fancybox thumb" rel="group" href="http://ift.tt/1hQL7FZ"><img src="http://ift.tt/1jMP8SG" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE OTTER<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
</div>
<div id="appendContent" style="display: none;">
<div></div>
<div>
<h2><a>READ POEM<img class="hoverpoem" src="/images/poems/otterpoem.png" alt=""/></a></h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Many thanks!
asked 1 min ago
Aucun commentaire:
Enregistrer un commentaire