Javascripte behindern sich - Alternative? @ tutorials.de: Tutorials, Forum & Hilfe

tykee · 04.09.10 01:23

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:

HTML-Code:

<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

spicelab · 04.09.10 05:03

Zitat von tykee

Was kann oder muss ich tun?

Zumindest jQuery.noConflict() implementieren, wenn in dem (X)HTML-Dokument neben jQuery ein weiteres JS-Framework (hier: Prototype) zum Einsatz kommen soll. Siehe hierzu auch das Kapitel Using jQuery with Other Libraries.

Zitat von tykee

Habe es bereits mit diesem versucht, allerdings auch erfolglos: http://jquery.com/demo/grey/

Stellt sich die Frage, was genau du dafür unternommen hast, dass sich am Ende kein Erfolgserlebnis einstellen wollte?

Ich konnte nämlich eben die wenigen Code-Snippets von Greybox kurz und schmerzlos in das Supersized-Demo portieren, ohne im Anschluß eine gegenseitige Behinderung der Script-Funktionsprozeße wahrzunehmen

Code xhtml:

<!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" dir="ltr" lang="en-US">
        <head profile="http://gmpg.org/xfn/11">
        <title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
        <!-- jQuery-Library in der aktuellen Fassung laden, anstelle der überholten Version "1.3.2", die Supersized nutzt  -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 
        <!-- Start Supersized -->
        <script type="text/javascript"src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
        <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
        <script type="text/javascript" src="http://buildinternet.com/project/supersized/supersized.2.0.js"></script>
        <script type="text/javascript">
                $(function(){
                        $.fn.supersized.options = {
                                startwidth: 640,
                                startheight: 480,
                                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: 3000
                        };
                $('#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%;
                        bottom:5%;
                        z-index: 3;
                        background:#262626 no-repeat 90%;
                        border-top:1px solid #000;
                        border-bottom:1px solid #4F4F4F;
                        position:absolute;
                }
                #contentframe{
                        overflow: hidden;
                        border-top:solid 1px #4F4F4F;
                        border-bottom:1px solid #000;
                        height: 100%;
                        text-align:left;
                        z-index: 3;
                }
                #slidecounter{
                        float:left;
                        color:#4F4F4F;
                        font:50px "Helvetica Neue", Arial, sans-serif;
                        font-weight:bold;
                        margin:18px 20px;
                }
                #slidecaption{
                        overflow: hidden;
                        float:left;
                        color:#FFF;
                        font:26px "Helvetica Neue", Arial, sans-serif;
                        font-weight:bold;
                        margin:33px 0;
                }
                /*Supersized Stamp*/
                .stamp{
                        float: right;
                        margin: 25px 20px 0 0;
                }
                /*Supersize Plugin Styles*/
                #navigation{
                        background: url('http://buildinternet.com/project/supersized/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('http://buildinternet.com/project/supersized/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>
        <!-- End Supersized -->
 
        <!-- Start Greybox -->
        <script type="text/javascript" src="http://jquery.com/demo/grey/greybox.js"></script>
        <link href="http://jquery.com/demo/grey/greybox.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript">
           var GB_ANIMATION = true;
           $(document).ready(function(){
             $("a.greybox").click(function(){
               var t = this.title || $(this).text() || this.href;
               GB_show(t,this.href,750,500);
               return false;
             });
           });
        </script>
        <!-- End Greybox -->
 
</head>
<body>
 
<!-- Start Greybox-Demo -->
<div style="position:absolute;z-index:999;">
    <h2 id="headline">See Greybox in action:</h2>
    <ul>
        <li><a href="http://google.com/" title="Google" class="greybox">Launch Google</a></li>
        <li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a></li>
        <li><a href="http://msn.com/" class="greybox">Microsoft would like a visit.</a></li>
        <li><a href="http://jquery.com/" class="greybox">jQuery Rocks!</a></li>
    </ul>
</div>
<!-- End Greybox-Demo -->
 
<!-- Start Supersized-Demo -->
<!--Loading display while images load-->
<div id="loading">&nbsp;</div>
 
<!--Slides-->
<div id="supersize">
        <a href="http://interfacelift.com/wallpaper_beta/details/1819/bird_on_a_branch.html"><img src="http://buildinternet.com/project/supersized/images/bird.jpg" title="Bird On A Branch" alt="" /></a>
        <a href="http://interfacelift.com/wallpaper_beta/details/988/paradise_lost.html"><img src="http://buildinternet.com/project/supersized/images/paradise.jpg" title="Paradise Lost" alt="" /></a>
        <a href="http://interfacelift.com/wallpaper_beta/details/1864/morelia_viridis.html"><img src="http://buildinternet.com/project/supersized/images/snake.jpg" title="Morelia Viridis" alt="" /></a>
</div>
 
<!--Content area that hovers on top-->
<div id="content">
        <div id="contentframe">
                <div id="slidecounter"><!--Slide counter-->
                        <span class="slidenumber">&nbsp;</span>/<span class="totalslides">&nbsp;</span>
                </div>
                <div id="slidecaption"><!--Slide captions displayed here--></div>
                <!--Logo-->
                <a href="http://www.buildinternet.com" class="stamp"><img src="http://buildinternet.com/project/supersized/images/supersizedblackmini.gif" alt="" /></a>
                <!--Navigation-->
                <div id="navigation">
                        <a href="#" id="prevslide"><img src="http://buildinternet.com/project/supersized/images/back_dull.gif" alt="" /></a><a href="#" id="pauseplay"><img src="http://buildinternet.com/project/supersized/images/pause_dull.gif" alt="" /></a><a href="#" id="nextslide"><img src="http://buildinternet.com/project/supersized/images/forward_dull.gif" alt="" /></a>
                </div>
        </div>
</div>
<!-- End Supersized-Demo -->
 
</body>
</html>

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Google Visualization API und Prototype (Javascripte überschreiben sich gegenseitig?)

JavaScripte stören sich gegenseitig

mod rewrite: einträge behindern sich

DHTML-Menü und Flash behindern sich

Funktionen behindern sich

E-Mail:

Abonnieren Abbestellen