✔ Bildergalerie in einer Zelle

mikkele

mikkele

Erfahrenes Mitglied
Hi zusammen,

ich weiß nicht, ob ich im richtigen Forum bin, aber die Suche hat ergeben, dass in diesem Forum die meisten Galerien besprochen werden. :)

Meine Website ist ohne Frames, nur mit Tabellen aufgebaut. Ich möchte jetzt eine Galerie machen, wo die thumbnails und das angezeigte Bild in einer Tabelle angezeigt wird.
Ich möchte verhindern, dass jedes Bild eine eigene HTML-Seite hat, kann man das mit Java machen?

Ich habe einiges über Galerien gefunden, aber dieses Problem wurde nicht behandelt.

Danke und schöne Grüße
Mikeele
 
Ja, man kann auch wenn Java und JavaScript zwei völlig verschiedene Sachen sind, aber du meinst JavaScript und bist hier richtig.

Wie auch immer. Im Grunde ist das folgender Code:
HTML: 
<script type="text/javascript"><!--
 	function showImg(imgURL, width, height) {
 		var d = open("", imgURL, "height="+height+", width="+width);
 		d.document.open();
 		with(d.document) {
 		    write('<html><head><title>' + imgURL + '</title></head>');
 		    write('<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">');
 			write('<img name="img1", src="' + imgURL + '" width="'+width+'" height="'+height+'" alt="ALT" />');
 			write('</body></html>');
 			}
 		d.document.close();
 	}
 //--></script>
Du müsstest dann nurnoch die links mit den Tumbnails entsprechend in die Tabellenzellen schreiben.
 
Zuletzt bearbeitet:
Hmm, irgendwie bekomm ich das nicht hin (du stellst mir nen Kuchen hin, und ich bin zu blöd, ihn zu essen :mad: )

Ich kopier den Code in die Tabelle rein und versuche den ganzen Nachmittag schon mit verschiedensten Variationen, die Galerie zu erstellen. Ich muss zugeben, dass ich den reinen Code nicht verstehe, ich bin mehr der WYSIWYG-Typ.

Ich habe bei imgURL die quelle angegeben: images/galerie
und bei img1 den Bildnamen: girl_1.jpg

aber irgendwie haut das nicht hin :(

Meine Zelle ist 575 x 234 px, es ist ein Bett und ein Klo drin :-) - ne Quatsch!
Also die Masse wie oben, und ich hätte gerne, dass Links das Bild in Groß dargestellt wird und rechts die Thumbnails sind.

So etwas würde mir auch gefallen, aber das ist wahrscheinl. zu kompliziert:
http://www.festo.com/INetDomino/coorp_sites/de/1a3a456137017dc6c1256ddb004a7bbf.htm

Kannst du mir als Laien den Unterschied noch zwischen Java und Javascript in 2 Sätzen erklären?

Vielen Dank
Mikeele
 
Hi,

kannst Du etwas genauer sagen, was Deine Site eigentlich leisten soll. Wenn ich Dich richtig verstehe, möchtest Du in einer Tabelle ein großes Feld haben und ein oder mehrere kleine. In den kleinen sollen Thumbnails sein und im großen ein großes Bild. Sind die Bilder denn alle gleich groß und vom gleichen Format, Hochformat oder Querformat oder ist es ein buntes Gemisch aus allem? Und was sollen die TN leisten, sollen die zur Steuerung dienen, d.h. Click auf ein TN und im großen Tabellenfeld erscheint das entsprechende große Bild oder sollen die was anderes oder gar nichts machen? Soll ein Verzeichnis ausgelesen werden oder willst Du eine bestimmte Auswahl an Bildern fest verdrahten? Und sollen die TN echte TNs sein oder nur eine kleine Darstellung der Originale? Soll eine Art Diashow automatisch ablaufen können? Soll, wenn Du auf das große Bild clickst auch noch was passieren? Ich beschäftige mich derzeit mit solchen Dingen und es könnte gut sein, dass ich da etwas für Dich habe. Du müsstest nur sagen, was Du suchst.

Schönen Gruß

Rudolf
 
Hmm, jetzt hast mich erwischt :-(

du hast mir gerade aufgezeigt, dass ich noch selber nicht ganz weiß, was ich will :rolleyes:

Die Bilder haben verschiedene Größen, Hoch- und Querformat, aber ich dachte, ich mache alle quadratisch, dann ist's optisch einheitlich.

Ich möchte einfach flexibel sein, dass wenn ich neue Bilder reinstelle, ich es einfach und unkompliziert machen kann. Schön wäre ein hovereffekt, dass das schwarz/weiße thumbnail farbig wird und beim klick die vergrößerte Darstellung angezeigt wird. Aber 2 Thumbnails und dann ein großes Bild machen ist mir für die Erweiterung wahrscheinlich dann doch zu aufwendig.

So wäre das Layout,
http://www.nu-art.at/new/galerie.html
(im großen weissen Balken in der Mitte wären dann rechts die TN und links das vergrößerte Bild)

ich würde dann 3 Rubriken machen (wie beim Punkt Grafik, wo dann Fotografie, Diverses und Cartoons zum auswählen wäre)

Es gibt mit ja auch mit Javascript eine Funktion, wo mann die TN mit einem Lupeneffekt vergrößern könnte, dann könnte ich die ganze Seite mit TN füllen, und wenn man mit der Mouse drüber fährt, würde das Bild vergrößert dargestellt. Das würde mir auch noch gefallen.

Es sollte halt noch cool aussehen und zum Layout passen, mit viel Schokolade, Spannung und was zum Spielen :D

Vielleicht hast du ja eine bessere Idee für meine Galerie? Was ganz neues?!
Ich bin jedenfalls offen dafür (Ich möchte einfach nicht, dass es amateurhaft aussieht).

So viel geschrieben, aber auch nicht wirklich weiter :confused:

An was bist du denn gerade dran, was du geschrieben hast?

Gruß
Michael
 
Hallo Michael,

so was ähnliches habe ich mal gebaut, mit quadratischen Formaten - das hat Vorteile - also so etwas in einer Tabelle, mit Thumbnails und einer großen Darstellung. Die große Darstellung läuft als zeitgesteuerte Diashow, entweder in der Reihenfolge oder nach Zufall Die Diashow ist natürlich auch abschaltbar, dann kann man durchblättern. In der quadratischen Form ist nur ein Bildausschnitt zu sehen. Wenn man auf die grosse Darstellung clickt, geht ein neues Fenster auf, wo dann das ganze Bild wahlweise entweder in Originalgröße oder in bildschirmoptimierter Größe zu sehen ist, da ist schon allerlei Technik drin und wenn es Dich interessiert, kann ich Dir so eine Seite mal zur Verfügung stellen. Damit das ganze auch ein bisschen Spaß macht, habe ich als Bilddateien die Centerfolds eines bekannten Magazins von 1953 bis 2003 (zum 50. Geburtstag dieses Magazins habe ich die Seite gebastelt) verwendet. Ich müsste die Seite ein wenig umschreiben, weil auf der Seite auch ein Java Applet ist, aber es wäre kein großer Aufwand.

Zur Zeit bastele ich an was anderem. Ich baue eine Oberfläche, die ebenfalls Bilder darstellt, aber diesmal ist die Quelle eine andere. Wenn die Seite geladen wird, liest ein php Script verschiedene Verzeichnisse aus und schreibt die darin enthaltenen Bilddateien in ein Array, das ich dann an die Java Scripte übergebe. Die Verzeichnisse, die das PHP Script auslesen soll, stehen in einer Datei, die ebenfalls von einem PHP Script ausgelesen wird. Die Problematik ist die, dass sich die Anzahl der Verzeichnisse, die Pfade und die Inhalte der Verzeichnisse jederzeit ändern können. Meine Oberfläche soll alle Änderungen zur Laufzeit übernehmen können, das heißt, ich übergebe etwas und kann das HTML Dokument nicht ändern, wenn ich etwas anderes übergebe, der Code muß so sein, dass er (fast) alle denkbaren Änderungen aufnehmen kann. Die zweite Problematik bei diesem Projekt liegt darin, dass die Verzeichnisse außerhalb von Document Root liegen, es müssen also entsprechende Alias Vereinbarungen in der httpd.conf vorliegen, damit der Server die Dateien auch findet - ich habe hier in meinem Intranet eine XAMPP Umgebung eingerichtet - da ich die httpd.conf nicht ständig ändern und den Server nicht ständig neu durchstarten will, muß ich also Alias Vereinbarungen auf Vorrat haben. Dieser Vorrat ist unter Sicherheitsaspekten problematisch. Es geht darum, dass der Server alles findet und ich jederzeit jeden Pfad in meine Pfaddatei schreiben kann aber der Gast auf der Seite nicht alles ausforschen kann. Hier im Intranet ist das noch nicht so wichtig, aber wenn ich damit ins Internet ginge, dann wäre das schon relevant. Da ist noch eine kleine Baustelle. Und ich habe es schon so eingerichtet, dass ich über einen NO-IP Account alles ins Internet stellen könnte. Die Oberfläche selbst stellt die Bilder nicht mehr quadratisch dar sondern ihrem Format nach, im Moment optimiert für einen 17 Zoll Bildschirm, aber an dem Projekt arbeite ich ja auch erst seit zwei oder drei Tagen. Design Fragen interessieren mich an diesem Projekt weniger, es geht um Techniken. Die Übergabe von Daten von PHP nach JS hat ihre Tücken und die Serveradministration ist auch ein Thema, das für mich ziemlich neu ist.. Ein weiteres Thema bei diesem Projekt sind selbstdefinierte Fehlerseiten, habe ich auch noch nie gemacht, ist jetzt mal dran.

Falls Interesse besteht, melde Dich mal.

Gruß
Rudolf
 
wow, das hört sich verdammt kompliziert an, also der erste Teil mit dem java applet könnte interessant sein. PHP kommt nicht in Frage, da mein Webspace das nicht beinhaltet.

Ich nehme an, dass die Verwendung dieses Java Applets mit Kosten in Verbindung steht, vor allem, wenn du es noch umschreiben musst. Was kostet mich so etwas? Könnte evtl. auch für meinen Kunden interessant sein.

Vielleicht kannst du mir mal den Link zu den Centerfolds schicken, dass ich sehen kann, ob es für mich interessant ist.

Habe in ner Zeitschrift ne Möglichkeit mit Flash gesehen, werde vielleicht auch mal das versuchen.

Danke erstmal und schöne Grüße
Michael
 
Hallo Michael,

so kompliziert ist es nicht und das Applet ist frei, es ist so ein Navigationsteil in Baumform, das für Deine Fragestellung uninteressant ist. Die Seite ist mit einer Tabelle aufgebaut, wo links ein senkrechter Streifen eben für die Navigation zuständig ist, dort läuft dieses Tree Menu, wie es sich für Centerfolds gehört, ist die grosse Abbildung in dem Mittelsteifen der Tabelle und rechts sind oben die TNs und unten noch ein paar Steuerelemente.Pro Jahrgang gibt es eine Seite. Es sind also 12 Bilder auf einer Seite - 12 PMOM - die Navigation ist bei Dir ja ganz anders geregelt und daher ist das Tree Menu Applet für Dich uninteressant. Davon abgesehen ist es langsam und macht den Seitenaufbau langsam, ich würde es heute nicht mehr verwenden. Zur Zeit steht dieses Projekt nicht mehr im Internet, es gibt also keinen Link darauf. Was ich tun kann, ist, Dir mal eine von php und Applet befreite Seite mit der dazugehörigen Ordnerstruktur und den verwendeten Pics zu geben, dann wird schon klar, wie das läuft. Davon abgesehen gibt es hier einen weiteren Thread, in dem eine Seite besprochen wird, die was ähnliches macht Scrollende Bildgalerie. Da werden Hoovereffekte auf einem Newsticker genutzt, der dafür genutzt wird Bilder statt News zu tickern, sehr schön, gefällt mir gut, solltest Du Dir vielleicht mal ansehen, könnte man in abgewandelter Form evtl. auch mal ausprobieren .
Webspace ohne php ist nicht sehr schön - aber egal, Du musst wissen, was Du tust. Hast Du denn in Deiner Entwicklungsumgebung keinen lokalen Server? Ist doch mit xampp kein Problem mehr (früher habe ich sogar auf dem lokalen Frontpage Server getestet) - Wie testest Du denn? Immer im Internet? Gibt es denn auf Deinem Webspace überhaupt eine serverseitige Scriptsprache, wenn es php schon nicht gibt? Und lässt Dein Webhoster Ordnerstrukturen zu oder musst Du alles in einen Ordner kippen (so einen Webspace hatte ich mal - bah!)? Ich will Dich nicht ausfragen, ich muss es halt nur wissen, falls ich Dir die Site umschreiben soll.

Schönen Gruß

Rudolf

Gruß

Rudolf
 
Hallo Mikkele!

Habe Deinen Thread ein wenig verfolgt, weil ich ein ähnliches Problem hatte. Folgendes Script habe ich gefunden:

Code: 
<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com"]
dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["photo3.jpg", "http://www.google.com"]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

Das packst Du in den Header. In den BODY kommt dann sowas wie:
Code: 
<table border="0" align="center">
            <tr>
              <td>
                <div id="dynloadarea">&nbsp;</div> 
              </td>
              <td><div>
                <a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
                <a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
                <a href="#" onMouseover="modifyimage('dynloadarea', 2)">image 3 (onmouseover)</a><br>

oder

                <a href="#" onClick="return modifyimage('dynloadarea', 0)">image 1 (onclick)</a><br>
                <a href="#" onClick="return modifyimage('dynloadarea', 1)">image 2 (onclick)</a><br>
                <a href="#" onClick="return modifyimage('dynloadarea', 2)">image 3 (onclick)</a><br>
              </div>
            </td>
          </tr>
       </table>

Anstatt Image 1, Image 2 oder Image 3 kannst Du natürlich auch Thumbnails einbinden! Ich hoffe ich konnte Dir helfen! Kannst es Dir ja mal bei mir anschauen:

http://www.deetunes.de/index.php?item=stevie

Gruss,
Dennis
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück