Bildergalerie per Image Map verlinken mit Pop Up zum großen Bild

[Spatzihasi]

Hi ihr Lieben,

ich bin gerade an den Vorbereitungen für eine Webseite.

Bilder die in die Galerie sollen sind schon ein wenig nachbearbeitet.

Ich habe in Photoshop über eine Aktion ein grosses Bild erstellt.

Auf dieses Bild wurden dann in jede Reihe vier Bildthumbs eingefügt

Darunter wieder vier...

Ich wollte beim Einfügen in die Webseite aber das grosse Bild auf dem die Thumbs liegen, nicht zerschnippeln um jedes Thumbnail einzeln in der Webseite einzufügen. Also hab ich es so vor das ich über Image Maps Verweise auf jedes Thumbnail setze damit man es anklicken kann. Soweit dürfte das hoffentlich kein Problem werden

Aber ist es auch möglich, das ich beim anklicken des Thumbnails ein Fenster bekomme in dem mein großes Bild angezeigt wird, z.b. in einer Grösse von 600x450px?

Ich hab eine Möglichkeit gefunden das so zu machen das sich ein Pop Up Fenster öffnet. Aber irgendwie sagt mir das nicht zu.

Ich hätte es lieber ähnlich wie es von einer Lightbox kennt.

Ich würde mir so eine Lightbox ja auch machen aber ich hab keine Ahnung von Javascript und die Anleitungen die ich gefunden habe um eine Lightbox zu erstellen, sind alle in Englisch.
Also verstanden hab ich da so garnix.

Hat das denn schon mal jemand von Euch gemacht via Image Map?

Ansonsten wäre auch noch die Möglichkeit eine Galerie mit Simple Viewer zu machen, aber ich dachte halt ich schaff es das Ganze selbst zu schreiben.

LG Christin

[Spatzihasi]

Hat sich erstmal erledigt. Ich machs mit flash :)

[Jenny]

Hallo!

Mit Flash schließt du aber Ei-Päds und Ei-Föhns aus...

Als LightBox kann ich dir PrettyPhoto empfehlen:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Die Seite ist zwar auch englisch, aber dennoch recht gut dokumentiert.
Hier sogar ein Tutorial bzgl. image map:
http://www.no-margin-for-errors.com/blog/2011/04/19/tutorial-open-prettyphoto-from-an-image-map/

[Spatzihasi]

Hallo Jenny,

danke für die Links das muss ich mir mal genauer angucken aber stimmt es das die Lightbox auch Flash dabei hat? Hat jedenfalls eine erzählt die die mal bei jemandem eingebaut hat.

Ich muss gucken ob ich das mit dem Englisch auf die Reihe krieg. Und wegen den Iphones und I Pads... meinste wirklich es sucht jemand ein Kosmetikstudio übers Ipad oder Iphone. Ich denke schon das die Leute da an den PC gehen.

ich hab ja auch ein kleines Flashintro. Das hat zur Seite ganz gut gepasst.

LG Christin

[Jenny]

Hallo!

Was meinst du mit "auch Flash dabei hat"?
Ob sie auch Flash wiedergeben kann? Ja, kann sie.
Oder ob sie in ActionScript geschrieben ist? Nein, ist sie nicht.

[Spatzihasi]

Hallo

Ich meinte das ich davon ausgegangen bin das sie entweder flash enthält also nich komplett mit Javascript geschrieben ist oder eben ganz mit flash.

Aber wenn du sagst das ist sie nicht dann war das dann eine falsche Info

LG Christin

[Spatzihasi]

Hallo ihr Lieben,

ich hab mich jetzt dafür entschieden die Lightbox 2 zu nehmen Version 2.51.

Bei den Bildern ist es jetzt so das ich für die Thumbs z.b. die Bildbezeichnungen

Thumb1, Thumb2, Thumb3, Thumb4 usw. habe

Bei den großen Bildern z.b.

image1, image2, image3, image4

Wenn ich das nicht nummeriere mit 1 bis 4 usw. wird immer das letzte Bild angezeigt egal auf welches Thumb ich klicke

In der Webseite hab ich Bilder von Maskenbildnerei, Schmuck und Studio.

Kann mir mal jemand von euch bitte eine Meinung sagen wie ich das am günstigsten benenne?

Image 1 bis XX ist mir zu unaussagekräftig.
Aber ich befürchte wenn ich zum Beispiel schreibe

Masken1,2,3 usw für Maskenbildnereibilder

dann Schmuck4, Schmuck 5, Schmuck6 für Schmuckbilder

und Studio7, Studio8, Studio9 für Studiobilder

dann geht das in der Lightbox sicher wieder durcheinander.

Wie habt ihr das denn gemacht wenn ihr viele Bilder zu verschiedenen Theman habt?

*******************************************

Das ist der Code von meiner HTML Galerie Seite (im Moment noch ganz ohne Formatierung via CSS, ich habs nur auf Funktionalität getestet):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Lightbox JS v2.0 | Test Seite</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
<a href="images/examples/testimage1.jpg" rel="lightbox[plants]" title="Nummer1."><img src="images/examples/mythumb1.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
<a href="images/examples/testimage2.jpg" rel="lightbox[plants]" title="Nummer2."><img src="images/examples/mythumb2.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
<a href="images/examples/testimage3.jpg" rel="lightbox[plants]" title="Nummer3."><img src="images/examples/mythumb3.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
<a href="images/examples/testimage4.jpg" rel="lightbox[plants]" title="Nummer4."><img src="images/examples/mythumb4.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
</body>
</html>




LG Christin

[Jenny]

Hallo!

Eigentlich sollte es der LightBox völlig egal sein, wie die Thumbs und die Bilder heißen, solange sie alle korrekt verlinkt sind.

Gib uns doch mal die URL, so dass man sich den Code anschauen kann! (Ah, den hast du ja schon ergänzt!)

[Jenny]

Also, ich habe das eben mal nachgebaut und bei mir funktioniert es auch mit sprechenden Dateinamen genau so wie es soll!

Die Bilder heißen bei mir Klaus.jpg, Sabine.jpg, ...
Die Thumbs heißen bei mir Klaus_th.jpg, Sabine_th.jpg, ...

[Spatzihasi]

Ich teste das nochmal und dann meld ich mich nochmal

LG Christin

[Spatzihasi]

Ich weiss jetzt woran es gelegen hat.

Es liegt daran das man immer unterschiedliche Dateinamen haben muss.

Auch zum Testen. Immer der gleiche führt zu Problemen.

Naja wenn mans erstmal gemacht hat dann weiss man es.

Vielen Dank an dich fürs Testen :)

[Jenny]

Es liegt daran das man immer unterschiedliche Dateinamen haben muss.
Hä? :bahnhof:

[Spatzihasi]

Ich hatte mich doch nur verschrieben... Ich meinte immer die gleichen Testbilder mit dem gleichen Dateinamen....

z.b. heisst das Bild immer Testbild.jpg ... Das funktioniert nicht... Denn dann fängt es immer beim letzten Bild an