Vergrößerung von Bildern

Penske1 · 14. Oktober 2010

Vergrößerung von Bildern

Hallo Leute

Hab da mal ne Frage zur Darstellung bzw. Vergrößerung von Bildern auf einer Website. Ich hab also eine Miniaturansicht und diese soll sich beim darauf klicken vergrößern.

Im Moment ist noch so: Link
Und aussehen soll es so: Link (vergrößern steht unter dem Bild)

Es gibt ja verschiedene Varianten dieser Vergrößerungsart. Die Variante die bei dem 2. Link benutz wird wäre aber optimal.

Kann mir jemand sagen wie man das macht?

Vielen Dank im voraus!
MfG, Steven.

UnnerveD · 14. Oktober 2010

AW: Vergrößerung von Bildern

Schau mal im Web nach "Lightbox" - damit wurde das gemacht.

MfG

Penske1 · 21. Oktober 2010

AW: Vergrößerung von Bildern

Ja vielen Dank, das ist die Art wie es gern hätte.
Mit der Einbindung komm ich aber nicht zurecht. Auf der offiziellen Seite ist alles in englisch und dafür reicht mein englisch leider nicht aus.

Puepue · 21. Oktober 2010

AW: Vergrößerung von Bildern

Also du musst die ganzen Dateien runterladen, entpacken und auf deinen Server schieben (klar)
Dann musst du im zwischen <head> und </head> in deiner HP die Javascript-Dateien und die Stylesheets einbinden (Pfade ggf. anpassen):

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Im Content-Bereich (<body></body>) kannst du dann die Bilder einfügen

<a href="PFAD_ZUM_GROßEN_BILD" rel="lightbox" title="my caption">
<img src="PFAD_ZUM_KLEINEN_BILD(VORSCHAU)" width="100" height="100" alt="Vorschaubild" title="Klick mich!" />
</a>

Alles in allem muss dann da also mindestens das da stehen:

Code:

<html>
 <head>
    <script type="text/javascript" src="[I]js/prototype.js[/I]"></script>
    <script type="text/javascript" src="[I]js/scriptaculous.js[/I]?load=effects,builder"></script>
    <script type="text/javascript" src="j[I]s/lightbox.js[/I]"></script>

    <link rel="stylesheet" href="[I]css/lightbox.css[/I]" type="text/css" media="screen" />
 </head>
 <body>
    <a href="PFAD_ZUM_GROßEN_BILD" rel="lightbox" title="my caption">
       <img src="PFAD_ZUM_KLEINEN_BILD(VORSCHAU)" width="100" height="100" alt="Vorschaubild" title="Klick mich!" />
    </a>
 </body>
</html>

Penske1 · 22. Oktober 2010

AW: Vergrößerung von Bildern

Besten Dank erstmal, soweit funktioniert es.

Jetzt hab ich aber noch das Problem, dass kein "Close" Button angezeigt wird. Auch wenn ich eine Bilderserie machen will kommt kein "Next"- und "Prev"-Button.
Denke mal dass da irgendwo noch irgendwas mit rein muss.

Da fällt mir auch noch was ein. Kann man die vergrößerten Bilder der Bildschirmgröße des Nutzers anpassen? So das ein Bild mit z.B. 1500 pixel breite, bei einem User mit 1024er Auflösung nicht über den Rand guckt.

Puepue · 22. Oktober 2010

AW: Vergrößerung von Bildern

In der css-Datei wird meines Wissens ../images/prevlabel.png (oder so) ausgelesen. Das heißt, im übergeordneten Ordner der Ordner "images" .. da musst du dann evtl. den Pfad anpassen oder auch den Ordner da hin tun,wo er hin muss..

mauorrizze · 23. Oktober 2010

AW: Vergrößerung von Bildern

Penske1 schrieb:
Da fällt mir auch noch was ein. Kann man die vergrößerten Bilder der Bildschirmgröße des Nutzers anpassen? So das ein Bild mit z.B. 1500 pixel breite, bei einem User mit 1024er Auflösung nicht über den Rand guckt.

Da musst du leider kompromissbereit sein. Es gäbe zwar Mittel und Wege, aber nichts einfaches, geschweige denn elegantes. Browserseitige Skalierung der Bilder klappt nicht so gut.
Beispiellösungen: Flash; Abfragen der Bildschirmgröße per js und entsprechend die verschieden gespeicherten Bilder laden

Penske1 · 23. Oktober 2010

AW: Vergrößerung von Bildern

Nach der Anpassung der Pfade hat es dann doch geklappt. Die Prev und Next Buttons sind auch so noch erschienen, deswegen versteh ich nicht warum ich beim Close-Button extra noch den Pfad ändern musste. Aber sei es drum, es läuft ja

Hab da aber auch noch einen Nachteil entdeckt. Die Ordner wo die Seiten gespeichert sind die die Bilder enthalten, müssen anscheinend immer auf der gleichen Ebene liegen. Wenn die eine Seite 2 Überordner hat und die andere nur einen, funktioniert der Close-Button bei dem einen und bei dem anderen nicht.

Hab mir schon gedacht dass das mit der Skalierung nicht geht. Da einige Bilder sehr groß waren hab ich sie halt noch auf eine einheitliche Größe angepasst.

Danke an alle für die Hilfe! So amchts Spaß :daumen:

LG, Steven

Vergrößerung von Bildern

Penske1

Komplett-PC-Aufrüster(in)

UnnerveD

BIOS-Overclocker(in)

Penske1

Komplett-PC-Aufrüster(in)

Puepue

Komplett-PC-Aufrüster(in)

Penske1

Komplett-PC-Aufrüster(in)

Puepue

Komplett-PC-Aufrüster(in)

mauorrizze

Komplett-PC-Aufrüster(in)

Penske1

Komplett-PC-Aufrüster(in)

Ähnliche Themen