Schönes klick-to-open-Design ohne komplettes Fotoalbum?

[Portraitmalerin]

Hallo nochmal,

In meinem vorher erstellten Thema würde ich mich unverändert wahnsinnig über eine Lösungshilfe freuen. Aber ich versuchs jetzt mal parallel auf anderem Weg...

Ich verwende auf meiner Website Lanis Tierportraits folgenden HTML-Code des öfteren zum anklicken und vergrößern des Thumbnails:

<a onClick="window.open
('http://...page.de/files/großesbild.jpg','MyWindow','toolbar=no, location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,left=125,top=100');return false;" href="#"><img alt="" border="0" src='http://...page.de/files/thumbnail.jpg' /></a>

Besonders elegant find ichs nicht, darum würde mich echt interessieren, ob man (also nicht ich, dazu kenn ich mich als Laie viel zu wenig aus mit den ganzen "location", "toolbar"s... usw.) einen solchen oder einen ähnlichen Code derartig umformen kann, dass daraus ein ausgefeilter und harmonischer Öffnungsvorgang/ Präsentation wird, ähnlich wie bei meiner Kollegin (hier: Zeichnungen)?

Oder muss so ein schönes Design grundsätzlich aus hochkomplexen Javas mit diversen Anhängsel-zum-hochladen-Dateien bestehen, damit es funktioniert?

Mein Ziel wäre einfach, so wie es bisher auch so mim aufmachen meiner Bilder klappt, einzelne Bilder - mit einem HTML-Code versehen - jedes für sich hochzuladen und zu positionieren, wie ich es will. Eine große Verknüpfungsgeschichte mit vor, zurück, zoom etc. wie bei den fertigen Alben brauch ich eigentlich gar nicht... abgesehen davon, dass ich es nicht auf die Reihe bekomme... :|
Einzelne HTML-Codes, wie den oben aufgezeigten, bekomme ich noch gebacken und in meine Website eingebaut, weil mein Anbieter mir da praktisch alles schon vorgefertigt hat... sobalds aber an ganze Alben und deren Einbindung geht, steh ich vor einem großen Loch (siehe mein erstes Thema)... drum wär mir dieser Weg am liebsten...

Wär toll, wenn mir jemand Auskunft darüber geben könnte!
Vielen Dank schon im Voraus!
Nalani

 

[sysop]

Solch ein Code muss aus "hoch komplexen" Java-Scripts/Ajax/java bestehen, die Möglichkeiten sind bei HTML nun mal beschränkt. HTML bietet dir nur eingeschränkte Funktionen an, am Vorgang des öffnens ist auch mit viel CSS nicht viel bis Nichts zu machen.
Der Vorteil deiner Variante ist aber, dass sie auch funktioniert, wenn Java-Script abgeschalten ist und sie funktioniert in allen Browsern, auch in den ganz alten.

Der Trick ist glaube ich, dass du einen ausgewogenen Mittelweg findest die "hässlichen" HTML-Möglichkeiten mit Funktionalität so zu verbinden, dass es niemanden stört. In deinem Code ist übrigens schon Java-Script enthalten und er funktioniert bei komplettem Abschalten von JS auch nicht mehr.

Ich löse das auch mit einem window.open (also mit minimalem JS=Java-Script) versuche aber durch eine Grössenanpassung des Fensters an das Bild etwas Kosmetik ins System zu bringen.
mn-portal, PHP-Scripte die es in sich haben.. (Screenshots)

Klick auf snapshots und dann auf Diashow. Wenn sowas reicht, brauchst du nur noch PHP-Unterstützung, Scripts gibt es zu Hauf oder ich gebe dir auch meines.

Wenn du mehr willst, musst du eine der Java-Script Gallerieen verwenden. Der Einbau sollte sich aber auch nicht schwerer gestalten.

 

[Portraitmalerin]

aso ok... hm.
DOCH, leider ergeben sich bei mir grad größere Probleme beim Einpassen der Lightbox... :(
Irgendwo steckt noch der Wurm drin, aber leider find ich ihn ned... *grmpf*
--> http://www.html.de/css/34844-bitte-um-hilfe-alternatives-fotoalbum-gesucht.html

Aber vielen Dank für den Tip! Das stimmt, das ist echt ein schöner Kompromiss, gefällt mir gut! Ich werd drauf zurück kommen, wenn ich das mit der blöden... schönen Lightbox wirklich nicht mehr hinbekommen sollte... vielleicht könntest du mir auch noch nen Tip geben? Siehe Link oben...

Vielen Dank erst mal!
Liebe Grüße,
Lani

 

[Portraitmalerin]

... ich hab hier grad noch einen Code für einen schönes mouse-over-Design gefunden:

<p><style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ */.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail span{ /*CSS for enlarged image*/position: absolute;background-color: lightyellow;padding: 5px;left: -1000px;border: 1px white;visibility: hidden;color: black;text-decoration: none;}

.thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/visibility: visible;
top: 0;left: 60px; /*position where enlarged image should offset horizontally */}</style>
<a href="#thumb" class="thumbnail"><img height="145" width="200" border="0" src="URL Thumbnail" alt="" /><span><img src="URL Image" alt="" /><br />Titel </span></a>

Den hab ich auch schon eingebaut. Allerdings würd ich gerne auch noch die maximale Bildgröße Image festlegen, da meine hochgeladenen Bilder zu groß für eine schöne sofort-Ansicht sind. Kann man die Fenstergröße(Image) festlegen, so dass alle Bilder in der selben FENSTERgröße dargestellt werden, aber eben nicht verzerrt? Also Hochformat bleibt Hochformat etc. ?
Am liebsten wäre mir, wenn man das Bild dann noch anklicken könnte, um es in voller (Über-)Größe zu sehen.
Vielleicht kann mir da jemand helfen?

Momentan siehts so aus: http://www.lanis-tierportraits.de --> kleinen grauen Mini-Punkt unterm Banner anklicken...

Zweites Vorhaben wär noch, dass das Bild nicht unter dem Thumb, sondern direkt daneben über den anderen Thumbs bzw. direkt über dem betreffenden Thumb angezeigt wird...?

Wär spitze, wenn mir da jemand helfen könnte! Vielen Herzlichen Dank!
glg, Lani