• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Eigene "immerzentrierte Slideshow" erstellen

Anomalie

Anomalie

Neues Mitglied
Hallo erstmal!

Vornweg: ich bin ziemlich neu im ganzen Homepage-Melieu, also bitte ich um Nachsicht wenn ich das alles nicht ganz Fachspezifisch formuliert bekomme.
Ich arbeite gerade an einer Portfolio-Homepage für mich selber und versuche diese komplett selber zu erstellen um wenigstens einmal so etwas in die Richtung gemacht zu haben. Und auch aus Stolz. Und Geldmangel.
Generell ist das Design wohl ziemlich unkonventionell (ich studiere Design) aber jetzt auch nicht wirklich verrück würde ich behaupten, hoffe Menschen mit Verstand von HTML(...) denken genauso und ich bekomme nachher nicht zu hören dass es komplett unmöglich ist.
Also dieses hier ist meine home page (haha) also mein Index. Das ist auch soweit alles kein Problem für mich zu erstellen. Jetzt habe ich mir überlegt dass ich gerne die Bilder der verschiedenen Projekte auch auf genau der Seite zeigen möchte, also ohne die Seite zu verlassen und auch ohne Lightbox (die finde ich hässlich und irgendwie unnötig, ich will es so schlicht und pragmatisch wie möglich halten).
Ich habe dazu mal ein gif angefertigt welches mein Vorhaben verbildlicht. U
m es nochmal irgendwie in Worte zu fassen:
Ich möchte dass wenn man auf eines der Thumbnails klickt, sich auf derselben Seite eine extrem simple Slideshow (so wie im gif) "öffnet" und mithilfe welcher man dann die verschiedenen Bilder des Projektes ansehen kann.
Zusätzliches (und auch wohl eher das größte) Problem ist die Positionierung der weiter links stehenden Projekte, da diese ja quasi außerhalb des Rahmen angezeigt werden müssen. Da hätte ich gerne dass der gesamte Inhalt bis auf das aktive Projekt um x Pixel nach Rechts verschoben wird wenn die Slideshow geöffnet wird.

Nun meine eigentliche Frage: Ich weiß nicht wirklich ob dies möglich ist aufgrund mangelnder Kenntnisse, ist es das?
Und falls ja, wie gehe ich da am besten vor, was für Funktionen werden dafür benötigt?
Ich möchte auch gar nicht, dass mir jemand einen Code dafür bastelt, aber irgendwie Lösungsansätze wonach ich überhaupt googlen müsste um Anleitungen dafür zu finden wie ich mein Vorhaben umsetzen kann wären super cool.

Bin für jede Hilfe sehr dankbar,

LG
Johanna
 
Werbung:
Hallo,

dein Vorhaben sollte sich machen lassen.. Hast du dein Layout schon irgendwie in ein HTML Gerüst verwandelt? Wenn ja wäre ein Link hilfreich um dir passende Tipps zu geben oder eventuelle Fehler aufzuzeigen.
Tiefgehende Kenntnisse erfordert dein Vorhaben nicht aber wenn du überhaupt nicht weist worum es geht und du nicht weiter kommst würde ich erst mal ein HTML Tutorial empfehlen..

Eine Galerie ist natürlich immer Geschmackssache aber ich würde trotzdem Funktionen wie letztes/nächstes Bild einbauen da man ja nicht immer hin und her scrollen möchte um das nächste Bild zu wählen.
Die einfachste Möglichkeit wäre natürlich ein fertiges Gallery-Script aber wenn du es wirklich darauf beschränken möchtest reicht ein DIV-Container der mit visibility: hidden; ausgeblendet wird und darauf wartet bei klick auf ein Bild per JavaScript mit der Bild-URL bestückt zu werden um dann sichtbar gemacht zu werden.
 
Danke für die schnelle Antowrt!
Das ist schonmal schön zu hören, dass es generell machbar ist! :)

Leider bin ich noch nicht so weit, dass es irgendwelche Links gibt. Habe mit der Index Seite angefangen aber bin noch nicht fertig und dachte in informiere mich vorher mal über den weiteren Verlauf des Bauens, nicht dass ich generell alles falsch mache.
Bisher ist die Seite einfach so aufgebaut, dass ich einen großen div Container habe der quasi die komplette Homepage ausfüllt und dadrin gerade die kleinen Thumbnails + Text in je noch einem div anordne. Also irgendwie das einfachste was es gibt. Achja die Thumbnails sind auch bereits Links. Wie schon erwähnt, weiter wusste ich leider überhaupt nicht wie ich es angehen sollte, deswegen die (blöde) Fragerei hier.
JavaScript ist da ca auch ein Problem. Das verstehe ich nicht wirklich. ich habe mir mal bei einigen Homepages die auch sehr simpel sind den Quelltext angesehen und wenn ich dann zum JavaScript Abteil gelange scheint alles nur ein Haufen Buchstaben, Zahlen und Sonderzeichen zu sein ohne erkennbare Gliederung/Ordnung. Liegt das dann daran dass da irgendwas besonderes eingebunden wurde oder wird das immer so unübersichtlich? (Ich muss zugeben ich bin noch nicht dazu gekommen mir da eine Einführung oder ähnliches zu ergooglen, vielleicht würde das die Frage schon beantworten).
Und wenn ich dann pro Projekt mehrere Bilder habe (beim ersten sind es 13), ist es dann nicht so dass wenn die Bilder auf der Seite sind, auch wenn sie versteckt sind, die Homepage diese trotzdem beim öffnen mitlädt und dadurch sehr langsam wird?
 
Werbung:
Ich gib dir einen Tipp um dir vorab viel Arbeit zu sparen, erstelle dir falls du PHP zur Verfügung hast ein Array das alle Bild-URLs und Texte dazu enthält und gib deine HTML Seite (dynamisch) aus.
Noch besser wäre die Bilder aus einem Verzeichnis einzulesen so musst du nur das neue Bild uploaden und ich würde eine *.txt Datei mit dem gleichen Namen wie das Bild mit dem Text für jeweiliges Bild..

Falls sich dann Inhalt ändert musst du nicht den gesamten Quellcode anpassen.


Das hört sich jetzt eventuell für dich sehr schwierig an aber das schaffst du mit unserer Hilfe schon ;)

Sag uns doch zuerst einmal welche Technologien dir auf dem Webserver zur Verfügung stehen bzw. wo du dein Webspace hast..
 
okay, cih wusste jetzt zB nicht, dass die Art wie ich meine Homepage baue davon abhängig ist wo ich meinen Webspace habe. So gar nicht. Danke liebe Dozenten dass ihr uns soetwas mitteilt...
Ich hab nämlich noch gar keinen Webspace, ich dachte das käme später, bzw wird erst später relevant. Ebenso wie die Domain.
Kannst du mir da evtl Seiten/Server empfehlen die günstig und gut sind?
 
Du kannst die Seite selbstverständlich erst lokal erstellen und anschließend auf einen Webspace hochladen, es sollte halt nur die verwendeten Technologien unterstützen.
Ich glaub das wir uns aber ruhig mit PHP bedienen dürfen da mir kein Hoster bekannt ist der dies nicht bereitstellt. :)

Hast du denn lokal schon einen Webserver (XAMPP) o.ä. Installiert?
 
Werbung:
Also ausgehend davon dass ich nicht wirklich weiß, was das sein soll sage ich mal nein, habe ich nicht. Aber der Download läuft.
Ich fühl mich gerade wirklich als ob ich -Wissen in dem ganzen Bereich besitze.
 
Also HTML und CSS wird im Browser gerendert das bedeutet du kannst HTML Seiten mit Stylesheets lokal einfach im Browser ausführen aber reines HTML ist halt statisch und du musst den Quellcode bei jeder Änderung anpassen.
PHP ist eine Serverseitige Programmiersprache das bedeutet es wird auf dem Server ausgeführt (dafür XAMPP) und liefert generiertes HTML zurück..

Um dir jetzt mal ein kleines Beispiel zu nennen:
index.php (ersetzt index.html)
PHP: 
<?php
$bilder = array(
    array(
        "url" => "hund.jpg",
        "alt" => "Hund",
        "text" => "Bild von einem Hund",
    ),
    array(
        "url" => "katze.jpg",
        "alt" => "Katze",
        "text" => "Bild von einem Katze",
    ),
);
?>

<html>
<head></head>
<body>
    <section>
    <?php
    foreach ($bilder as $value) {
        echo '<figure><img src="' . $value["url"] . '" alt="' . $value["alt"] . '"> <figcaption>' . $value["text"] . '</figcaption></figure>';
    }
    ?>
    </section>
</body>
</html>
Egal wie viele Bilder du jetzt oben angibst es werden automatisch die Elemente erstellt.
 
Zuletzt bearbeitet:
Tatsächlich verstehe ich nur Bahnhof. Was ich davon allerdings grundsätzlich verstehe ist, dass es mir im Nachhinein das Austauschen von Bildern bzw. aktualisieren meine Homepage erleichtert, oder? Also einfach dadurch dass ich eine Datenbank erstelle.
Wenn ich das so mache, muss ich dann meine ganze Homepage in php schreiben? Weil das wirkt auch mich noch sehr kryptisch da ich mich noch gar nicht damit auseinander gesetzt habe. Da verstehe ich noch eher was JavaScript macht.
Außerdem ist die Updatefähigkeit meiner Homepage auch absolut nicht wichtig. Wenn die einmal so steht dann reicht es erstmal.
Irgendwie habe ich bei dem ganzen so den roten Faden verloren in Hinsicht darauf was ich mir aneignen muss und überhaupt. Ich bin verwirrt.
 
Werbung:
Ich würde es auch wenn ich die Inhalte nicht ändern müsste so machen weil du dir einfach Arbeit sparst.

Also wie du siehst kann PHP mit HTML gemischt werden.
Um des Script kurz zu erklären:
Oben wird ein Mehrdimensionales Array erstellt also die Variable $bilder enthält jetzt alle festgelegt Werte.
Im Unteren HTML-Code wird im <body>-Tag mit einer Schleife foreach () der <figure>-Tag eben so oft aufgerufen wie der Array $bilder Elemente enthält und die Attribute src, alt und der Inhalt vom <figcaption>-Tag über den Arrayschlüssel vom Array $value der jeweils den Sub-Array von $bilder enthält.

Der im Browser ausgegebene HTML Code sieht dann folgendermaßen aus:
HTML: 
<html>
<head></head>
<body>
<section>
    <figure><img src="hund.jpg" alt="Hund"> <figcaption>Bild von einem Hund</figcaption></figure>
    <figure><img src="katze.jpg" alt="Katze"> <figcaption>Bild von einem Katze</figcaption></figure>
</section>
</body>
</html>
 
Zuletzt bearbeitet:
:/ Mit der hälfte deiner Worte kann ich kaum was anfangen. Arrays sind einfach die Ansammlungen der Daten, in meinem Fall der Bilder richtig? Aber was genau ist denn eine eine Schleife?
Und ich weiß nicht genau was ein Arrayschlüssel sein soll, also woher da genau das $value kommt und aussagt. Da steht zwar '$bilder as $value' aber das scheint ja nicht zu bedeuten dass es dasselbe ist?
Und wie genau ich jetzt irgendetwas mit diesem XAMPP anstelle weiß ich auch irgendwie so gar nicht. :/
 
Anomalie schrieb:
:/ Mit der hälfte deiner Worte kann ich kaum was anfangen. Arrays sind einfach die Ansammlungen der Daten, in meinem Fall der Bilder richtig? Aber was genau ist denn eine eine Schleife?
Und ich weiß nicht genau was ein Arrayschlüssel sein soll, also woher da genau das $value kommt und aussagt. Da steht zwar '$bilder as $value' aber das scheint ja nicht zu bedeuten dass es dasselbe ist?
Und wie genau ich jetzt irgendetwas mit diesem XAMPP anstelle weiß ich auch irgendwie so gar nicht. :/
Zum Vergrößern anklicken....


Du könntest dich bei Interesse mit den Grundlagen von PHP auseinandersetzen:

Gute Deutsprachige Einführungen sind z.B:

http://www.php-kurs.com/
http://www.peterkropff.de/site/php/php.htm
http://reeg.junetz.de/DSP/node42.html

mfg Nita
 
Zuletzt bearbeitet:
Werbung:
Auf der ersten Homepage die du genannt ist bin ich gerade und versuche mich da ein wenig einzulesen. Habe heute zum ersten mal von php gehört, dachte man macht es eigentlich mit javascript. Sehr verwirrend das ganze.

Danke für die Links!
 
Das sie jetzt zwingend PHP lernen muss würde ich nicht sagen.

Dies ist ja soweit fertig und nur das grobe Verständnis reicht eigentlich..
Erstelle unter C:\xampp\htdocs einen Ordner test und pack eine Datei namens index.php rein und füge dort meinen Code von vorhin rein..
Ruf im Browser localhost/test auf und dann siehst du schon ein Ergebniss..
 
Ich glaube dass PHP nicht das Richtige für jemanden ist, der gerade erst mit Webprogrammierung beginnt...
Ohne viel Geduld und Lernaufwand wird das so oder so nichts.
Erst HTML verstehen, dann CSS und dann kann man entweder mit JS oder PHP weitermachen.
 
Werbung:
Ich würde selbst einem Einsteiger anhand solch einfacher Techniken zeigen wie einfach man Dynamisch HTML erstellt.
Ich möchte aber nichts aufzwingen war nur ein Tipp.
 
Das geht leider nicht, habe auf meinem MacBook keine C Partition. Sogar gar keine Partition.
Muss gleich mal schauen wie ich das genau anlegen muss.. Das war nämlich bisher auch alles was ich gefunden hatte wo jemand erklärt wie man eine php Datei anlegt.
Was genau meinst du denn damit, dass es soweit fertig ist?
 
Werbung:
Ich ging von einem Windows aus ;)

Unter Apfel kenne ich mich nicht aus, soweit ich mich erinnern kann habe ich mal was aufgeschnappt das in OSx schon ein Webserver Integriert ist..
Aber dennoch solltest du dein DOCUMENT_ROOT Verzeichnis mit ein wenig suche finden.. Suche mal im System nach htdocs
 
Habs gerade gefunden, habe aus Neugier mal die darin enthaltene index datei geöffnet.
Dort stand dann etwas davon dass irgendwas falsch mit meiner XAMPP installation ist?
bvbkAMc.png
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben