Wenn ich auf Bild drücke soll das Bild groß werden (Ansicht)

Question

Wenn ich auf Bild drücke soll das Bild groß werden (Ansicht)

24 Antworten

Seite:

Answer 1 · 2009-11-19T11:05:27+0000

@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:
<a href="bild_gross001.jpg"><img src="bild001_klein.jpg" alt="Das erste Bild" /></a>
<a href="bild_gross002.jpg"><img src="bild002_klein.jpg" alt="Bild Nummer zwei" /></a>
<a href="bild_gross003.jpg"><img src="bild003_klein.jpg" alt="Drittes Bild" /></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

Answer 2 · 2009-11-19T11:33:05+0000

Hi,

wenn man das große Bild neben dem Kleinen anzeigen lassen will, kann man das mit diesem JavaScript machen:

http://www.walterzorn.de/tooltip/tooltip.htm

Hier kann man in den erscheinenden Tooltip dann auch Bilder, html ... einbauen. Sieht ganz gut aus finde ich.

Gruß Fabian

Answer 3 · 2009-11-19T14:47:09+0000

@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

gast42 · Answer 4 · 2009-11-19T14:48:58+0000

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

Answer 5 · 2009-11-19T15:20:16+0000

Hi Ralfman,

du hast Recht, deinen Code hab ich mir nicht angeschaut da du ja ein Beispiel von ShaLyMAs Galerie gebracht hast und man da eben Platz für ein Bild in groß braucht. Mein Beispiel macht das mit einem Layer in etwa so wie bei www.fotolia.de wenn man sich da mal Bilder gesucht hat und dann auf die Thumbnails geht gehen die Bilder in groß auf ohne zu klicken.

Ich finde das einfach besser da man sonst irgendwo Platz für das große Bild reservieren muss in dem erst mal nichts ist wenn man nicht die entsprechende Aktion ausgeführt hat egal ob man den jetzt oben unten rechts oder links reserviert.

Das ist nicht ganz so schlimm wie die vielen CSS Varianten, die es gibt, die machen aus einem kleinen Bild ein Großes indem sie den dafür benötigten Platz durch Auseinanderschieben der anderen Bilder erzeugen, aber mir gefällt das Tooltip Beispiel am besten.

Wir wissen ja leider immer noch nicht was der Fragesteller für eine Variante gerne hätte.

Das mit dem Java Script sehe ich ähnlich, das sind selbst auf so technikaffinen Seiten wie dem SN nur 1-2 % die das abschalten, man kann heutzutage ohne einfach nicht im Internet unterwegs sein.

Gruß Fabian

Answer 6 · 2009-11-20T06:35:52+0000

@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

Answer 7 · 2009-11-20T06:55:57+0000

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

gast42 · Answer 8 · 2009-11-20T07:24:52+0000

Beantwortet 20, Nov 2009 von gast42

Answer 9 · 2009-11-20T07:57:50+0000

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

gast42 · Answer 10 · 2009-11-20T09:31:55+0000

ja: wozu brauchst du diese komplizierte Methode?

Wenn ich auf Bild drücke soll das Bild groß werden (Ansicht)

24 Antworten

Deine Antwort

Beliebteste Themen