Problem mit Lightbox und JQuery

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Problem mit Lightbox und JQuery »

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

Freitag, 18. März 2011, 10:12

Moin moin,
Ich möchte auf einer Homepage die original Lightbox verwenden.
Gleichzeitig aber habe ich noch mehrere JQuery-Slidedowns mit eingebaut.
Hier der Codeauszug:

HTML

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

        <script type="text/javascript" src="lightbox/js/prototype.js"> </script>
        <script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"> </script>
        <script type="text/javascript" src="lightbox/js/lightbox.js"> </script>
        <script type="text/javascript" src="js/jquery.js"> </script>

        <script type="text/javascript">
            /*Hier ist Google-Analytics*/
       </script>


<script type="text/javascript">
$(document).ready(function(){
$(".flip-1").click(function(){
    $(".panel-1").slideToggle("slow");
  });
});

Nun wie zu sehen ist, binde ich erst die Lightbox Dateien ein, dann nochmal die "jquery.js".
So funktioniert der Slidedown, aber die Lightbox nicht.

Packe ich den Code für die "jquery.js" vor die Lightbox, funktioniert der Slidedown nicht mehr.
Wie kriege ich das Problem nun in den Griff, so dass beides funktioniert?

Danke für Eure Hilfen,
beste Grüße,
Mckbrother

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Mckbrother« (18. März 2011, 10:12)

thunder

Routinier

Dabei seit: 22.10.2002

Beiträge: 332

Freitag, 18. März 2011, 11:13

Moin

du solltest dich erst mal für 1 Javascript-Framework entscheiden....
zB protoaculous ist ein zusammenschluss von prototype und scriptaculous

Ich verstehe nicht warum man gleich 3 JS-Frameworks nutzen sollte....
Aber jQuery kann man in den Kompatibilitätsmodus schalten

Javascript-Quelltext

// jQuery im Kompatibilitätsmodus
jQuery.noConflict();

// jQuery initialisieren
jQuery(document).ready(function($){

	// $ verwenden, wie das Prototype auch macht
	$("#wrapper").show();

});

MfG

WoW Gilde Meine Baustelle
Meine Programme: Gimp, Blender; Proton; Debian (Server);

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

Montag, 21. März 2011, 00:41

Wenn ich ganz ehrlich bin, weiß ich nicht, was ich mit Deiner Antwort anfangen soll...

Das protoaculous ein Zusammenschluss ist, ist ja schön und gut, aber die Lightbox gib von der offiziellen Seite die Anweisung, folgende JS-Teile einzubinden:

HTML

1
2
3

<script type="text/javascript" src="/lightbox/js/prototype.js"> </script>
<script type="text/javascript" src="/lightbox/js/scriptaculous.js?load=effects,builder"> </script>
<script type="text/javascript" src="/lightbox/js/lightbox.js"> </script>

Dein Beispiel verstehe ich leider nicht ganz...
Der Code zum Tooglen/Slide soll ja so bleiben.
Schreibe ich einfach vor der Initialisierung von JQuery den Code für den Kompabilitätsmodus, dann geht es auch nicht..

Danke trotzdem,
Gruß,
Mckbrother

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Mckbrother« (21. März 2011, 00:41)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

Montag, 21. März 2011, 07:47

du hast die falsche lightbox geladen.

schau hier:

http://leandrovieira.com/projects/jquery/lightbox/

dann kannst du sowas machen:

Javascript-Quelltext

$(function() { // <--- das hier ist $(document).ready(function()) nur kürzer
$(".flip-1").click(function(){
    $(".panel-1").slideToggle("slow");
  });

	$('#gallery a').lightBox({fixedNavigation:true});
});

und hier musst du nur deine jquery und die lightbox.js einbinden ohne scriptaculous oder prototype

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (21. März 2011, 07:47)