djtigersnow
Neues Mitglied
Ich habe mir eine Galerie angelegt und die Bilder werden auch korrekt angezeigt.
Mit Vorschaubildern und Fancybox.
funktioniert alles super.
Sobald ich die Galerie in meine Hauptwebseite einbaue werden zwar die Bilder angezeigt doch die Fancybox funktioniert nicht mehr.
Die Galerie werden in dem mittleren DIV angezeigt per jQuery.
Ein Treemenu ist auch eingebaut.
Nun die Frage wo der Fehler liegt.
hier die Codes:
Index (Hauptseite):
HTML-Code:
Fancybox.js
listing.js
tabelle.js
basic.css
Mit Vorschaubildern und Fancybox.
funktioniert alles super.
Sobald ich die Galerie in meine Hauptwebseite einbaue werden zwar die Bilder angezeigt doch die Fancybox funktioniert nicht mehr.
Die Galerie werden in dem mittleren DIV angezeigt per jQuery.
Ein Treemenu ist auch eingebaut.
Nun die Frage wo der Fehler liegt.
hier die Codes:
Index (Hauptseite):
HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Berchta Konstanz </title>
<meta http-equiv="Content-type" content="text/html; CHARSET=ISO-8859-1" />
<link rel="stylesheet" href="css/basic.css" media="all" type="text/css" />
<link rel="stylesheet" href="css/tabelle.css" media="all" type="text/css" />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/fancyybox.js'></script>
<script type='text/javascript' src='js/Listing.js'></script>
<script type='text/javascript' src='js/treemenu.js'></script>
<script type='text/javascript' src='js/tabelle.js'></script>
<script type='text/javascript' src='js/jquery-ui.js'></script>
</head>
<body>
<div id="gesamt">
<div id="oben">
</div>
<div>
<div id="links">
<ul id="menu">
<li><a href="data/home.html">Home</a></li>
<li><a href="data/überuns.html">Über Uns</a></li>
<li><a href="data/mitglieder.html">Mitglieder</a></li>
<li><a href="data/termine.html">Termine</a></li>
<li><a href="data/kontakt.html">Kontakt</a></li>
<li><a href="data/links.html">Links</a></li>
<li><a href="data/impressum.html">Impressum</a></li>
<li><a href="data/gästebuch.html">Gästebuch</a></li>
<li><a href="data/galerie.html">Galerie</a>
<ul>
<li><a href="fotos/fasnacht_2011.html">Fasnacht 2011</a></li>
<li><a href="fotos/treffen_april_2011.html">Treffen April 2011</a></li>
<li><a href="fotos/fotoshooting_2011.html">Fotoshooting 2011</a></li>
</ul>
</ul>
</div>
<div id="mitte">
<p>Hallo und herzlich Willkommen auf der Homepage der Berchta Konstanz</p>
</div>
<div id="rechts">
</div>
<div style="clear: left"><!-- bleibt leer --></div>
</div>
<div id="unten">
</div>
</div>
</body>
</html>Fancybox.js
Code:
$(document).ready(function() {
function formatTitle(title,currentArray,currentIndex,currentOpts) {
return '<div id="custom-title">' + (title && title.length ? '<b>'+title+'</b>' : '' ) + '| Bild ' + (currentIndex + 1) + 'von ' + currentArray.length + '</div>';
}
$("a[rel=lightpopup]").fancybox({
'padding' : 0,
'transitionIn':'elastic',
'transitionOut':'elastic',
'speedIn':600,
'speedOut':200,
'overlayShow':true,
'overlayOpacity':0.8,
'hideOnContentClick':false,
'titleFormat':formatTitle
});
});listing.js
Code:
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
},
});
function loadPage(obj,target) {
if (!obj.length || !target.length) return;
obj.click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
obj.removeClass("current");
$(this).addClass("current");
target.fadeOut("slow",function() {
target.load(url,function() {
target.fadeIn("slow");
});
});
});
}
// Wenn DOM geladen
$(document).ready(function() {
loadPage($("ul a"),$("#mitte"));
});tabelle.js
Code:
function zebra(obj,colors) {
if(!obj.length) return;
var tr = $("tr", obj);
var td = $("td:first-child",tr);
var even = $("tr:even",obj);
even.css("background-color",colors.even);
td.css("background-color",colors.column);
tr.hover(function() {
$(this).animate({
backgroundColor: colors.over
}).find("td:first-child").animate({
backgroundColor: colors.over
});
},
function() {
var color;
$(this).is(":nth-child(even)") ?
color = colors.even :
color = colors.odd ;
$(this).animate({
backgroundColor: color
}).find("td:first-child").animate({
backgroundColor: colors.column
});
});
}
$(document).ready(function(){
var colors = {
over: "#DDDDEC",
odd: "#FFFFFF",
even: "#EEEEEE",
column: "#ECDDDD"
}
zebra($("#zebra"),colors);
});basic.css
Code:
body {
background-color: #000000;
color: #B22222 ;
}
a:focus, a:active, a:hover, a:link, a:visited {
color: #FF0000;
text-decoration:none ;
font-size: 100% ;
}
h1 {
color: #FF0000;
font-family: 'Old English Text MT';
}
#gesamt {
margin-left:auto;
margin-right:auto;
width:947px;
padding:10px;
}
#oben {
height:200px;
background-image: url(../bilder/oben.jpg);
}
#links {
width:250px;
height:697px;
float: left;
list-style-type: none;
background-image: url(../bilder/links.jpg);
}
#links a {
display: block;
padding: 0 0 0 0px;
text-decoration:none;
background-repeat: none;
background-position:0 0px;
background-image: url(../bilder/plus.jpg);
}
#links a.selected {
background-image: url(../bilder/minus.jpg);
}
#links a .leaf{
background-image: url(../bilder/minus.jpg);
}
#links ul {
list-style-type: none;
margin: 0 0 0 30px;
padding: 0 0 0 0px;
white-space: nowarp;
font-size: 160%;
font-family: 'Old English Text MT';
}
#menu ul {
font-size: 90%;
font-family: 'Old English Text MT';
}
#mitte {
width:547px;
height:697px;
float: left;
overflow:auto;
}
#rechts {
width:150px;
height:697px;
float: right;
background-image: url(../bilder/rechts.jpg);
}
#unten {
height:50px;
background-image: url(../bilder/unten.jpg);
}
