Hallo,
ich habe auf einer Seite 20 Thumbnails, die beim Anklicken
ein großes Bild öffnen.
Nun möchte ich mit einem Vor- und Zurück Pfeil diese Thumbnails
austauschen (blättern) um weitere 20 Thumbnails anzuzeigen. Das klappt auch mit folgendem Script:
var name=new Array(„bild1.png“,„bild2.png“,„bild3.png“…);
var picture=new Array();
function load()
{
var i;
for (i=0; i
Hallo Thomas,
klar … geht.
Hängt auch davon ab, wie Du das ganze aufgebaut hast.
Stehen die Thumbnails wirklich in a-tags ?
Über document.getElementsByTagName(‚a‘)[X].href kommst Du an jeden Link-Eintrag und kannst diesen ändern.
Kannst aber auch das ganze komplett neu ins innerHTML des containers schreiben.
20 Thumbnails, die beim Anklicken ein großes Bild öffnen.
oder hast Du die Thumbnails mit einem onclick ausgestattet und das „große“ Bild wird mittels src-Anweisung angezeigt?
mfg
Klaus
Hallo Klaus,
danke für deine schnelle Antwort! Ich rufe die Fotos folgendermaßen auf (Thumbnails liegen alle in einer Tabelle):
Wie du siehst hab ich noch eine Art Lightbox gekoppelt, d.h. ich muss da sogar mehrere Links tauschen. Deshalb würde mich deine Idee mit dem InnerHTML interessieren. Rufe ich da in der aktuellen HTML Seite einfach fertige Unterseiten auf? Gibt es da ein Beispiel?
Danke im Voraus,
Thomas
Hallo Thomas,
nein … innerHTML hat nichts mit „Unterseiten“ zu tun.
Es wird einem Element ein Inhalt zugewiesen.
Beispielsweise die Tabelle hat id=„vorschau“.
**document.getElementById(‚vorschau‘).innerHTML="…"
schreibt dann die neuen Zeilen.
In Schleifen kannst Du natürlich auch += verwenden.
Wieviele von den Thumbnails sollen denn immer angezeigt werden?
Denke auch, dass die nicht unbedingt vorher in ein img-object geladen werden brauchen.
Sowas in Richtung „Unterseiten“ wäre es, wenn Du die komplette Tabelle in ein Div packst, dessen overflow auf hidden steht. Dann kannst Du mittels javascript durch die Zeilen scrollen.
mfg
Klaus**
Hallo Klaus,
ich habe 60 Fotos und will immer nur 20 zur Auswahl anzeigen, ein Pfeil vor und zurück soll jeweils durch 3 Seiten (3x20 Fotos) blättern
und am besten ohne das jedesmal die Seite neu geladen wird…
Was empfiehlst du da?!
MfG
Hallo Thomas,
ich würde wahrscheinlich die Tabelle von JS schreiben lassen, weil
die filenamen sich nur durch das „s“ unterscheiden, also je Bild nur ein Listeneintrag gebraucht wird
sich das sozusagen 60 x wiederholt 
)
Ob das jetzt 3 x 20 oder 1 x 60 ist eigentlich egal.
Kollidiert das auch nicht mit dem cloud-zoom?
Vielleicht kann dieser script nur auf statisches HTML zugreifen. Kenne das nicht.
mfg
Klaus
Hallo Klaus,
das macht Sinn, denn es werden vllt. noch mehr Fotos dazukommen die genauso vom Dateinamen her aufgebaut sind.
Mit „cloud-zoom“ sollte es klappen, hauptsache ich rufe die Funktion im href des Bildes auf…
Wo kann ich mal so ein Beispiel finden bzgl. deines Vorschlages?
Ich baue meine Tabellen ja momentan nur mit HTML
Danke im Voraus
Thomas
Hallo Thomas,
nun … ich würde auf die Tabelle verzichten.
Du gibst den td’s Breite und Höhe, dass kannst Du sinnvoller mit css für die Thumbnails machen. Durch die Breite des containers ergibt sich dann, wieviele Thumbs nebeneinander plaziert werden, bevor ein automatischer Umbruch erfolgt.
Und zur Anschauung ins value einer textarea geschrieben:
Bilder
#vorschau {width:1000px;height:800px}
var Namen=new Array();
for (var i=0; i<59; i++){ Namen[i]=„bild_“ + i; }
function schreib (von, anzahl){
var elem=document.getElementById(‚vorschau‘);
elem.value="";
for (var i= von; i < anzahl + von; i++){
elem.value += ‚<a class=„cloud-zoom-gallery“ rel="useZoom: ’ +
„‚zoom1‘, smallImage: 'images/“ +
Namen[i] + "-s.jpg‘ " +
‚title=„Bild“ href="images/‘ +
Namen[i] + ‚.jpg"><img src="images/‘ +
Namen[i] + ‚.png" alt="BildNr.‘ + i + ‚" /></a>‘ + „\n\n“
}
}
window.onload=function(){
schreib(0,20)
}
mfg
Klaus
Hallo Klaus,
erstmal ein riesen Dankeschön!!! Du hast dir ja richtig viel Arbeit gemacht!!! Ich habe das Script jetzt mal eingebunden und in der Textarea sehe ich jetzt 20 Bilder Tag’s mit der korrekten Syntax
Wie kann ich jetzt die Bilder grafisch in meiner Seite anzeigen, hab
es mit einem iframe probiert bzw. einem DIV Container, aber es klappt nicht 
Hoffe ich nerve nicht zu sehr?!
Tausend Dank!
Hallo Thomas,
anstatt
nimmst Du
und anstatt
elem.value
nimmst Du
elem.innerHTML
Das Array mit den Bildnamen hatte ich per Schleife gefüllt.
Wenn Deine Dateinamen auch einen fortlaufenden, numerischen Wert haben, könntest Du das auch per Schleife machen … ansonsten per Hand ins Array eintragen.
mfg
Klaus
Hallo Klaus,
hat super geklappt! Habe zwar die Dateinamen ins Array schreiben müssen, da die Bildnamen bestimmte Nr. enthalten die ein durchnummerieren verhindern, aber so ist es perfekt
Ohne dich hätte ich das nie geschafft!!!
Wenn ich mal helfen kann, dann schreib mich einfach an…hab auf vielen Gebieten (außer JS) schon Erfahrungen gemacht und vllt. kann ich mich ja so ein wenig revangieren
Nochmals Danke!!!
Hallo Thomas,
da es klappt … hast Du wohl den „Schreib-Fehler“ mit dem fehlenden Quote gefunden )
Wie „verwaltest“ Du den Bilderwechsel?
Und klappt es auch mit der cloud-gallery?
mfg
Klaus
Hallo Klaus,
ja, hab die Stelle gefunden, habe sogar noch folgenden Tag modifiziert um den Bildnamen, genauer gesagt nur die Nummer anzuzeigen:
alt="Modell Nr. ’ + Namen[i].slice(7, 11) …
und es klappt sogar 
Den Bilderwechsel verwalte ich im Moment nur über einmal vor und einmal zurück, überlege mir aber
noch was wie ich z.B. bei zweimal Vorwärts machen kann um alle Fotos anzuzeigen:
[Zurück …
](javascript:zeige(0,16);)[Vorwärts …
Tja, und wie du vermutet hast, hat die cloud-zoom-gallery ein Problem mit innerHTML, wenn ich die Bilder öffne, werden sie halt nur im neuen Fenster angezeigt…
Aber ohne innerHTML geht es ja nicht
Ich hab ne Internetseite gefunden wo jemand das Problem beschreibt aber ich hab keinen Plan wie ich sein JS auf meins anwenden kann…
http://www.expertsexchange.com/Programming/Languages/Scripting/JavaScript/Q_26541865.html
Aber das will ich Dir nich auch noch überbügeln, dass muss ich allein irgendwie hinbekommen. Du hast mir schon riesig geholfen!
Beste Grüße, Thomas](javascript:zeige(16,32)
Hallo Thomas,
ich würde die Steuerung über eine function machen, die mit „onclick“ aufgerufen wird.
Entsprechende Variablen globalisieren, verändern, prüfen und damit die Schreib-Funktion aufrufen.
So z.B.:
-----------------------------------------------------------
var Namen=new Array(’…’);
var aktuell=0; var max=Namen.length; var anzeigen=20;
function wechsel(){
schreib( aktuell, anzeigen)
aktuell += anzeigen;
if (aktuell >= max){aktuell=0}
}
-----------------------------------------------------------
Habe mir Cloud Zoom V1.0.2 mal angeschaut.
Da wird wohl im jquery.ready, also window.onload, „initialisiert“ - steht gleich unterm ©
$(document).ready(function () {
$(’.cloud-zoom, .cloud-zoom-gallery’).CloudZoom();
});
Denke mir, wenn Du das:
$(’.cloud-zoom, .cloud-zoom-gallery’).CloudZoom();
an das Ende der Schreibfunktion einbaust, werden die „neuen“ a-tags initialisiert und es müsste funktionieren.
mfg
Klaus
Hallo Klaus,
erstmal wieder vielen Dank für deine Bemühungen, ich schicke dir mal per PN die Seite, damit du mal siehst was wir da gebastelt haben
Die „cloud-zoom-gallery“ funktioniert allerdings nur beim ersten Foto (mit der Maus über das große Foto gehen…), kann den String nicht einbinden
Beste Grüße, Thomas
Hallo Thomas,
jou … ist angekommen und auch schon wieder zurückgeschickt
mfg
Klaus
Hallo Klaus,
die Prototype.js ist bereits im Head Template eingebunden und ich müßte dann ein neues Template erstellen.
Ich muss das jquery.noConflict rein machen sonst bekomme
ich den „$“ Fehler, allerdings klappt dann meine zoom-gallery im IE
nicht mehr Ein Teufelskreis!!!
Kann man die Prototype nachträglich entladen oder so???
Danke, Thomas