HTML und CSS Webseite muss es werden!

Und für diesen Zweck außerdem JavaScript.
Google einfach mal nach dem Stichwort Lightbox

Danke für die Super Antwort. Allein das Wort "Lightbox" hat mich ziemlich voran gebracht.

Ich werde mal schauen was ich da finden kann und wie man
das integriert in eine Webseite.

Zitat:
HTML und CSS Webseite muss es werden!


Meinst du damit dass ich beides Verwernden MUSS ?

Gruss

was sonst?

Schau Dir mal die Galerie von ShaLyMA an, wenn es so sein soll, schau Dir den Quelltext an. Kein kompliziertes java gefummel, einfach nur wenige Zeilen die auch schnell gepflegt werden können. Falls Du da nicht durchsteigst, helf ich gern weiter.

Ralf

also das mit dem Lightbox habe ich eigentlich vor einzusetzen
wenn es nicht so kompliziert ist und es mit HTML/CSS möglich ist.

Aber würde mich auch interessieren wie das geht was du
da vorgeschlagen hast Ralf, würde mich freuden wenn du mir da hilfst...

danke...

Dafür brauchst Du nur wenige kleine Zeilen:

<img src="pfad_zum_bild_klein/bildklein1.jpg" alt="kleines Bild" onclick="document.getElementById('leinwand').src='pfad_zum_bild_gross/bilgross1.jpg'">
<img src="pfad_zum_bild_klein/bildklein1.jpg" alt="kleines Bild" onclick="document.getElementById('leinwand').src='pfad_zum_bild_gross/bilgross1.jpg'">
<img src="pfad_zum_bild...
<br /><br />
<img src="pfad_zum_ersten_bild/startbild.jpg" id="leinwand" alt="Bildershow">

Noch einfacher gehts (meiner nicht representativen meinung nach) nun wirklich nicht.

Ralf

@Ralfman:
was hat die Lightbox mit Java zu tun? Genau: Nichts! Also gibts da auch kein kompliziertes Java-gefummel!

Meinst du wirklich, dass Inline-Code gegenüber der klaren Struktur des Lightbox-Pakets Vorteile für einen Webseitenanfänger (ohne ernsthafte HTML-, CSS- und JavaScript-Kenntnisse) bringt?

@gast42,
nun werd mal Bitte nicht zum Korintenkacker :-)
Selbstverständlich kenne auch ich den Unterschied zwischen Java und Javascript.
Letzendlich war es auch nur ein Vorschlag von mir, und ich habe auch nur auf eine Anfrage vom Fragesteller Reagiert.
Aber wenn Du meinst das Lightbox einfacher zu Handhaben ist, warum hilfst Du dann nicht mit einem Codeschnipsel?
Ach so, hatte ich übersehen, danach wurdest Du nicht gefragt.
Dennoch finde ich es von Dir Unfair mich seitlich anzublaffen obwohl ich nichts weiter getan hab als auf angeforderte Hilfe zu Reagieren.
Nächstesmal also Bitte etwas mehr Feinfüligkeit.

@Stefan21,
selbstverständlich ist Lightbox wirklich hübsch anzusehen, mir Persönlich war das aus allerdings nicht Primitiv genug um das mal schnell zu ändern/erweitern.

Ralf

Ralfmans "Lösung" hat mehrere, aber mindestens einen entscheidenden Nachteil: bei deaktiviertem JavaScript wird mir nie ein Großbild angezeigt. Ich dürfte mich also wiedermal um die Analyse des Quelltextes der Seite bemühen. Andere kleinere Nachteile sind u.a., dass für jedes Bild explizit ein onClick-Attribut angegeben ist (das geht auch universaler) und dass im OnClick-Handler selbst die Anweisung immer zu ~95% ähnlich ist (auch hier bietet sich ein Standard zwischen Vorschaubild- und Großbildname an, sodass man allein vom Wert des src-Attributs auf den Namen des Großbildes schließen kann und sich redundanten Code spart).

Die Lightboxen haben zumindest den Vorteil, dass sie auch ohne JavaScript einfach das Großbild anzeigen.

Lightboxen an sich sind mir aber zuwider, da sie für jedes Großbild wieder unbedingt ihre tolle Animation einer sich vergrößernden Box und des dunkler werdenden Hintergrunds abspielen müssen. Das nervt (mich) unheimlich schnell.

@son_quatsch,
die Geschichte ist nicht mein Fachgebiet, aber wenn Du sagst das es zu Optimieren ist, helf mir doch mal Bitte und verrat mir wie. Eventuell kann ich das ja mal Optimiert nutzen. Kleine Codeschnipsel helfen (mir) da ungemein weiter.

Ralf

@Ralfman: gerne.

Speicher einfach folgende Dateien unter jeweiligem Namen ab - das Beispiel funktioniert vollständig (da vorhandene Google-Bilder verwendet werden). Erfolgreich getestet in OPER, FFOX und MSIE.

gallery.html

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en"><head>
	<title>Statistik</title>
	<script type="text/javascript" src="gallery.js"></script>
</head><body>
	<pre>Grundsätzliche Struktur soll sein:
		&lt;a href="bild_gross001.jpg">&lt;img src="bild001_klein.jpg" alt="Das erste Bild" />&lt;/a>
		&lt;a href="bild_gross002.jpg">&lt;img src="bild002_klein.jpg" alt="Bild Nummer zwei" />&lt;/a>
		&lt;a href="bild_gross003.jpg">&lt;img src="bild003_klein.jpg" alt="Drittes Bild" />&lt;/a>
	</pre>

	<a href="https://www.google.com/local/add/resources/lbc_overview_de.gif"><img src="http://www.google.de/services/images/local.gif" alt="Das erste Bild" /></a>
	<a href="https://services.google.com/images/websiteoptimizer/howitworks1.gif"><img src="http://www.google.de/services/images/small/websiteoptimizer.gif" alt="Bild Nummer zwei" /></a>
	<a href="https://books.google.com/partner/images/icon4.gif"><img src="http://www.google.de/services/images/print.gif" alt="Drittes Bild" /></a>

	<div><img id="grossbild" src="." alt="" /></div>
</body></html>  

gallery.js

// Event-Handler hinzufügen statt überschreiben
function addEvent( o, ev, f ) {
	if ( o.addEventListener ) {
		o.addEventListener( ev, f, false );
		return true;
	} else if ( o.attachEvent ) {
		var r= o.attachEvent( 'on'+ ev, f );
		return r;
	} else return false;  // MSIE kennt nur überschreiben :(
}

// id des IMG, dessen .src später das Großbild darstellen soll
var aim= 'grossbild';

// für jedes A HREF mit IMG innendrin onClick-Handler zuweisen;
// ohne JS wird einfach HREF ausgeführt :)
function addOnClick() {
	aim= document.getElementById( aim );  // Element vom Namen bekommen
	var e= document.getElementsByTagName( 'a' );  // alle Links
	for ( var i= 0; i< e.length; i++ ) {
		// enthält Link HREF? ist unter ihm ein IMG? nur dann...
		if ( e[i].href&& e[i].firstChild&& e[i].firstChild.tagName== 'IMG' ) {
			e[i].onclick= ( function( e ) {  // Zuweisung einer Funktion samt Parameter
				return function() {  // eigentlicher Handler für jedes Bild
					aim.src= e.href;
					return false;
				}
			} )( e[i] );
		}
	}
}

addEvent( window, 'load', addOnClick );  // wenn Seite geladen, Handler zufügen  

@son_quatsch,
danke für den Code, nun versteh ich aber nicht wo bei Deiner Version der großartige vorteil sein soll.
Ich habe eine Zeile in der beide (groß und klein) bilder angegeben werden, und ich habe eine zweite Zeile in der das Bild dargestellt wird.
Bei Deinem Beispiel hab ich eine Zeile in der beide Bilder angegeben werden, eine Zeile wo das Bild angezeigt werden soll, und einen ganzen Block mit mehreren Zeilen um das Bild darzustellen.

Das Argument mit dem Abgeschalteten Javascript lasse ich nicht gelten, da ohne ein Vernünftiges Navigieren im Internet nicht möglich ist (OK, schimpf ruhig, und es gibt auch ausnahmen, aber auf die 3% kann auch Verzichtet werden). Du Verwendest allerdings auch javascript oder verwechsel ich da mal wieder was? Hier ist also noch Aufklärungsarbeit Deinerseits gefragt (wo ist das Optimiert).

@halfstone
wenn Du Dir die drei Zeilen oben mal angeschaut hast, solltest Du eigentlich auch erkannt haben das ein Positionieren des Großbildes oben, unten, oder mittendrinn kein Problem darstellen sollte (hab aber aus Faulheit nicht in Deinen Link geschaut).

@all,
rechnet noch jemand mit Reaktion von Stefan21?

Ralf

allerdings hat die Tooltipp-Variante den Nachteil, dass ohne JavaScript nichts läuft.

@ralfman: bitte überprüfe mal deinen Sprachgebrauch, so disqualifizierst du erstens dich und zweitens dies Forum

@Ralfman
Dass in einer Zeile doch beide Bilder angegeben sind hat wie gesagt den Vorteil, dass bei abgeschaltetem JavaScript immernoch große Bilder angezeigt werden (nur halt als neues Ziel, statt dynamisch in der aktuellen Seite). Genau davon hab ich doch geredet - schalt JS aus und sie, wie wunderbar das auch ohne läuft.

Übrigens sind 3% von 100 Leuten vielleicht wenig, aber bei 10000 Besuchern (pro Tag) sehen die 3% schon ganz anders aus. Das ist auch eine Frage davon, ob man grundsätzlich an jedem Besucher der Website interessiert ist oder bewusst einige vergraulen will. Als nächstes kommst du mir vielleicht noch mit dem Argument "MSIE-Nutzer sollten sich eh erstmal einen gescheiten Browser holen"...

Genausogut könnte ich auch ein Beispiel bringen, welches ohne JS nicht mehr funktioniert und in welchem man nur noch das Kleinbild in HTML angeben muss. Aber das spar ich mir - bevor ich hier wieder Perlen vor Langeweile werfe...

@halfstone+Ralfman
In meinem Fall wird anfangs ohne Großbild ebenfalls kein Platz verschwendet. Bei wz_tooltip.js gibt es auch den Nachteil, dass bei zu kleinem Browserfenster und/oder zu großen Tooltip letzterer über den rechten Rand hinausgeht und verschwindet. Auch hier müsste man noch nachbessern und je nachdem den Tooltip versetzt anzeigen.


Aber ich sehe schon den Atavismus: eine hübsche Anzeige solls sein - Funktionalität und Komfort sind vernachlässigbar. Hauptsache der Webmaster ist glücklich :D

Ich habe meine Bildergalerien eine Zeitlang mit JoJoThumb erstellt. Sehr einfach und flexibel in der Handhabung und Code ohne JavaScript. Für Freeware wirklich ein tolles Programm.

Gruß Flupo

@son_quatsch:
wozu addeventlistener?

@gast42:
"addEventListener" ist für DOM-kompatible Browser, wie OPER oder FFOX.
Oder wolltest du eigentlich etwas anderes wissen?

ja: wozu brauchst du diese komplizierte Methode?

Um einen Event-Handler einem Element hinzuzufügen, statt möglicherweise bereits vorhandene zu ersetzen.

ach so, das geht Browser-übergreifend einfacher. Angenommen ich möchte zugefuegte_funktion() in window.onload einhängen:

var altes_win_onload=null;
if (typeof(window.onload)=="function") altes_win_onload=window.onload;
window.onload=function() {
 if (altes_win_onload) altes_win_onload();
 zugefuegte_funktion():
}