tykee
Grünschnabel
Hallo miteinander,
ich sitze gerade vor einem kleinen Problem... für eine Homepage habe ich mir zwei verschiedene Javascripte rausgesucht, die die gewünschten Funktionen beinhalten. Separat voneinander funktionieren beide tadellos, aber wenn ich beide zusammen nutzen möchte, streikt eins von beiden.
Das Vorhaben
Der Hintergrund besteht aus einem Hintergrundbild, das die gesamte Fenstergröße einnimmt und sich der Fenstergröße immer anpasst. Hierfür nutze ich folgendes Script: http://buildinternet.com/project/supersized/
Auf diesem befinden sich nun diverse Navigationspunkte. Beim Klicken auf einen der Punkte, soll sich ein "Popup" öffnen (eine Lightbox), in dem eine HTML-Datei ausgelesen wird. Hierfür habe ich mich für das Folgende Script entschieden: http://www.p51labs.com/lightwindow/index.html
Habe es bereits mit diesem versucht, allerdings auch erfolglos: http://jquery.com/demo/grey/
An sich lässt sich mein Vorhaben mit Hilfe der genannten Scripte doch wunderbar umsetzen, oder gibt es eine bessere bzw unumgängliche Alternative?
Im <Head>-Bereich ist folgendes eingetragen:
Was kann oder muss ich tun?
Ich danke Euch für jede Hilfestellung und jeden Ratschlag.
Lg
ich sitze gerade vor einem kleinen Problem... für eine Homepage habe ich mir zwei verschiedene Javascripte rausgesucht, die die gewünschten Funktionen beinhalten. Separat voneinander funktionieren beide tadellos, aber wenn ich beide zusammen nutzen möchte, streikt eins von beiden.
Das Vorhaben
Der Hintergrund besteht aus einem Hintergrundbild, das die gesamte Fenstergröße einnimmt und sich der Fenstergröße immer anpasst. Hierfür nutze ich folgendes Script: http://buildinternet.com/project/supersized/
Auf diesem befinden sich nun diverse Navigationspunkte. Beim Klicken auf einen der Punkte, soll sich ein "Popup" öffnen (eine Lightbox), in dem eine HTML-Datei ausgelesen wird. Hierfür habe ich mich für das Folgende Script entschieden: http://www.p51labs.com/lightwindow/index.html
Habe es bereits mit diesem versucht, allerdings auch erfolglos: http://jquery.com/demo/grey/
An sich lässt sich mein Vorhaben mit Hilfe der genannten Scripte doch wunderbar umsetzen, oder gibt es eine bessere bzw unumgängliche Alternative?
Im <Head>-Bereich ist folgendes eingetragen:
HTML:
<script type="text/javascript" src="js/lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="js/lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="js/lightwindow/css/lightwindow.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="js/supersized2/supersized.2.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 1440,
startheight: 1019,
vertical_center: 1,
slideshow: 1,
navigation: 1,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 6000
};
$('#supersize').supersized();
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
z-index: 3;
background:#262626 no-repeat 90%;
border-top:1px solid #000;
border-bottom:1px solid #4F4F4F;
position:absolute;
}
#contentframe{
border-top:solid 1px #4F4F4F;
border-bottom:1px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#navigation{
background: url('images/navbg.gif') no-repeat;
float: right;
margin:22px 20px 0 0;
}
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 3;
width: 24px;
height: 24px;
text-indent: -999em;
background-image: url(images/progress.gif);
}
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}
</style>Was kann oder muss ich tun?
Ich danke Euch für jede Hilfestellung und jeden Ratschlag.
Lg
