• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Bilder beim Anklicken vergrösser wie im Beispiel

J

Jonas23

New member
Guten Abend
mein Bruder bietet auf der Website T-Shirts an
nun damit man die T-Shirts nciht klein ansehen muss,
wollte ich etwas in dieser Art Ausstellungen
wenn man unten in der Bildergallerie auf ein Bild klickt vergrössert es sich jedoch nicht in einem neuen Fenster.
Nun wollte ich wissen ob jemand mit dem Erfahrung hat.

vielen Dank
Jonas Matter
 
Zuletzt bearbeitet:
Vielen Dank für Eure Antworten.
Ich habe mal probiert die Slimbox umzusetzen

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>

</head>

<body>

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

<a href="DSC03462.JPG" rel="lightbox-atomium">image #1</a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #2</a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #3</a>

</body>
</html>

doch wenn ich auf das bild klicke geht ein neues fenster auf,
es öffnet nich wie hier Slimbox 1.69 for MooTools 1.2 Demo
auf der gleichen page
was mach ich falsch
 
Wie Anna schon sagt, gefällt mir die Animation von Slimbox am Besten ... kommt statt mootools z.B. jquery zum Einsatz gibt es auch noch prettyfoto (jQuery lightbox clone - prettyPhoto - by Stephane Caron).

Gruß php_fussel

EDIT: Ich sehe gerade, es gibt die slimbox2 auch für jquery ... da muss ich jetzt erst mal schauen ;-)!

@Jonas23: Deine Pfade zu der .js und .css im Head für die slimbox müssen stimmen, vielleicht liegt es daran!
 
Zuletzt bearbeitet:
Jonas23 schrieb:
doch wenn ich auf das bild klicke geht ein neues fenster auf,
es öffnet nich wie hier Slimbox 1.69 for MooTools 1.2 Demo
auf der gleichen page
was mach ich falsch
Zum Vergrößern anklicken....

Schaust Du gelegentlich auch mal in den Quelltext der Beispielseiten?

Deine Links müssen so aussehen:
PHP: 
<a rel="lightbox-atomium" title="Bildtitel" href="Hier der Pfad zu dem großen Bild.jpg"><img src="Hier der Pfad zum Thumbnail.jpg" alt="Bildtext" /></a>

Und Dein CSS gehört auch in den Head und nicht wie in Deinem Beispiel in den Body.
 
anna55 schrieb:
Hast Du meinen Post gesehen? Hat sich zeitlich überschnitten irgendwie.
Zum Vergrößern anklicken....

So oder?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slimbox.js"></script>

</head>
 
<body>

<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

<a rel="lightbox-atomium" title="Bildtitel" href="DSC03462.JPG"><img src="DSC03462.JPG" width=20 height=20;alt="Bildtext" /></a>


</body>
</html>
 
Geht's denn so, wie Du's gemacht hast oder fragst Du nur gerne?

Ich hab jetzt mal die Originals verlinkt, damit Du das Ganze mal am Laufen siehst. Kopier's Dir einfach mal:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slimbox</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://www.digitalia.be/demo/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="http://www.digitalia.be/demo/slimbox/css/slimbox.css" type="text/css" media="screen" />
</head>
<body>
<a rel="lightbox-atomium" title="The Atomium during its renovation. See the difference between old and new shiny spheres." href="http://www.digitalia.be/images/26.jpg"><img src="http://www.digitalia.be/images/26t.jpg" alt="Atomium in renovation" /></a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #2</a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #3</a>
</body>
</html>
 
anna55 schrieb:
Geht's denn so, wie Du's gemacht hast oder fragst Du nur gerne?

Ich hab jetzt mal die Originals verlinkt, damit Du das Ganze mal am Laufen siehst. Kopier's Dir einfach mal:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slimbox</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://www.digitalia.be/demo/slimbox/js/slimbox.js"></script>
<link rel="stylesheet" href="http://www.digitalia.be/demo/slimbox/css/slimbox.css" type="text/css" media="screen" />
</head>
<body>
<a rel="lightbox-atomium" title="The Atomium during its renovation. See the difference between old and new shiny spheres." href="http://www.digitalia.be/images/26.jpg"><img src="http://www.digitalia.be/images/26t.jpg" alt="Atomium in renovation" /></a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #2</a>
<a href="DSC03462.JPG" rel="lightbox-atomium">image #3</a>
</body>
</html>
Zum Vergrößern anklicken....


nein eben hat es nicht funktioniert
aber deins funktionier tadellos
darf ich das so übernehmen?

vielen dank für deine hilfe
 
Den Aufbau kannst Du so übernehmen. Wie Du siehst, brauchst Du ein kleines und ein großes Bild.
Du darfst aber nicht auf die Orginal-JS und die CSS von Slimbox verlinken, die ich da in meinem Beispiel genommen habe. Du hast diese Dateien ja sicher bereits runtergeladen, wenn nicht, dann mach das. Und dann musst Du halt Deinen Pfad da eintragen.
 
anna55 schrieb:
Den Aufbau kannst Du so übernehmen. Wie Du siehst, brauchst Du ein kleines und ein großes Bild.
Du darfst aber nicht auf die Orginal-JS und die CSS von Slimbox verlinken, die ich da in meinem Beispiel genommen habe. Du hast diese Dateien ja sicher bereits runtergeladen, wenn nicht, dann mach das. Und dann musst Du halt Deinen Pfad da eintragen.
Zum Vergrößern anklicken....

ok runtergeladen hab ich es
werde es dann noch richtig verlinken
vielen dank
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben