Vielleicht kann mir jemand erklären

[Grauhaupt]

Dies ist der Code meiner Testseite für das Plugins "Lightbox2" auf meinem Webserver unter www.petersfotoblock.de

Code: Select all

<a class="serendipity_image_link" href="/uploads/Fotos/Blumen/Rose_7.JPG" 
onclick="F1 = window.open('/uploads/Fotos/Blumen/Rose_7.JPG','Zoom',
'height=1181,width=1765,top=-43,left=85,toolbar=no,menubar=no,location=no,resize=1,
resizable=1,scrollbars=yes'); return false;"><!-- s9ymdb:47 -->
<img alt="" class="bild_links" src="/uploads/Fotos/Blumen/Rose_7.serendipityThumb.JPG" 
style="margin-left:5px; width:250px" /></a>
<a class="bild_links" href="/uploads/Fotos/Blumen/Rose_11.JPG" 
onclick="F1 =window.open('/uploads/Fotos/Blumen/Rose_11.JPG','Zoom','height=1181,width=1765,
top=-43,left=85,toolbar=no,menubar=no,location=no,resize=1, resizable=1,scrollbars=yes');
 return false;"><img alt="Rose_11" class="bild_links" 
src="/uploads/Fotos/Blumen/Rose_11.serendipityThumb.JPG" style="margin:5px; width:250px" /></a>

Die ist der Code der gleichen Testseite, allerdings auf meinem Localhost, den ich nach stundenlanger Arbeit endlich so hatte ich, wie ich mir das Aussehen vorstellte.

Code: Select all

<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_32.JPG">
<!-- s9ymdb:11 --><img alt="rose_30" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_32.serendipityThumb.JPG" style="margin:5px; width:188px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_30.jpg"><img alt="Rose_32" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_30.serendipityThumb.jpg" style="margin:5px; width:188px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_31.JPG">
<!-- s9ymdb:12 --><img alt="rose_31" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_31.serendipityThumb.JPG" style="margin:5px; width:188px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_29.JPG">
<!-- s9ymdb:10 --><img alt="rose_29" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_29.serendipityThumb.JPG" style="margin:5px; width:188px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_3.jpg">
<!-- s9ymdb:16 --><img alt="rose_03" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_3.serendipityThumb.jpg" style="margin-left:5px; width:250px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_9.JPG">
<!-- s9ymdb:22 --><img alt="rose_09" class="bild_links" src="/petersfotoblog/uploads/Blumen/Rose_9.serendipityThumb.JPG" style="margin-left:5px; width:250px" /></a>
<a class="serendipity_image_link" href="/petersfotoblog/uploads/Blumen/Rose_8.JPG">
<!-- s9ymdb:21 --><img alt="rose_08" class="bild_lin ks" src="/petersfotoblog/uploads/Blumen/Rose_8.serendipityThumb.JPG" style="margin-left:5px; width:250px" /></a>

Nachdem ich die Seite auf meinem lokalen Rechner fertig hatte, dachte ich mir, kopierst den Code einfach rüber, denn die gleichen Bilder hatte ich ja auch in der anderen Mediendatenbank abgespeichert. Das Problem war nur, dass im Artikel auf dem Webspace danach nur Platzhalter angezeigt wurden. Das Problem habe ich mittlerweile selbst erkannt, da die angesprochenen Verzeichnisse ja nicht übereinstimmen.
Was mich an der ganzen Sache allerdings ganz gewaltig stört, ist der aufgeblähte Code. Meine Frage an das Forum:
Wieso sind für die gleiche Sache, zwei verschiedene Codes vorhanden? Zumal ja beide Codes wunderbar funktionieren!!
Mal ganz davon abgesehen, dass man als etwas sehbehinderter Mensch, wie ich es bin, beim ersten Code erhebliche Schwierigkeiten hat, evtl. Fehler zu suchen.
Ein Vorschlag noch zum Ende.....vielleicht schafft man es ja irgendwann den Editor so zu gestalten, dass der Code wie in anderen Editoren Zeile für Zeile untereinander steht und man so Fehler noch leichter finden kann
Gruß
Hans-Peter

[yellowled]

Leider ist Dein Blog nicht zu erreichen, so dass man sich das Ganze mal angucken könnte. So rein auf Basis von Quellcode ist sowas manchmal schwer einzuschätzen, wenn man nicht zufällig selbst exakt das gleiche verwendet.

Wieso sind für die gleiche Sache, zwei verschiedene Codes vorhanden? Zumal ja beide Codes wunderbar funktionieren!!

Spontan würde ich sagen: das ist nicht derselbe Code. Das ist allerdings auch schwer zu beurteilen, weil man nicht weiß, wo und wie Du eben diesen überhaupt erzeugst. Du sagst nicht, welchen Editor (WYSIWYG bzw. CK Editor oder eben gerade nicht? Verwendest Du womöglich irgendwelche Zusatzplugins für den Editor oder die Mediendatenbank?) Du verwendest. Du sagst auch nicht, ob das nun das Markup ist, welches Du im Editor stehen hast oder welches letztlich im Quelltext ausgegeben wird (was durchaus unterschiedlich sein kann).

Ein Vorschlag noch zum Ende.....vielleicht schafft man es ja irgendwann den Editor so zu gestalten, dass der Code wie in anderen Editoren Zeile für Zeile untereinander steht und man so Fehler noch leichter finden kann

Auch das ist wieder eine Frage dessen, was Du da eigentlich konkret benutzt, ich weiß auch nicht, was genau Du mit „anderen Editoren“ meinst, insofern ist es ein bisschen schwer, eine Antwort zu geben bzw. ich möchte jetzt hier nicht wild vermuten und Dinge beantworten, um die es eigentlich nicht geht.

Vielleicht beschreibst Du einfach mal, wie Du überhaupt zu diesem Code kommst? Mir zumindest ist das komplett unklar.

YL

[thh]

Leider ist Dein Blog nicht zu erreichen, so dass man sich das Ganze mal angucken könnte.

Nicht Block, sondern Blog: http://www.petersfotoblog.de/

Die betreffende Seite ist wohl diese: http://www.petersfotoblog.de/index.php? ... htbox.html

[Be@t]

Hallo Hans-Peter

In einem anderen Beitrag hast Du geschrieben, dass Du den CKEditor benutzt. Das ist ein WYSIWYG-Editor und den darurch produzierten Quellcode braucht man sich eigentlich fast nie anzusehen. Das will man ja auch nicht, denn What You See Is What You Get. Meistens zumindest. Ich bloge schon über 10 Jahre mit WYSIWYG-Editor und brauche den Quelltext nur in Ausnahmefällen.

Das von Dir gewünschte Resultat ist mit dem CKEditor recht einfach zu erzielen.

- Im neuen Eintrag klickst Du auf das farbige Bild-Icon (Serendipity Media Library) und darauf öffnet sich die Mediathek.
- Du wählst Dein gewünschtes Bild aus und wirst weitergeleitet.
- Ob Du die Vorschau oder das grosse Bild verwendest, ist egal und für Lightbox nicht entscheidend.
- Für ein alleinstehend, zentrierstes Bild wählst Du die erste Option unter "Bildausrichtung" (wenn Du mehrere Bilder nebeneinander darstellen willst, wählst Du die zweite Option (mit Fliesstext rechts)).
- Wähle dann "Das Bild soll hierhin linken:" und darunter wird Dir gleich die richtige Bilddatei angegeben. Dieser Link aktiviert die Lightbox. Normalerweise verlinkt man das Vorschaubild (Thumbnail) mit dem eigentlichen Bild, welches dann per Klick in der Lightbox angezeigt wird. Ich speichere auch mal Bilder in verschiedenen Bildgrössen ab, wenn ich z.B. im Anfangsbereich eines Beitrags ein grösseres Bild (als die vordefinierte Thumbnail-Grösse) anzeigen und dieses dann in der Lighbox noch grösser zeigen will.
- Schön finde ich noch das Feld "TITLE-Attribut (wird beim Überfahren mit der Maus angezeigt)". Denn der Text, den Du da eingibst, wird Dir in der Lightbox-Ansicht dann als Bildbeschreibung angezeigt.

Das ist es schon. Im CKEditor siehst Du dann das erste Bild. Weitere Bilder dann genau gleich ein-/anfügen. Speichern, fertig.

Ich habe das während dem Schreiben dieses Beitrags in meinem Testblog durchgeführt (um die richtigen Bezeichnungen zu verwenden). Das funktionierte problemlos, ohne dass ich mir je den Quellcode habe anzeigen lassen. Falls Interesse, hier der Link zum Testeintrag.

[Grauhaupt]

Vielen Dank yellowied und Be@t für euere schnelle Antwort. Zunächst einmal die korrekte Webadresse lautet: www.petersfotoblog.de
Es ist richtig, ich benutze als Editor den CK-Editor vollständig. Zwei Anmerkungen: ich habe mir eine eigene User.css geschrieben, in der ich mir style kodiert habe, damit einige Dinge so positioniert und formatiert sind,wie ich mir meine Seite vorstelle. Beide Blogs sowohl der auf dem lokalen Rechner, als der im Web, sind vollkommen identisch. Mit den gleichen Plugins und Einstellungen. Deshalb kann ich ja nicht verstehen, dass die beiden Codes so unterschiedlich sind und trotzdem jeder für sich auf dem jeweiligen Host funktionieren, nur nicht wenn ich die Codes vertausche.
Ich bin ein visuell veranlagter Mensch. Ich will mich intensiv mit HTML, CSS und deren Möglichkeiten beschäftigen. Um also zu verstehen wie was funktioniert, muss ich den schriftlichen Code dazu sehen.
Ich werde wohl nie ein Experte, aber ich habe gewisse Vorstellungen, wie was auszusehen hat und auch funktioniert und bin sowohl in diesem erstellten Blog als auch mit einer eigenen Homepage im Internet vertreten und probiere immer wieder etwas Neues aus. Man lernt eben nur,wenn man selbst praktisch arbeitet.
Deshalb ist es für mich ja so wichtig zu verstehen, warum die beides Codes so unterschiedlich sind? Warum diese ganzen html-codes im Web dazugeschrieben werden und auf dem lokalen Rechner die einfache URL auf das grössere Bild ausreicht.
Ich hoffe man kann mir diese Frage beantworten.
Danke nochmals und schönen Abend

[yellowled]

Deshalb ist es für mich ja so wichtig zu verstehen, warum die beides Codes so unterschiedlich sind? Warum diese ganzen html-codes im Web dazugeschrieben werden und auf dem lokalen Rechner die einfache URL auf das grössere Bild ausreicht.

Wie gesagt, ganz schwierig gedanklich zu reproduzieren, ohne zu wissen, was Du das lokal genau machst, aber eins kann ich auf jeden Fall sagen: „richtig“ (im Sinne von „wie es sein soll“, wenn man eine Lightbox verwenden möchte) ist das Markup auf live.

Beim lokalen Markup sticht mir das „onclick="F1“ ins Auge, danach kann man recht gut „greppen“ (im Quelltext suchen lassen) und landet dann dabei, dass dieser Code eingefügt wird, wenn man beim Einfügen des Bildes aus der Mediendatenbank zum einen die Option „Das Bild soll hierhin linken“ auswählt und zum anderen im Dropdown „Ziel dieses Links“ die Option „Popup-Fenster (via JavaScript, adaptive Größe)“. Das musst Du lokal wohl gemacht haben …

Der Witz daran ist: Das ist für eine Lightbox über das entsprechende Plugin NICHT nötig.

Dafür reicht es, wenn das kleinere Bild in einem Link auf das größere Bild „sitzt“. Die oben genannte Option ist sehr, sehr alt und „simuliert“ quasi eine Lightbox, indem per JavaScript ein neues Browserfenster geöffnet wird, in dem die große Version der Bildes angezeigt wird und das etwa genauso groß ist wie das große Bild. (Sowas benutzt kein Mensch mehr, die meisten Seiten verwenden eine Lightbox.)

YL

[Be@t]

Weil es nicht explizit erwähnt wurde und vielleicht nicht klar zu Ausdruck kam:

Die Lightbox-Funktion wird über ein Plugin in den Blog gebracht. Wenn Du also in der Administrationsoberfläche auf den linken Seite auf Plugins und dann Ereignis-Plugins klickst, sollte dort ein Plugin mit dem Namen Lightbox für Blog Einträge mit Bildern zu finden sein. Wenn nicht, musst Du es installieren.

[Grauhaupt]

Vielen Dank.
Lightbox funktioniert. Hatte tatsächlich auf der Internetseite als Ziel des Links "Popup-Fenster" ausgewählt, statt "keines". Deshalb die zusätzlichen Codes im Quellcode.
Ich sage ja: probieren geht über studieren!