Lightbox - Anchor reagieren nicht mehr

[Kathywho]

Hi Leute,
vorab: bin mir nicht sicher, ob dieses Problem in das CSS oder HTML Unterforum gehört, sorry, wenn ich hier falsch bin.
Bei meiner Website habe ich folgendes Problem: Ich habe eine Lightbox-Bildergalerie eingebaut, die funktioniert soweit auch gut, aber komischerweise funktionieren die Next, Preview und Close- Anchor nicht mehr, sobald ich mehrere Bilder einbinde. Weiß einer von euch vielleicht, was ich falsch gemacht habe? Nach den ersten Bildern hat das ganze einwandfrei funktioniert, aber nach ein paar Bildern ging es nicht mehr, die Lightbox über das "X" wegzuklicken oder über die Next und Preview-Anchor zu steuern. Der Quellcode wurde immer nur per copy/paste eingefügt und das jeweilige Bild geändert, da darf also eigentlich nichts anders sein...
Aufgebaut ist das ganze folgendermaßen:
HTML:
<section id="gallery">
<section class="item">
<a href="#img1">
<div class="circle"><img class="circleimg" src="bildgestaltung/stille.jpg">
<div class="topics">Abstrakte Begriffe</div></div>
</a>
</section>
<section class="item">
<a href="#img2">
<div class="circle"><img class="circleimg" src="bildgestaltung/vitalitaetvorschau.jpg">
<div class="topics">Abstrakte Begriffe</div></div>
</a>
</section>

...
</section>

<div class="lightbox" id="img1">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
</div>
<a class="prev" href="#img3"> &lt; </a>
<a class="next" href="#img2"> &gt; </a>
<div class="clear"></div>
<img src="bildgestaltung/stille.jpg">
</div>
</div>

<div class="lightbox" id="img2">
<div class="box">
<a class="close" href="#">X</a>
Lorem ipsum dolor sit amet
<div class="content">
</div>
<a class="prev" href="#img1"> &lt; </a>
<a class="next" href="#img3"> &gt; </a>
<div class="clear"></div>
<img src="bildgestaltung/vitalitaet.jpg">
</div>
</div>
...

 

[SpiceLab]

Welche Lightbox kommt denn da zum Einsatz? Gibt ja diverse Clones davon.

Ist die Seite für Dritte zugänglich, um einen kompletten Blick darauf werfen zu können?

 

[Kathywho]

Ich kann die Seite leider momentan nicht auf den Server hochladen, weil der wohl momentan Probleme hat...

Ich weiß nicht mehr, was ich machen kann, die preview, next und close-anchor funktionieren immer nur bei den letzten paar bilder, wenn ich also mehr bilder einbinde, geht es nicht mehr bei den alten...
Habe die Lightbox nach der Anleitung auf http://webdesignerhut.com/pure-css-image-lightbox/ erstellt. Kann es sein, dass die Lightbox mit meinen vielen Bilder (22 Bilder) nicht klar kommt?

 

[SpiceLab]

<div class="lightbox" id="img1">
...
<a class="prev" href="#img3"> &lt; </a>
<a class="next" href="#img2"> &gt; </a>
...
</div>

Kann es sein, dass die Lightbox mit meinen vielen Bilder (22 Bilder) nicht klar kommt?

Wenn Du 22 Bilder am Start hast, darf in Lightbox #img1 der "Zurück"-Anker nicht mehr #img3 aus dem Artikel-Beispielcode mit 3 Bildern lauten

<div class="lightbox" id="img1">
  ...
  <a class="prev" href="#img22">&lt;</a>
  <a class="next" href="#img2">&gt;</a>
  ...
</div>
...
<div class="lightbox" id="img22">
  ...
  <a class="prev" href="#img21">&lt;</a>
  <a class="next" href="#img1">&gt;</a>
  ...
</div>

Hab's lokal nur mit 7 Bildern durchgespielt

 

[Kathywho]

Danke Spicelab, hab ich übersehen!
aber leider funktioniert es trotzdem nicht...

 

[SpiceLab]

Danke Spicelab, hab ich übersehen!
aber leider funktioniert es trotzdem nicht...

Entweder sind Dir beim Duplizieren der Lightbox noch weitere Fehler unterlaufen, wie beispielsweise:

• Keine fortlaufende Durchnummerierung der Lightboxes bis id="img22", sondern gleichlautende wiederkehrende Dupliketten
• Weitere prev-/next-Ankernamen falsch benannt

Oder es sollte nach den vorgenommenen Korrekturen der Browsercache geleert, und die Seite anschließend neu geladen werden.

Ansonsten kann ich den Fehler nicht reproduzieren.

Zum Vergleich mein relevanter HTML-Code bis #img7:

<section id="gallery">
   <!-- thumbnail image wrapped in a link -->
  <section class="item">
    <a href="#img1"><img src="img/pic01.jpg"></a>
  </section>
  <section class="item">
    <a href="#img2"><img src="img/pic02.jpg"></a>
  </section>
  <section class="item">
    <a href="#img3"><img src="img/pic03.jpg"></a>
  </section>
  <section class="item">
    <a href="#img4"><img src="img/pic04.jpg"></a>
  </section>
  <section class="item">
    <a href="#img5"><img src="img/pic05.jpg"></a>
  </section>
  <section class="item">
    <a href="#img6"><img src="img/pic06.jpg"></a>
  </section>
  <section class="item">
    <a href="#img7"><img src="img/pic07.jpg"> </a>
  </section>
</section>

<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
  ...
  <a class="prev" href="#img7">Previous</a>
  <a class="next" href="#img2">Next</a>
  ...
</div>
<div class="lightbox" id="img2">
  ...
  <a class="prev" href="#img1">Previous</a>
  <a class="next" href="#img3">Next</a>
  ...
</div>
<div class="lightbox" id="img3">
  ...
  <a class="prev" href="#img2">Previous</a>
  <a class="next" href="#img4">Next</a>
  ...
</div>
<div class="lightbox" id="img4">
  ...
  <a class="prev" href="#img3">Previous</a>
  <a class="next" href="#img5">Next</a>
  ...
</div>
<div class="lightbox" id="img5">
  ...
  <a class="prev" href="#img4">Previous</a>
  <a class="next" href="#img6">Next</a>
  ...
</div>
<div class="lightbox" id="img6">
  ...
  <a class="prev" href="#img5">Previous</a>
  <a class="next" href="#img7">Next</a>
  ...
</div>
<div class="lightbox" id="img7">
  ...
  <a class="prev" href="#img6">Previous</a>
  <a class="next" href="#img1">Next</a>
  ...
</div>

Wenn der Vergleich unserer HTML-Codes keine Unterschiede zu Tage fördert, was die IDs der 22 Lightboxes (id="img1" bis id="img22"), und ihrer enthaltenen Anker-Namen betrifft (#img1-prev u. #img7-next wg. der abweichenden Bilderanzahl ausgenommen), ist es hilfreich und zielführend, Deinen kompletten Code zu posten, um die Fehleranalyse auf den Punkt zu bringen.

Zur besseren Übersicht und Lesbarkeit bitte auch in [code=html][/code] eingebettet - Danke! :)

Weitere Sprachen:

• CSS: [code=css][/code]
• JS: [code=javascript][/code]
• jQuery (JS-Framework): [code=jQuery][/code]
  
• PHP: [code=php][/code]
• uvm. mit [code=option][/code]

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic

[edit]Formatierung[/edit]​