Lighbox Probleme
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
breme
code
dank
fehler
fotogalerie
funktion
galerie
header
http
jemand
layout
markup
model
option
punkt
quere
reihe
schritt
url
-
Hi,
ich hab jetzt für eine Fotogalerie etwas mit Lightbox herumgespielt…
Die Funtion hab ich urpsrünlich schon mal zum Laufen gebracht, jedoch hab ich mir das Layout meiner Website dadurch zerstört….
Darum hab ich die Funktion jetzt wieder deaktivert, weiß jedoch leider nicht wie ich diese in die Seite einbauen muss damit
1. die Fotogalerie funktioniert
2. das Layout nicht durcheinanderkommt (Probleme gab es mit der „Slider“ Funktionalität im Header – mit den 3 Bilder.
Kann mir vielleicht jemand einen Tipp geben wie das Javascript der Lightbox in der Seite einfügen kann ohne das was kapput geht?
Danke und lg
Patrick
Hier ist die Seite ohne Lightbox:
<!DOCTYPE html> <html lang="en"> <head> <title>Pablo's Place</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script> <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script> <script type="text/javascript" src="js/roundabout.js"></script> <script type="text/javascript" src="js/roundabout_shapes.js"></script> <script type="text/javascript" src="js/gallery_init.js"></script> <script type="text/javascript" src="js/cufon-replace.js"></script> <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all"> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <script type="text/javascript" src="js/IE9.js"></script> <![endif]--> </head> <body> <!-- header --> <header> <div class="container"> <h1><a href="index.html">Pablo's Place</a></h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">Über mich</a></li> <li><a href="training.html">Ausbildung</a></li> <li><a href="gallery.html">Galerie</a></li> <li><a href="links.html">Links</a></li> <li><a href="contact.html">Gästebuch</a></li> </ul> </nav> </div> </header> <!-- #gallery --> <section id="gallery"> <div class="container"> <ul id="myRoundabout"> <li><img src="images/slide3.jpg" border="0" /></li> <li><img src="images/slide4.jpg" border="0" /></li> <li><img src="images/slide2.jpg" border="0" /></li> </ul> </div> </section> <!-- /#gallery --> <div class="main-box"> <div class="container"> <div class="inside"> <h2>Meine <span>Fotogalerie</span></h2> <p>Hier sind schon meine ersten Fotos!!!</br>Zum Vergrößern einfach auf das Vorschaubild klicken</p></br> <p> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/1-tag.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/1-tag.jpg" alt="1. Tag" /></a> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/1-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/1-woche.jpg" alt="1. Woche" /></a> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/2-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/2-woche.jpg" alt="1. Woche" /></a></br></br> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/3-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/3-woche.jpg" alt="1. Woche" /></a> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/4-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/4-woche.jpg" alt="1. Woche" /></a> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/5-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/5-woche.jpg" alt="1. Woche" /></a></br></br> <a class="fancybox-effects-d" rel="group" href="/Grafik/Fotogalerie/Baby/6-woche.jpg"><img src="/Grafik/Fotogalerie/Baby/thumb/6-woche.jpg" alt="1. Woche" /></a></br></br> ©Birog's Hunting / Hannelore & Stefanie Kaineder </p> </div> </div> </div> <!-- footer --> <footer> <div class="container"> <div class="wrapper"> <div class="fleft"></div> <div class="fright"><!--<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website template</a> designed by TemplateMonster.com | <a href="http://templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com--></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script> </body>
Und hier ist das Lightbox Scrip:
<!-- Add jQuery library --> <script type="text/javascript" src="/Galerie/lib/jquery-1.9.0.min.js"></script> <!-- Add fancyBox main JS and CSS files --> <script type="text/javascript" src=" /Galerie/source/jquery.fancybox.js"></script> <link rel="stylesheet" type="text/css" href="/Galerie/source/jquery.fancybox.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { /* * Simple image gallery. Uses default settings */ $('.fancybox').fancybox(); /* * Different effects */ // Change title type, overlay closing speed $(".fancybox-effects-a").fancybox({ helpers: { title : { type : 'outside' }, overlay : { speedOut : 0 } } }); // Disable opening and closing animations, change title type $(".fancybox-effects-b").fancybox({ openEffect : 'none', closeEffect : 'none', helpers : { title : { type : 'over' } } }); // Set custom style, close if clicked, change title type and overlay color $(".fancybox-effects-c").fancybox({ wrapCSS : 'fancybox-custom', closeClick : true, openEffect : 'none', helpers : { title : { type : 'inside' }, overlay : { css : { 'background' : 'rgba(238,238,238,0.85)' } } } }); // Remove padding, set opening and closing animations, close if clicked and disable overlay $(".fancybox-effects-d").fancybox({ padding: 0, openEffect : 'elastic', openSpeed : 150, closeEffect : 'elastic', closeSpeed : 150, closeClick : true, helpers : { overlay : null } }); /* * Button helper. Disable animations, hide close button, change title type and content */ $('.fancybox-buttons').fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', closeBtn : false, helpers : { title : { type : 'inside' }, buttons : {} }, afterLoad : function() { this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); } }); /* * Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked */ $('.fancybox-thumbs').fancybox({ prevEffect : 'none', nextEffect : 'none', closeBtn : false, arrows : false, nextClick : true, helpers : { thumbs : { width : 50, height : 50 } } }); /* * Media helper. Group items, disable animations, hide arrows, enable media and button helpers. */ $('.fancybox-media') .attr('rel', 'media-gallery') .fancybox({ openEffect : 'none', closeEffect : 'none', prevEffect : 'none', nextEffect : 'none', arrows : false, helpers : { media : {}, buttons : {} } }); /* * Open manually */ $("#fancybox-manual-a").click(function() { $.fancybox.open('1_b.jpg'); }); $("#fancybox-manual-b").click(function() { $.fancybox.open({ href : 'iframe.html', type : 'iframe', padding : 5 }); }); $("#fancybox-manual-c").click(function() { $.fancybox.open([ { href : '1_b.jpg', title : 'My title' }, { href : '2_b.jpg', title : '2nd title' }, { href : '3_b.jpg' } ], { helpers : { thumbs : { width: 75, height: 50 } } }); }); }); </script> <style type="text/css"> .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; } </style> <!--[if lt IE 7]> <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all"> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <script type="text/javascript" src="js/IE9.js"></script> <![endif]--> </div> </div> </div> <!-- footer --> <footer> <div class="container"> <div class="wrapper"> <div class="fleft"></div> <div class="fright"><!--<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website template</a> designed by TemplateMonster.com | <a href="http://templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com--></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Kann es sein, dass du dir selbst das Layout zusammengehaun hast?
Du musst lediglich deine Bilder alle gleich groß machen (oder nur anzeigen müsste schon reichen) um eine Schöne Gallerie zu erhalten.
Baue deine Galerie folgendermaßen auf:
Diese Liste kannst du dann per Stylesheets "fesch" machen<ul id="gallery"> <li> <a href="source/to/image.jpg"> <img src="source/to/thumbnail.jpg" width="100" height="40" alt="" /> </a> </li> <li> <a href="source/to/image2.jpg"> <img src="source/to/thumbnail2.jpg" width="100" height="40" alt="" /> </a> </li> </ul>
Füge jQuery und LightBox Scripte ein (EDIT: bitte in <head></head>)
und mache eine neue scripts.js Datei und kopier dir das und verlinke sie wie obige in dein Markup<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>$(document).ready(function () { $('#gallery a').lightBox(); });
Das sollte reichen. Das Markup stammt von mir, der Rest ist aus http://leandrovieira.com/projects/jquery/lightbox/ entnommen. Ist alles freilich ungetestet, sollte dennoch funktionieren
Beitrag zuletzt geändert: 12.4.2013 12:24:00 von limabone -
Hallo Patrick,
nutzt Du denn nun die Lightbox oder dann doch die Fancybox?
Denn während in Deiner Beschreibung von der Lightbox die Rede ist, steht im Quelltext, dass es sich jedoch um die Fancybox handelt - was nicht das selbe ist.
1) Vielleicht solltest Du Dich entscheiden was Du nutzt, und ggf. den Titel des Threads anpassen?
2) Besteht vielleicht die Möglichkeit, eine Testseite mit aktiver Fancybox (oder Lightbox?) hochzuladen, damit sich das mit z.B. Firebug - oder was auch immer - schneller betrachten lässt?
@limabone
Deine Beispiele sind unvollständig, da beide Scripte - egal ob Lightbox oder Fancybox - einen Bezug brauchen, um zu erwartungsgemäß funktionionieren:
<a class="fancybox-effects-d" rel="group" ...
-
Sorry tut mir leid...du hattest recht es ist Fancybox....
Lightbox hatte ich mir auch angeschaut und hatte ich schon mal oben und dann aber doch Fancybox genommen.
Hier ist meinte Testseite http://pablos-place.lima-city.de/gallery.html
Und man kann hier sehen das ich durch meine wahrscheinich sehr banale Vorgehensweise das Design der Seite zerstört habe.
1. Der Selektor ganz oben funktioniert nicht mehr
2. die Menüleiste ist auch "kaputt"
3. aber die Fancybox funktioniert
Im Firefox sieht es ja noch halbwegs "normal" aus, aber im IE9 ist es total zerstört.
-
*Hust*
Ich sehe nun beide Quelltexte: Den ersten (ohne Fancybox), und den jetzigen (mit Fancybox).
Ist beim jetzigen etwas durcheinandergeraten?
1) Lädst Du 2 Jquery´s..
Zeile 8:
<script type="text/javascript" src="js/jquery-1.4.2.min.js" >
Zeile 25:
<script type="text/javascript" src="/Galerie/lib/jquery-1.9.0.min.js">
2) .. wird zwischendurch noch eine Yahoo-GUI geladen..
Zeile 9:
<script type="text/javascript" src="js/cufon-yui.js">
3) .. steht der Footer auf einmal im Headbereich..
Zeile 228:
<!-- footer --> <footer> <div class="container"> <div class="wrapper"> <div class="fleft"></div> <div class="fright"><!--<a rel="nofollow" href="http://www.templatemonster.com/" target="_blank">Website template</a> designed by TemplateMonster.com | <a href="http://templates.com/product/3d-models/" target="_blank">3D Models</a> provided by Templates.com--></div> </div> </div> </footer> <script type="text/javascript"> Cufon.now(); </script> </head>
.. soll das alles so sein? ;)
Ganz sicher kommen sich die Variablen in die Quere, z.B.:
var m=function()
Variable m (oder auch noch andere; [cufon-yui.js]) könnte(n) mehrfach genutzt worden sein - das würde ich zunächst prüfen.
Beitrag zuletzt geändert: 12.4.2013 13:25:28 von menschle -
pablos-place schrieb:
Das kann ich Dir - auf die Schnelle - nicht sagen.
kann ich die Punkte die du Aufgeführt hast einfach rauslöschen?
Wenn ich Du wäre, würde ich, der Reihe nach, alles nacheinander aufbauen und prüfen - niemals viele Änderungen zugleich durchführen, sondern Schritt für Schritt.
Die Fehler zeigen sich dann schon - ebenfalls der Reihe nach.
Deine Webseite komplett nachzubauen - und die Fehler zu beheben - wäre (für mich) sicherlich eine Option. Eine andere Option (für Dich) ist, sich Scripte von anderen Webseiten anzuschauen. Ein kleines Beispiel für die eingesetzte Fancybox parallel zu anderen Scripts wäre diese Seite, welche ich im Web fand.
Würde hier nämlich noch etwas unterstützung benötigen, da ich es alleine sicher nicht gebacken bekomm.
Ist sicher kein Hindernis, denn hier gibt es durchaus sehr fähige User, welche gerne weiterzuhelfen bereit sind. -
Danke für die Hinweise, ich hab jetzt noch etwas geändert und die Fancybox im Quelltext ganz nach oben gegeben und darunter kommen erst die CSS für das Layout der Seite.
Dadurch passt jetzt das Layout der Seite wieder, gleichzeitig hab ich dadurch aber die Fancybox funktion zerstört...*heul*
Kann hier nochmal jemand im Queltext nachschauen: http://pablos-place.info/gallery.html
Kann ich das jquery nicht auf eine externe Datei verweisen anstatt das alles in der Seite zu haben? Vielleicht hilft das
menschle schrieb:
Ganz sicher kommen sich die Variablen in die Quere, z.B.:
var m=function()
Variable m (oder auch noch andere; [cufon-yui.js]) könnte(n) mehrfach genutzt worden sein - das würde ich zunächst prüfen.
Wo sind diese zu finden? Hab ich nicht entdeckt, ist das auf der Seite bzw. was muss ich da genau ändern?
Beitrag zuletzt geändert: 12.4.2013 21:02:10 von pablos-place -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
