2 svar · 1 846 visningar · startad av Mika3l
Hej!
Använder mig av Fancybox för att ladda sidor, har fungerat hur fint som helst innan men nu helt plötsligt så har ett skumt problem dykt upp. På min sida finns flertalet länkar som anropar samma funktion i FB men bara en av länkarna fungerar, resten hoppar direkt till sidan som ska visas.
Någon som har nån aning om vad som har gått fel helt plötsligt? Sjukt irriterande för allt verkar ju vara i sin ordning med tanke på att en länk fungerar.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Sunday Morning Magazine | Photographic Web Magazine </title>
<meta name="keywords" content="magazin, online magazine, web magazine, magasin, photo, photography, foto, fotografi, fototidning, sunne, broby grafiska,in between dreams, sunday morning magazine, sunday, morning, in between dreams" />
<meta name="description" content="Sunday Morning Magazine - Photographic web magazine" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#readissue").fancybox({
'width' : '90%',
'height' : '90%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'overlayOpacity' : '0.9',
'overlayColor' : '#444444',
'scrolling' : 'no',
'titleShow' : false
});
});
</script>
</head>
<body>
<div id="center">
<div id="menu">
<ul>
<li><a href="about.cshtml">About</a></li>
<li><a href="issues.cshtml">Issues</a></li>
<li><a href="contributors.cshtml">Contributors</a></li>
<li><a href="contact.cshtml">Contact</a></li>
<li><a href="inbetweendreams.cshtml">I.B.D</a></li>
</ul>
</div>
<div id="logo">
<a href="index.cshtml">
<img src="images/logo.jpg" alt=" SUNDAY MORNING MAGAZINE " />
</a>
</div>
<div id="content">
<h1>Issues</h1>
<ul class="issueslist">
<li class="issueslist">
<div id="issueslistdiv">
<h3>#1 jul 2011</h3>
<a id="readissue" href="read.cshtml?id=1" title=" Click to read the issue ">
<img src="images/covers/no1_2011.jpg" class="issue_img" />
</a>
<a id="readissue" href="read.cshtml?id=1">Read</a> |
<a href="issuesinfo.cshtml?id=1">More info</a>
</div>
</li>
<li class="issueslist">
<div id="issueslistdiv">
<h3>#1 nov 2010</h3>
<a id="readissue" href="read.cshtml?id=2" title=" Click to read the issue ">
<img src="images/covers/no1_2010.jpg" class="issue_img" />
</a>
<a id="readissue" href="read.cshtml?id=2">Read</a> |
<a href="issuesinfo.cshtml?id=2">More info</a>
</div>
</li>
<li class="issueslist">
<div id="issueslistdiv">
<h3>#8 nov 2010</h3>
<a id="readissue" href="read.cshtml?id=3" title=" Click to read the issue ">
<img src="images/covers/no1_2010.jpg" class="issue_img" />
</a>
<a id="readissue" href="read.cshtml?id=3">Read</a> |
<a href="issuesinfo.cshtml?id=3">More info</a>
</div>
</li>
<li class="issueslist">
<div id="issueslistdiv">
<h3>#20 nov 2010</h3>
<a id="readissue" href="read.cshtml?id=4" title=" Click to read the issue ">
<img src="images/covers/no1_2010.jpg" class="issue_img" />
</a>
<a id="readissue" href="read.cshtml?id=4">Read</a> |
<a href="issuesinfo.cshtml?id=4">More info</a>
</div>
</li>
</ul>
</div>
<div id="issues">
<ul>
<li><a id="readissue" href="read.cshtml?id=1">1 jul 2011</a></li>
<li><a id="readissue" href="read.cshtml?id=2">1 nov 2010</a></li>
<li><a id="readissue" href="read.cshtml?id=3">8 nov 2010</a></li>
<li><a id="readissue" href="read.cshtml?id=4">20 nov 2010</a></li>
</ul>
</div>
<div id="latest">
<h2>Latest issue</h2>
<a id="readissue" href="read.cshtml?id=1" title=" Click here to read the latest issue ">
<img src="images/latest.jpg" alt=" LATEST ISSUE " />
</a>
</div>
<div id="facebook">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSunday-Morning-Magazine%2F163709807002555&width=220&colorscheme=light&show_faces=true&border_color=%23666666&stream=false&header=false&height=212" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:212px;" allowTransparency="true"></iframe>
</div>
<div id="footer">
<p>© 2011 Sunday Morning Magazine, all rights reserved. |
<a href="mailto:%69%6e%66%6f%40%73%75%6e%64%61%79%6d%6f%72%6e%69%6e%67%6d%61%67%61%7a%69%6e%65%2e%73%65">info@sundaymorningmagazine.se</a> |
Website and magazine developed by <a href="http://www.mikaelkarlsson.se" target="_blank">Mikael Karlsson</a>.</p>
</div>
</div>
</body>
</html>
.issueslist {
float: left;
list-style-type: none;
padding: 0;
margin: 0;
}
#issueslistdiv {
width: 160px;
height: 266px;
margin-right: 22px;
margin-bottom: 20px;
}
.issue_img {
width: 160px;
height: 226px;
border: 0;
display: block;
margin-bottom: 3px;
}
Du kör ju id="readissue" på alla länkar, byt till class="readissue" då id:n bara får finnas en gång - därför det funkar med en länk men inte för flera.
Byt även $("#readissue").fancybox => $(".readissue").fancybox i javascriptet så att den letar efter alla element med class name enligt ovan. :)
Men självklart, att jag kunde missa det! Tack för hjälpen :)