jQuery einbinden

Bunny

Addicted

Registered: Oct 2002
Location: Austria
Posts: 525

11.08.2011 - 13:59

Hallo Leute,

ich hab mir lokal einen Lamp-server eingerichtet (aktuelle Version,apache), und möchte mich mit jQuery beschäftigen.

hab mir eine jQuery Bildergalerie ausgesucht die ich einbinden möchte. siehe Link -->

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

Ich habe mir die jQuery Bibliothek herunter geladen, von http://jquery.com/ (development version, 229 kb) und gespeichert als "jquery-1.6.2.js", die ich dann im htdocs Ordner im jeweiligen Verzeichnis meiner testpage gespeichert habe.

Folgendes Problem hat sich jetzt ergeben:

Ich hab alles so eingebunden wie es auf der Website unter "How to use" steht. Das Resultat sieht so aus das ich das kleine Vorschaubild sehe und wenn ich darauf klicke wird das Bild in Originalgröße auf einer neuen leeren Seite angezeigt. Also keine Spur von jQuery Effekt.

Ich hab schon die ganzen Pfadangaben im Header kontrolliert, somit schließ ich das mal aus.

Oder muss die jquery-1.6.2.js irgendwo anders am apache server liegen ?

lg

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25376

11.08.2011 - 14:37

Das jQuery-File kann entweder innerhalb deines Webroots liegen oder du holst sie dir direkt von Google-Code: http://ajax.googleapis.com/ajax/lib...2/jquery.min.js

Aber das wird wohl kaum dein Problem sein. Was du machen musst, ist den eingebundenen Javascript-Code debuggen. Hol dir am besten Firefox + Firebug, aktiviere Firebug für deine Seite und schau dir dann in der Konsole an, welche Fehler du bekommst. Dann kannst du auch unter dem Tab "Network" überprüfen, ob das jQuery-File korrekt eingebunden wird oder es ein 404 gibt.

Bunny

Addicted

Registered: Oct 2002
Location: Austria
Posts: 525

11.08.2011 - 14:47

okay danke, das werde ich heute noch probieren!

wenn ich das von google nehme, brauch ich eigentlich nur den link einbinden, oder ?

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

11.08.2011 - 15:04

Zitat von Bunny
okay danke, das werde ich heute noch probieren!

wenn ich das von google nehme, brauch ich eigentlich nur den link einbinden, oder ?

so ist es, die JavaScript File wird dann von einem CDN geladen

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

11.08.2011 - 15:52

Hast du schon getestet ob du die Adresse des jQuery Files im Browser direkt aufrufen kannst?
Ich rieche Rechtemangel

Daeda

Here to stay

Registered: Aug 2007
Location: Solzburg
Posts: 1486

11.08.2011 - 15:53

Zitat von mat
Dann kannst du auch unter dem Tab "Network" überprüfen, ob das jQuery-File korrekt eingebunden wird oder es ein 404 gibt.

ah der netzwerk tab is ja nett! ich sollt mir den firebug echt mal genauer anschaun.

hab bisher nur den html-tab verwendet. wenn man da einfach im head den skript-tag mitn + erweitert, sieht man entweder das ganze skript, oder einen hinweis mitn 404 error.

OT:
lokale projekte sind zwar gut um auch mal offline dran arbeiten zu können, aber ich mach schon lang alle versuche online - damit tun sich auch diverse helfer leichter bei der fehlersuche

http://www.ohost.de/ hat da eigentlich alles was man zum testen braucht

Bunny

Addicted

Registered: Oct 2002
Location: Austria
Posts: 525

11.08.2011 - 19:56

das file kann ich im browser aufrufen !

Daeda

Here to stay

Registered: Aug 2007
Location: Solzburg
Posts: 1486

12.08.2011 - 08:12

ausm how-to:

Code:

<script type="text/javascript"> 
  $(function() { 
    // Use this example, or... 
    $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel 
    // This, or... 
    $('#gallery a').lightBox(); // Select all links in object with gallery ID 
    // This, or... 
    $('a.lightbox').lightBox(); // Select all links with lightbox class 
    // This, or... 
    $('a').lightBox(); // Select all links in the page 
    // ... The possibility are many. Use your creative or choose one in the examples above
}); 
</script>

welche variante hast gnommen?
poste bitte mal deinen aufruf vom bild (mit den code tags hier), laut den angaben müsstest du bei:

Code:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

ja zb eine id um deine pics platziern:

Code:

<div id="gallery"><a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a></div>

Bunny

Addicted

Registered: Oct 2002
Location: Austria
Posts: 525

12.08.2011 - 13:48

Hey danke, genau das war der Fehler, jetzt funktionierts !!

ich hab nämlich die erste Variante genommen, jetzt hab ich das mit der zweiten Variante gemacht -->

Code: PHP

$('#gallery a').lightBox();

und es funktioniert.

danke dir !

AbSailer

boo hoo wendy

Registered: Aug 2002
Location: Linz/Stmk
Posts: 1160

12.08.2011 - 15:28

Zitat von Bunny
Hey danke, genau das war der Fehler, jetzt funktionierts !!

ich hab nämlich die erste Variante genommen, jetzt hab ich das mit der zweiten Variante gemacht -->
Code: PHP
$('#gallery a').lightBox();
und es funktioniert.

danke dir !

Mit der ersten Variante wärst aber auch mit einem

Code: PHP
 rel="lightbox"

innerhalb des "a" tags zum Ziel gekommen (nur der Vollständigkeit halber)

Bunny

Addicted

Registered: Oct 2002
Location: Austria
Posts: 525

12.08.2011 - 16:20

alles klar !

Bunny Addicted Registered: Oct 2002 Location: Austria Posts: 525	11.08.2011 - 13:59 Hallo Leute, ich hab mir lokal einen Lamp-server eingerichtet (aktuelle Version,apache), und möchte mich mit jQuery beschäftigen. hab mir eine jQuery Bildergalerie ausgesucht die ich einbinden möchte. siehe Link --> http://leandrovieira.com/projects/jquery/lightbox/ Ich habe mir die jQuery Bibliothek herunter geladen, von http://jquery.com/ (development version, 229 kb) und gespeichert als "jquery-1.6.2.js", die ich dann im htdocs Ordner im jeweiligen Verzeichnis meiner testpage gespeichert habe. Folgendes Problem hat sich jetzt ergeben: Ich hab alles so eingebunden wie es auf der Website unter "How to use" steht. Das Resultat sieht so aus das ich das kleine Vorschaubild sehe und wenn ich darauf klicke wird das Bild in Originalgröße auf einer neuen leeren Seite angezeigt. Also keine Spur von jQuery Effekt. Ich hab schon die ganzen Pfadangaben im Header kontrolliert, somit schließ ich das mal aus. Oder muss die jquery-1.6.2.js irgendwo anders am apache server liegen ? lg
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25376	11.08.2011 - 14:37 Das jQuery-File kann entweder innerhalb deines Webroots liegen oder du holst sie dir direkt von Google-Code: http://ajax.googleapis.com/ajax/lib...2/jquery.min.js Aber das wird wohl kaum dein Problem sein. Was du machen musst, ist den eingebundenen Javascript-Code debuggen. Hol dir am besten Firefox + Firebug, aktiviere Firebug für deine Seite und schau dir dann in der Konsole an, welche Fehler du bekommst. Dann kannst du auch unter dem Tab "Network" überprüfen, ob das jQuery-File korrekt eingebunden wird oder es ein 404 gibt.
Bunny Addicted Registered: Oct 2002 Location: Austria Posts: 525	11.08.2011 - 14:47 okay danke, das werde ich heute noch probieren! wenn ich das von google nehme, brauch ich eigentlich nur den link einbinden, oder ?
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	11.08.2011 - 15:04 Zitat von Bunny okay danke, das werde ich heute noch probieren! wenn ich das von google nehme, brauch ich eigentlich nur den link einbinden, oder ? so ist es, die JavaScript File wird dann von einem CDN geladen
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	11.08.2011 - 15:52 Hast du schon getestet ob du die Adresse des jQuery Files im Browser direkt aufrufen kannst? Ich rieche Rechtemangel
Daeda Here to stay Registered: Aug 2007 Location: Solzburg Posts: 1486	11.08.2011 - 15:53 Zitat von mat Dann kannst du auch unter dem Tab "Network" überprüfen, ob das jQuery-File korrekt eingebunden wird oder es ein 404 gibt. ah der netzwerk tab is ja nett! ich sollt mir den firebug echt mal genauer anschaun. hab bisher nur den html-tab verwendet. wenn man da einfach im head den skript-tag mitn + erweitert, sieht man entweder das ganze skript, oder einen hinweis mitn 404 error. OT: lokale projekte sind zwar gut um auch mal offline dran arbeiten zu können, aber ich mach schon lang alle versuche online - damit tun sich auch diverse helfer leichter bei der fehlersuche http://www.ohost.de/ hat da eigentlich alles was man zum testen braucht
Bunny Addicted Registered: Oct 2002 Location: Austria Posts: 525	11.08.2011 - 19:56 das file kann ich im browser aufrufen !
Daeda Here to stay Registered: Aug 2007 Location: Solzburg Posts: 1486	12.08.2011 - 08:12 ausm how-to: Code: <script type="text/javascript"> $(function() { // Use this example, or... $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel // This, or... $('#gallery a').lightBox(); // Select all links in object with gallery ID // This, or... $('a.lightbox').lightBox(); // Select all links with lightbox class // This, or... $('a').lightBox(); // Select all links in the page // ... The possibility are many. Use your creative or choose one in the examples above }); </script> welche variante hast gnommen? poste bitte mal deinen aufruf vom bild (mit den code tags hier), laut den angaben müsstest du bei: Code: `<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>` ja zb eine id um deine pics platziern: Code: `<div id="gallery"><a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a></div>`
Bunny Addicted Registered: Oct 2002 Location: Austria Posts: 525	12.08.2011 - 13:48 Hey danke, genau das war der Fehler, jetzt funktionierts !! ich hab nämlich die erste Variante genommen, jetzt hab ich das mit der zweiten Variante gemacht --> Code: PHP `$('#gallery a').lightBox();` und es funktioniert. danke dir !
AbSailer boo hoo wendy Registered: Aug 2002 Location: Linz/Stmk Posts: 1160	12.08.2011 - 15:28 Zitat von Bunny Hey danke, genau das war der Fehler, jetzt funktionierts !! ich hab nämlich die erste Variante genommen, jetzt hab ich das mit der zweiten Variante gemacht --> Code: PHP `$('#gallery a').lightBox();` und es funktioniert. danke dir ! Mit der ersten Variante wärst aber auch mit einem Code: PHP `rel="lightbox"` innerhalb des "a" tags zum Ziel gekommen (nur der Vollständigkeit halber)
Bunny Addicted Registered: Oct 2002 Location: Austria Posts: 525	12.08.2011 - 16:20 alles klar !

jQuery einbinden

Forum Index > Software > Coding Stuff

Bunny

mat

Bunny

ill

watchout

Daeda

Bunny

Daeda

Bunny

AbSailer

Bunny