Verschiedene Javascripte werden nicht geladen.

R

ray2mi

Erfahrenes Mitglied
Hallo,
habe da ein Problem.

Ich baue eine Webseite mit horizontal scrollbaren Content Slider. Da gibts verschiedene Scripte, ich habe eins eingebunden.
Das Script wird ganz einfach im Head der html Datei geladen.

Man kann zwischen verschiedenen Inhalten dann per Buttonclick nach rechts oder Links scrollen.

Nun habe ich aber in den verschiedenen Inhaltsbereichen auch Bilder, welcher mit einem Lightbox Script versehen sind. Also, das die Bilder per Mausclick größer gezoomt werden und sich der Hintergrund verdunkelt etc.

Dieses Script habe ich auch im Head der HTML geladen.


Es t aber nicht. Wenn man auf das Bild klickt, dann erscheint das Bild alleine in dem selben Fenster.

Es muss doch irgendwie gehen, dass man horizontal den Content Sliden kann und wenn ein Bild kommt, das ebenfalls dieses Lightbox script ausgeführt wird.

Ich wäre euch extrem Dankbar
 
Moin,

deine Beschreibung in allen Ehren, aber ohne Code oder ein Live-Beispiel kann man dir da leider nicht weiterhelfen.
 
mhh...ja versteh ich..also moment :)
HTML: 
<head>
<link href="rp_favicon.ico" rel="shortcut icon" />

<link href="css/headquarter.css" rel="stylesheet" type="text/css" />

 <!-- LightBox Script Load -->
	        <script type="text/javascript" src="js/prototype.js"></script>
                <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
                <script type="text/javascript" src="js/lightbox.js"></script>
                <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- Ende LightBox Script Load -->

<!--________________Sliding Content_____________Begin Stylesheets -->
		<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/coda-slider-2.0.css" type="text/css" media="screen" />
	<!-- End Stylesheets -->
	
	<!-- Begin JavaScript -->
		<script type="text/javascript" src="js/contentslide/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/contentslide/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/contentslide/jquery.coda-slider-2.0.js"></script>
		<script type="text/javascript">
			$().ready(function() {
				$('#coda-slider-1').codaSlider();
			});
		</script>
<!--________________Ende Sliding Content_____________End JavaScript -->
</head>
HTML: 
<div id="contentBox">
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::CONTENT::::::::::::::::::::::::::::::::::::::::::::::::::::: --> 
<div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="coda-slider-1">
<!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Allgemeines-->    
<div class="panel">
			<div class="panel-wrapper">            
                              
		<div class="sliderContent">
                <p>
Inhalt des horizontalen Contents 1
                </p>
        </div><!--Ende sliderContent-->
            </div>
		</div>
<!--:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::Allgemeines Seite2-->
    
         <div class="panel">
			<div class="panel-wrapper">            
                           
		<div class="sliderContent">
            <p>
Inhalte der Seite 2
            </p>

            <div class="projektBilder">
        		<a href='BILD.jpg' rel='lightbox[galerie_05]' title='TITEL'>
                <img src="BILD_Vorschau.jpg" width="200" height="100" /></a>
            </div>

        </div><!--sliderContent-->
            </div>
		</div>

	</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<!--:::::::::::::::::::::::::::::::::::::::::::::ENDE:::CONTENT:::ENDE:::::::::::::::::::::::::::::::::::::::::::::: -->
</div><!-- Ende ContentBox-->
 
Du verwendest dort sowohl prototypejs als auch jQuery, was problematisch ist, weil beide das $ als Funktionsnamen verwenden.

Du kannst das in jQuery umgehen, wie? Steht hier: http://api.jquery.com/jQuery.noConflict/

Das Sinnvollste wäre es aber in meinen Augen, auf LightBox zu verzichten, und stattdessen ein mit jQuery funktionierendes Aquivalent wie bspw. ThickBox zu verwenden.
 
Mhh danke für deine ANtwort aber ich bekomme das nicht...ich habe keinen Schimmer, wie ich das auf mein Beispiel anwenden soll :S

mit diesem ThickBox funktioniert das auch nicht so richtig...und das sieht auch nicht so gut aus. Das Fenster fährt nicht so schön auf.

das mit dem no.conflict habe ich nochmal versucht, aber auch nichts gefunden...könnt ihr mir da nochmal helfen oder mir das erklären
 
Zuletzt bearbeitet:
Du musst eigentlich nur die Anweisung
Code: 
$.noConflict();
Ausführen, und zwar, bevor irgendein anderes problematisches JS eingebunden wird(in dem Fall prototype/scriptaculous/lightbox)
Nach dieser Zeile darfst/kannst du auf jQuery nicht mehr per $ zugreifen, du musst das $ in dem Aufruf von codaSlider() also ersetzen.



Du musst die Skripte auch umsortieren...die, welche jQuery nutzen müssen vor die anderen.
Das sollte am Ende also so aussehen:

Code: 
<head>
<link href="rp_favicon.ico" rel="shortcut icon" />

<link href="css/headquarter.css" rel="stylesheet" type="text/css" />
<!--________________Sliding Content_____________-->
  <!--Begin Stylesheets -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/coda-slider-2.0.css" type="text/css" media="screen" />
  <!-- End Stylesheets -->
  <!-- Begin JavaScript -->
    <script type="text/javascript" src="js/contentslide/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/contentslide/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/contentslide/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript">
    $.noConflict();
    jQuery().ready(function() 
    {
      jQuery('#coda-slider-1').codaSlider();
    });
    </script>
<!--________________Ende Sliding Content_____________-->
<!-- LightBox Script Load -->
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<!-- Ende LightBox Script Load -->


</head>


Weiterhin: Das coda-slider-Skript ist nicht auf $.noConflict() "vorbereitet".

Öffne es mit einem Editor deiner Wahl(optimalerweise mit Suchen/Ersetzen-Funktion) und ersetze alle Vorkommen von $ durch jQuery
(Beachte dabei, dass das jQuery genau so geschrieben sein muss, alles klein mit grossem Q)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück