Galeriebildwechsel onclick im Hintergrund

[melissa]

Hallo,

ich möchte für mein Portfolio folgendes machen:

(Im Vordergrung eine Navigationsleiste, mit css-Floweffekt)

Im Hintergrund fensterfüllend ein Foto, soweit kein Problem.
Jetzt soll jedoch über klicks auf pfeil-gifs durch die Bilder navigiert werden.
Um das besser zu verstehen hab ich ein Bild mitgepostet:

Die Navigation soll bleiben, das Foto im Hintergrund soll über die weißen Pfeile veränderbar sein.
Und es soll je nach Fenstergröße skalierbar sein.

Wie genau kann ich das umsetzen? Bin leider in Javascript nicht sonderlich bewandert, was sich allerdings in den Semesterferien ändern soll.

Danke für die Hilfe!

[Gary]

Hi melissa

Hmmm,

Ich würde für jedes Hintergrundbild eine neue .css schreiben.

1.Page (beinhaltet Page1.css)
Bei klick auf "vor" lade Page 2.

2.Page (beinhaltet Page2.css)
usw.

In den .css kannst du dann dein gewünschtes Hintergrundbild setzen und bist bei der Vordergrundgestaltung völlig frei.

Geht natürlich nur, wenn du nicht hunderte Bilder hast - sonst artet dies in Arbeit aus ;)

Grüße Gary

[Jeremy]

Geht natürlich nur, wenn du nicht hunderte Bilder hast - sonst artet dies in Arbeit aus ;)

Durchaus machbar, wenn man sich mit den PHP-Funktionen opendir()und readdir() auseinandersetzt.

Für die Fallunterscheidung könnte ich dir noch folgende Funktion an's Herz legen

[code=php]
function is_img($img) {
  if (!getimagesize($img)) return false;
  else return true;
}

if(is_img("./URL/ZUM/BILD.JPG")) echo "BILD.JPG ist ein Bild!";
[/code]

Bei Bedarf können die Bilder so auch in eine SQL-Tabelle abgelegt werden, um bei wiederholtem Aufruf den Server zu schonen.

Zum Gebrauch müsstest du nur noch die anzuzeigenden Bilder in einen Ordner legen, diesen auslesen und anschließend das Hintergrundbild deiner Seite dynamisch ändern - entweder über das style-Attribut oder per

[code=php]
header('Content-type: text/css');
[/code]

Liebe Grüße.

[Kai345]

[latex]Mae  govannen![/latex]

function is_img($img) {
  if (!getimagesize($img)) return false;
  else return true;
}
[/code]

Viel zu viel Code ;)

function is_img($img) {  
    return !!getimagesize($img);  
}

Cü,

Kai

[bleicher]

Grüße,
1)ein bild auf fenstergröße mit erhaltung der seitenverhältnisse zu skalieren, ist mit css unmöglich - aber vllt stört es dich nicht
2)dein problem wäre mit JS tatsächlich sehr einfach lösbar, dafür reichen grundkentnisse - ich würde ein abend in den ferien raten^^
eine lösung mit "einzelne seite für jeden hintergrund" ist möglich, aber ich habe so meine zweiffel dass es gut geht - die nachteile kennst du vllt aus "vorPHPzeiten"
MFG
bleicher

[ChrisB]

Hi,

ein bild auf fenstergröße mit erhaltung der seitenverhältnisse zu skalieren, ist mit css unmöglich

Etwas mathematisch unmögliches kann überhaupt keine Technik hinbekommen, egal wie sie nun heißt.

MfG ChrisB

[bleicher]

Grüße,

ein bild auf fenstergröße mit erhaltung der seitenverhältnisse zu skalieren, ist mit css unmöglich

Etwas mathematisch unmögliches kann überhaupt keine Technik hinbekommen, egal wie sie nun heißt.

du weisst doch, dass ich das übliche "fit by short side" meine^^
MFG
bleicher

[melissa]

---

2)dein problem wäre mit JS tatsächlich sehr einfach lösbar, dafür reichen grundkentnisse - ich würde ein abend in den ferien raten^^
eine lösung mit "einzelne seite für jeden hintergrund" ist möglich, aber ich habe so meine zweiffel dass es gut geht - die nachteile kennst du vllt aus "vorPHPzeiten"

---------------

Danke für den Tipp ;-)
Vielleicht könntest du mir noch einen Tipp geben, wie ich rangehen muss an die Sache? Dass es möglich ist, dachte ich mir schon vorher...

Und eine Seite pro Bild zu erstellen ist so gut wie unmöglich, denn wie ein Portfolio eben ist, sind es ziemlich viele Bilder.

[Shadowcrow]

'ǝɯɐu$ ıɥ

Und eine Seite pro Bild zu erstellen ist so gut wie unmöglich, denn wie ein Portfolio eben ist, sind es ziemlich viele Bilder.

Nö, die Anzahl der Bilder ist egal, mit einer serverseitigen Programmiersprache geht das sehr schnell, der Name des gewünschten Bildes wird zb. im Querystring an ein Skript übergeben das dann eine Seite mit dem gewünschten Bild an den Browser sendet.

Für deine Zwecke ist aber Javascript besser geeignet.

ssnɹƃ
ʍopɐɥs

[bleicher]

Grüße,
dabei gibt es eine grundlegende Entscheidung - muss das Hintergrundbild erhalten bleiben, auch wenn man durch die unterschiedlichen Unterseiten navigiert?
dann müsstest du das nämlich über cookies, localStorage oder url mitgeben
MFG
bleicher

[Melissa]

nein, es ist nich nötig, dass das Hintergrundbild erhalten bleibt.
wenn man auf der Navigationsleiste auf einen neuen Punkt klickt, soll sich das Bild sowieso ändern.

Bsp:
Der User klickt in der Navigationsleiste auf "Fotografie". Dann will ich, dass das erste Hintergrundbild kommt, bei dem man über die Pfeile weiter durchblättern kann. (So kann er sich die ganzen Arbeiten ansehen)
Klickt der User dann in der Navi auf "Zeichnungen" kommt ein neues Hintergrundbild mit der ersten Zeichnung. (Und kann wieder mit den Pfeiltasten blättern)

Ich möchte die einzelnen Kategorien auch als extra Seiten bauen, damit man auch gezielt auf eine Kategorie zugreifen kann und nicht die gesammte Seite nur mit Javascript navigiert wird.
D.h. ich hab ca. 5 (html)Seiten, denen Bilder zum durchblättern zugeordnet sind.

Grüße

[Shadowcrow]

'ǝɯɐu$ ıɥ

Die Navigation soll bleiben, das Foto im Hintergrund soll über die weißen Pfeile veränderbar sein.
Und es soll je nach Fenstergröße skalierbar sein.

Vlt. hilft dir das?

ssnɹƃ
ʍopɐɥs

[bleicher]

Grüße,
und ich trottel dachte immer sowas gehe nicht^^
MFG
bleicher

[melissa]

hallo,

das hilft mir in Sachen Bild-skalieren sicher weiter, danke!