So: "CSS animation" und damit findet man bei Google z. b. diese Seite:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ation/Animation
Du musst die Grafik und den Text in einen div-Container legen, diesen absolut positionieren und die Eigenschaft left animieren. Sieht dann z. B. so aus:
https://jsfiddle.net/463b17go/3/
"Könnte man dies auch mit einem Video animieren und dann einfach einfügen?" Wäre u. U. möglich, aber es wäre viel zu kompliziert, das Video zu erzeugen und in die Seite einzupassen. Ich empfehle, es mit CSS animation zu machen, damit ist es ganz einfach. Mache dich damit vertraut.
Bitte keinen neuen Thread. Ich habe dir in deinem alten geantwortet.
Ich habe mir bisher dein Problem nicht näher angesehen, weil ich nicht verstanden habe, was Du vorhast und was dein Problem dabei ist. Kannst Du das vielleicht etwas besser erklären? Was meinst Du hiermit? " Ich möchte aber den Link drücken und dann den Ordner damit aufrufen." Ist "Ordner" ein Verzeichnis auf deinem Server in dem die Bilder liegen und möchtest Du die anzeigen?
Habt ihr das Skript von der Beispielseite verwendet? Um herausfinden zu können, warum es bei euch nicht funktioniert, müsste man euren Code sehen.
Hm, auch nach Hochladen einiger Bilder verstehe ich das Ganze nicht. Sie werden sofort angezeigt, aber das Hochladen macht doch nur Sinn, wenn man sie später immer wieder aufrufen und anschauen kann?
Nein, deinen Link hatte ich mir nicht angesehen. Auf den ersten Blick verstehe ich nicht genau, was diese Seite macht.
Auf jeden Fall: Wenn Du Bilder hochlädst und Beschreibungen dazu anlegst, macht das nur Sinn, wenn das auch von einem Galerieskript zur Anzeige gebracht wird. Die zwei Galerien, die ich genannt habe, habe ich früher selbst benutzt und es ist auf keinen Fall so, dass man dafür sehr viele Dateien anpassen muss. Bei Coppermine gibt es einen Installer, der alles erledigt und der bei mir problemlos funktioniert hat. Bei TWG weiß ich es nicht mehr genau, aber auf jeden Fall war die Installation leicht und ebenfalls ohne Anpassung vieler Dateien möglich.
"sondern es sollen unendlich viele Bilder hochgeladen werden können." Ich glaube, Du hast mich falsch verstanden: Ich meine keine Galerie, die man von Hand anlegt und wo man den HTML-Text für jedes Bild selber schreiben muss, sondern die Galerien, die ich angegeben habe, sind PHP-Skripte, die es ermöglichen, beliebig viele Bilder hochzuladen und die das HTML, CSS und ggf. Javascript für die Anzeige automatisch generieren. Coppermine und Tinywebgallery ermöglichen, Beschreibungen anzulegen, so wie Du es haben möchtest.
Ein kleines Script kenne ich leider nicht, aber es gibt eine ganze Reihe von vorgefertigten Galeriescripts, wo sicher auch eines dabei ist, das Beschreibungen ermöglicht:
Gallery wollte ich erst schreiben, aber ein Blick auf die Homepage zeigt, dass sie eingestellt wurde.
Coppermine, 4images und TinyWebGallery fallen mir noch ein.
Zitat von Coppermine: "caption, title, description and user defined fields for each picture (searchable);" - das müsste das sein, was Du dir vorstellst.
Sehr gut, genau das wollte ich auch gerade vorschlagen. Ich bin weder ein Freund von diesem noch von eval aber mir kommt es so vor, dass in dem Fall kein Weg daran vorbei geht, das eine oder das andere zu verwenden, weil man den Funktionsnamen dynamisch aufbauen muss.
Wie ich schon schrieb: Mit eval kann man Variablen- und Funktionsnamen dynamisch anlegen. Müsste dann so aussehen:
st_list[i].addEventListener('mouseout', eval('function listener' + i + '() {r_on_out(' + i + ')}'), false);
Ich denke mal darüber nach, ob es noch eine bessere Lösung gibt.
Ach so, ich hatte dies übersehen:
window['func_mouseout'+i] = r_on_out(i);
Was hier passiert, ist folgendes: Da der Funktionsname r_on_out von einem Klammernpaar gefolgt wird, wird nicht diese Funktion zugewiesen sondern r_on_out wird ausgeführt mit i als Parameter und der Rückgabewert wird zugewiesen. D. h. ganz etwas anderes als das, was Du möchtest.
Wie definierst Du denn
window['func_mouseout'+id]?
[size=10]Möglicher Weise kommt man hier nicht daran vorbei, das ungeliebte eval einzusetzen, um Funktionen der Form myListener1, myListener2 zu erzeugen.
Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife registriert und dabei den Schleifenindex verwendet. Was passiert, ist folgendes: Der Code in der anonymen Funktion wird ja nicht beim Registrieren ausgeführt, sondern erst, wenn das Ereignis, in diesem Fall das Mouseout, eintritt. Dann ist die Schleife längst durchgelaufen und der Index hat seinen Endwert von 13. Lösung ist folgende:
st_list[i].addEventListener('mouseout', function(idx) {return function() {r_on_out(idx)};}(i), false);
In diesem Fall wird die äußere Funktion sofort aufgerufen, weil auf die Definition ein Klammernpaar folgt. Innerhalb der äußeren Funktion hat der Parameter idx den aktuellen Wert, der in der inneren Funktion verwendet wird. Die äußere Funktion gibt die innere als Returnwert zurück und die innere wird als Listener registriert.
"kann auch diese per automatischem scrollen über die Links perfekt erreichen." Meinst Du damit, dass die Seite langsam zu der betr. Stelle scrollt? Dann hast Du doch sicher noch Javascript, das das veranlasst? Am besten postest Du mal die URL der Seite.
Gängige Ursache für solche Probleme: Groß- und Kleinschreibung. Wenn Du unter Windows arbeitest ist es egal, aber dein Webserver unterscheidet Groß- und Kleinschreibung: bild.jpg ist etwas anderes als Bild.jpg, oder bild.jpg vs. bild.JPG.
Das liegt an diesen beiden CSS-Anweisungen, die auf beide Bilder wirken:
.td5 img { height: 80px!important;}
img { height: auto; max-width: 100%; vertical-align: middle;}
Das max-width bei dem zweiten, beides in style.css definiert. Hast Du Zugriff auf diese Datei? Ich würde empfehlen, beide Bilder gezielt anzusprechen und die Breite und die Höhe zu setzen:
.imgtip > img { height: 80px!important;}
.imgtip > span > img { max-width: none;}Selbstverständlich ist das möglich: Gib der Tabelle, die abweichend formatiert werden soll, eine ID:
<table id="special">Darauf beziehst Du dich dann im CSS:
table#special { border-collapse: separate; border-spacing: 0.2em; margin-left: 2em; box-shadow: 0 0 0.1em #666; position: relative; z-index: 1; cursor: context-menu;}table#special th,table#special td { padding: 0.2em 0.5em; border-radius: 0.1em;}table#special thead th { background-image: linear-gradient(to top, red 10%, blue ); color: white; }usw.
Hast Du das Problem inzwischen gelöst? Auf meinem Handy (Android, Samsung Ace3) funktioniert es nämlich einwandfrei, sowohl im Standardbrowser als auch im Opera.
Natürlich geht das. Du brauchst nur dieses wegzulassen:
if (selIndexes.length > 0) selIndexes += ", ";
selIndexes += optionTag.text + " ";[/code]