Ich möchte, wenn ich ein Bild anklicke, das es in original größe angezeigt wird. Wenn ich dann auf das vergrößerte Bild klicke, das es wieder verkleinert wird. Dies soll aber nicht im neuen Fenster geschehen.
Soweit ich gelesen habe, geht das mit einen Script. Ich habe schon einiges ausprobiert, hatte aber bisher noch nicht den gewünschten erfolg erzielt.
jQuery - Bilder mit einem Klick vergrößern und verkleinern!
Hallo Magister, das jQuery-Script von @Mario4370 ist schon super. Ich habe es für Deine Belange etwas angepasst.
Einiges ist zu beachten:
Die Bild-Ausgangsgröße (ca. 50px) muss in der Adresszeile des Bild eingetragen werden, nicht in der CSS, sonst verzerrt das Bild beim Vergrößern!
Die Bild-Ausgangsgröße kann mit "style=..." oder mit "height=.. /width=..." in der Adresszeile des Bild eingetragen werden
Es ist darauf zu achten, dass entweder die Breite oder die Höhe eines Bildes eingetragen wird, sonst verzerrt es!
Es ist darauf zu achten, dass die Bild-Ausgangsgröße im jQuery-Script und in der Adresszeile des Bildes den gleichen Wert habt, sonst hat das Bild beim Verkleinern eine andere Größe
Angaben in "%" sind auch möglich!
Das animierte Öffnen und schließen (mit 'slow' oder als Wert 800) funktioniert nur mit "px" !
<!--Wird nur benötigt, wenn jQuery noch nicht installiert ist - kann sonst gelöscht werden!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Vorschaubilder und Link anpassen Aktualisiert - Abstand zwischen den Bildern korrigiert!
Hallo Magister, mir sind da noch einige Punkte aufgefallen, die Du auf Deiner Webseite verbessern kannst.
Da Du nun die gesamte Bilderreihe verlinkt hast und eine neue Seite aufrufst, brauchen die Bilder keine große Auflösung. Die Bilder in Deiner Bilderreihe haben auf der Startseite alle Originalgröße. Das braucht Ladezeit. Man kann es auch sehen, dass die Bilder schön langsam nacheinander geladen werden. Für schnelle Verbindungen kein Problem. Kannst Du mit MS Office (Bilder bearbeiten > Bilder komprimieren > Größe ändern), mit IrfanView oder am besten mit Riot ändern.
Die Vorschaubilder sollten eine einheitliche Höhe bekommen "height="49px" (width=... entfernen, sonst verzerren die Bilder)
Wie im Bild unten zu sehen ist, hast Du rote Striche zwischen den Bildern. Das kommt durch Leerzeichen zwischen den Bilder.
Lösung (Abstand ohne Striche): 1. Leerzeichen zwischen den Bildern löschen 2. "style" in jedes Bild setzen, um den Abstand wieder herzustellen (<img style="padding:2px;" border="0" ....... ). 3. Oder eine entsprechende Klasse anlegen! 4. Abstand evl. anpassen
Die Bilderreihe ist sehr lang geworden. Monitor mit geringer Auflösung würden die Bilderreihen "umbrechen".
Lösung: 1. Ein oder zwei Bilder aus der Reihe nehmen.
Thx Wolfgang Habe die Bilder verkleinert. Der kleine Abstand zwischen den Bildern sollte schon sein. Kann ich dir mal meine Index geben, und du schaust da mal drüber, ob ev. noch Fehler vorhanden sind, oder ob du noch was optimieren kannst?