mehrere jquery Effekte gleichzeitig verwenden?

3dstyler

3dstyler

Mitglied
Hallo Programmier - Experten,

folgendes Problem:
ich habe eine Homepage, bei welcher im Header ein jquery Fade mit 5 Bildern abläuft.
nun möchte ich auf dieser Seite auch eine Bildergalerie mit einer jquery Lightbox einbauen.


PROBLEM:
wenn ich alle erforderlichen stylesheets und script types einbaue in die Seite, dann funktioniert aber leider die Animation im Header nicht mehr ? ?

FRAGEN:
- kann man überhaupt mehrere jquery Effekte gleichzeitig verwenden?
- könnte man nicht evt. den code der .js - dateien in eine einzelne .js kopieren?

Ich möchte nämlich umbedingt die Fade - Animation im Header weiterhin haben und die Bildergalerie mit der Litebox 1.0 verwenden.

LG Günther

unten noch der code im head:


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" lang="en"><head>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" /><meta
 name="language" content="de" /><meta
 name="description"
 content="Architekt Günther Fritz ist im Vinschgau und ganz Südtirol als Designer und Planer aktiv. Neben Architektur ist unser Büro auch im 3d Bereich wie Design, Fotomontagen, Renderings und Animationen tätig." /><meta
 name="keywords"
 content="Architekt, Planer, Südtirol, Vinschgau, Umgebung, Angebot, Mals, Glurns, modern, Design, Haus, Bau" /><meta
 name="robots" content="index,follow" /><meta
 name="audience" content="alle" /><meta
 name="page-topic"
 content="Architektur, Design, 3d Animationen, Rendering, Skizzen, Plan" /><meta
 name="revisit-after" content="7 days" /><meta
 name="author" content="www.3dstyler.com" />
<title>ARCHITEKT Günther Fitz</title>
<link rel="stylesheet" type="text/css" href="code/styler.css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="layout/favicon.gif" /><!-- include jQuery library -->
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin -->
<script type="text/javascript" src="code/jquery_fade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.header').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
</head>
 
Hallo 3dstyler,

ansich ist es kein Problem mehrere jQuery bzw. JavaScript Dateien auf einer Seite aufzurufen! Jedoch verwandest du zwei verschiedene JavaScript-libraries, einmal Jquery und einmal Mootools! Dadurch hast du das Problem das sich beide auf das $-Zeichen beziehen! So überschreibt das eine das andere! Es gibt hierfür zwei Möglichkeiten. Entweder verwendet du für deinen Slider auch Jquery oder du stellst bei Query ein, dass er sich auf etwas anderes beziehen soll - hierfür gibt es einen Befehl den ich aber leider gerade nicht im Kopf habe! Aber ein toller Slider ist der jquery-nivo den du unter http://nivo.dev7studios.com/ findest. Der ist sehr einfach zum einsetzen und auch zum stylen!

Habe jetzt gerade in der doku von Jquery den Befehl gefunden, schau einfach mal rein, dass sollte dir eigentlich helfen!
http://api.jquery.com/jQuery.noConflict/

Lg Jeremy
 
Zuletzt bearbeitet:
@Jeremy1,

viiiiiiiiiiiiiiiiiiiiiielen herzlichen Dank, du hast mir mit deiner klaren Beschreibung sehr geholfen, erstens Mal warum es bei mir den Konflikt gab, und zweitens sind deine Infos super. Übrigens den nivo slider hab ich auch schon mal versucht, is echt klasse, aber ich wollte einen eigenen kleinen verwenden.

und nun zur LÖSUNG meines problemes dank Jeremy :D

mit dem Hinweis auf die "noConflict" Befehle und dem link hab ich es eigentlich recht schnell hinbekommen. Natürlich will ich in diesem fantastischen Forum auch klar und deutlich die Lösung im "html code" zeigen!

- geht zur Zeile:
// Code that uses other library's $ can follow here.


so long - LG an alle
Günther

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" lang="en">
<head>
<meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1" /><meta
 name="language" content="de" /><meta
 name="description"
 content="Architekt Günther Fritz ist im Vinschgau und ganz Südtirol als Designer und Planer aktiv. Neben Architektur ist unser Büro auch im 3d Bereich wie Design, Fotomontagen, Renderings und Animationen tätig." /><meta
 name="keywords"
 content="Architekt, Planer, Südtirol, Vinschgau, Umgebung, Angebot, Mals, Glurns, modern, Design, Haus, Bau" /><meta
 name="robots" content="index,follow" /><meta
 name="audience" content="alle" /><meta
 name="page-topic"
 content="Architektur, Design, 3d Animationen, Rendering, Skizzen, Plan" /><meta
 name="revisit-after" content="7 days" /><meta
 name="author" content="www.3dstyler.com" />
<title>ARCHITEKT Günther Fitz</title>
<link rel="shortcut icon" href="layout/favicon.gif" />
<link rel="stylesheet" type="text/css" href="code/styler.css" /><!-- include jQuery library -->
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin -->
<script type="text/javascript" src="code/jquery_fade.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
jQuery(document).ready(function($) {
$('.header').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
</head>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück