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

Wie erstelle ich eine Slideshow

M

MichiLetsPlay

Mitglied
Hallo,

ich will für einen Kumpel eine Website erstellen und dabei eine Bilder-Slideshow mit einem Text an einer bestimmten Stelle erstellen.
Das "Vorbild" ist die Slideshow dieser Webste: KLICK

Wäre echt toll, wenn jemand weiß wie das geht ;)

Grüße
 
Jo das scheint das richtige zu sein aber ein paar Fragen:

1. (Ich habe mir das alles nochnicht durchgelesen, nur das Demo angeschaut ;))
Geht das auch ohne das eine neue Seite aufgerufen wird?

2. Keine Ahnung was jQuery ist, geht das irgendwie mit HTML oder PHP? ;)
Grüße
 
Keine Garantie, aber das kann eigentlich nicht mit PHP funktionieren, da PHP-Quelltext halt vom Server interpretiert wird und nicht vom Client, somit stehen keine Interaktiven Möglichkeiten mit PHP offen.
 
Geht das auch ohne das eine neue Seite aufgerufen wird?
Zum Vergrößern anklicken....
Ja, Du kannst den Slider in eine vorhanden Seite einbetten.
Keine Ahnung was jQuery
Zum Vergrößern anklicken....
jQuery ist ein Framework für Javascript. Es wurde entwickelt, um die Programmierung gegenüber Javascript zu vereinfachen, indem es z. B. Browserabhängigkeiten verdeckt und Animationen unterstützt. Javascript und jQuery laufen im Browser ab, während PHP auf dem Server interpretiert wird. Deshalb ist PHP für Animationen nicht geeignet.
PS: Der Anything Slider scheint zwar sehr mächtig und weitgehend konfigurierbar zu sein, aber deshalb für jemand mit wenig Erfahrung eher nicht geeignet. Schau dir z. B. lieber mal BX-Slider an, da ist ganz übersichtlich erklärt, wie man ihn einsetzen muss:
http://bxslider.com/
 
Zuletzt bearbeitet von einem Moderator:
Im Beispiel wird einfach eine Liste per HTML aufgebaut. Im <head> werden jQuery und AnythingSlider als JavaScript Sources eingebunden, anschließend wird der Slider initialisiert. Du musst dich jetzt nicht komplett in jQuery einlesen, schau dir einfach an, wie der Slider initialisiert wird und welche Optionen einstellbar sind. Grundkenntnisse in HTML, CSS & JavaScript solltest du allerdings mitbringen, um zu verstehen, was da passiert ;)
 
Der Anything-Slider ist HTML-, CSS- und JavaScript-Code. Der läuft theoretisch bei jeder Webseite. Ein Blog besteht auch nur aus den selben Techniken wie jede andere Webseite auch. Daher ist das kein Kriterium. Wenn er nicht geht, liegt es irgendwo an deinem HTML-, CSS- oder JavaScript-Code.
 
Hi,

ich habe jetzt folgendes problem:

Ich würde den "expand-slider" gerne mithilfe von "php include" auf die index.php-Seite bringen.
Das geht aber nicht so ganz.
Nach dem "php include" wird die Seite nicht "weitergeladen"

Was kann ich machen?

Grüße
 
Was meinst Du denn mit "expand slider"? Ist das eine Ausprägung vom Anything Slider? Wenn Du Probleme damit hast, dann poste mal den Quelltext.
 
Hi,

"expand-slider" gehört zu Anythingslider.

Hier mal der Code der "angezeigt" werden sollte:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <?php include "top1.php"; ?>
    #hauptteil {
       background-image:url(http://www.crushtub3.co.de/weave1.jpg);
        background-repeat:repeat-y;
        background-position:center;
        height:100px;
        width:80%;
        margin: 0 auto;
        -moz-background-size:100%;/* Firefox */
        -webkit-background-size:100%; /* Safari, Chrome */
        background-size:100%; /* Opera, IE, W3C Standard */
     }
</style>
<title>CrushTub3 - Home</title>
    <?php include "top2.php"; ?>
    <?php include "anyslide.php"; ?>
    Diese Website befindet sich noch im Aufbau! Besuch sie doch morgen wieder!
    <?php include "bottom.php"; ?>
</body>
</html>
top1.php:
PHP: 
<style type="text/css">
   html,body {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center top;
        -moz-background-size:100% 100%; /* Firefox */
        -webkit-background-size:100% 100%; /* Safari, Chrome */
        background-size:100% 100%; /* Opera, IE, W3C Standard */
    }
  #bginfosbal {
        background-image:url(http://www.crushtub3.co.de/i/nopic.jpg);
        background-repeat:no-repeat;
        background-position:center;
        height:61px;
        width:80%;
        -moz-background-size:100% 100%; /* Firefox */
        -webkit-background-size:100% 100%; /* Safari, Chrome */
        background-size:100% 100%; /* Opera, IE, W3C Standard */
    }
    #bginfo {
        background-image:url(http://www.crushtub3.co.de/i/nopic.jpg);
        background-repeat:no-repeat;
        background-position:center;
        height:61px;
        width:80%;
        -moz-background-size:100% 100%; /* Firefox */
        -webkit-background-size:100% 100%; /* Safari, Chrome */
        background-size:100% 100%; /* Opera, IE, W3C Standard */
    }
    #hauptteiltop {
        background-image:url(http://www.crushtub3.co.de/i/ht-top.png);
        background-repeat:no-repeat;
        background-position:center;
        height:20px;
        width:80%;
        -moz-background-size:100%; /* Firefox */
        -webkit-background-size:100%; /* Safari, Chrome */
        background-size:100%; /* Opera, IE, W3C Standard */
    }
    #hauptteilbottom {
        background-image:url(http://www.crushtub3.co.de/i/ht-bot.png);
        background-repeat:no-repeat;
        background-position:center;
        height:20px;
        width:80%;
        -moz-background-size:100% 100%; /* Firefox */
        -webkit-background-size:100% 100%; /* Safari, Chrome */
        background-size:100% 100%; /* Opera, IE, W3C Standard */
    }
top2.php
PHP: 
</head>
<body background="http://www.crushtub3.co.de/i/weave1.jpg">
        <div align="center">
        <a href="http://www.crushtub3.co.de/index.php"><img src="http://www.crushtub3.co.de/i/top.jpg" height="80%" width="75%"></a><br>
        <a href="http://www.crushtub3.co.de/index.php"><img src="http://www.crushtub3.co.de/i/button_home.png" width="15%" height="3%"></a>
       <a href="http://www.crushtub3.co.de/index.php"><img src="http://www.crushtub3.co.de/i/button_pro.png" width="15%" height="3%"></a>            
       <a href="http://www.youtube.com/CrushTub3"><img src="http://www.crushtub3.co.de/i/button_you.png" width="15%" height="3%"></a>
        <a href="http://www.facebook.com/CrushTub3"><img src="http://www.crushtub3.co.de/i/button_fac.png" width="15%" height="3%"></a><br>
        <div align="center" id="hauptteiltop"></div>
        <div align="center" id="hauptteil">
        <div align="left" id="hauptteilinnen">
            <font color="#FFFFFF" face="Arial" size="4">
bottom.php:
PHP: 
            <hr>
            <a id="389010" href="http://www.besucherzaehler-counter.de">link</a><script type="text/javascript" language="JavaScript" src="http://www.besucherzaehler-counter.de/counter_js.php?account=389010&style=4"></script>
        </div>
        </div>
        <div align="center" id="hauptteilbottom"><div>
    </div></body></html>
anyslide.php:
PHP: 
<div id="wrapper1">
    <ul id="slider1">
        <li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
        <li><img src="demos/images/slide-env-1.jpg" alt=""></li>
        <li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
        <li><img src="demos/images/slide-env-2.jpg" alt=""></li>
    </ul></div>


Und hier mal der Code der "angezeigt" wird (Seitenquelltext) :

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <?php include "top1.php"; ?>
    #hauptteil {
        background-image:url(http://www.crushtub3.co.de/weave1.jpg);
        background-repeat:repeat-y;
        background-position:center;
        height:100px;
        width:80%;
        margin: 0 auto;
        -moz-background-size:100%; /* Firefox */
        -webkit-background-size:100%; /* Safari, Chrome */
        background-size:100%; /* Opera, IE, W3C Standard */
     }</style><title>CrushTub3 - Home</title>
    <?php include "top2.php"; ?>


Grüße
 
Wenn das letzte der Code ist, der vom Browser mit "Seitenquelltext" angezeigt wird, dann werden die PHP-Anweisungen nicht interpretiert. Hast Du die Seite auf deinen Webspace hochgeladen? Unterstützt dein Webspace PHP? Hat deine Seite die Endung ".php"?
Wenn das in anyslide.php alles ist, was Du für den Slider getan hast, ist das zu wenig. Es muss außerdem noch jQuery und das Javascript für den Slider eingebunden werden. Außerdem braucht der Slider wahrscheinlich noch eine Javascript-Anweisung, um ihn zu starten.
 
Dein Code ist total unstrukturiert, wieso machst du ein Tag in einem includierten Dokument auf und später im Hauptdokument wieder zu (und umgekehrt)? Wenn du CSS auslagern willst, was prinzipiell der richtige Weg ist, binde eine CSS-Datei ein, statt irgendwie einen Teil davon per include einzufügen.

SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden

Desweiteren zu den Grundlagen von jQuery und des Plugins:
jQuery-Tutorial: Einführung und Grundlagen - Matthias Schütz
AnythingSlider jQuery Plugin | CSS-Tricks (Downloade dir die Files und schau dir im Demo-Quelltext an, wies gemacht wird)

Und rein prinzipiell benötigst du für das, was du hier tust, kein einzigstes Byte PHP. Klingt jetzt zwar hart, aber beschränke dich lieber auf HTML, CSS, JavaScript und jQuery, solange du von den Grundlagen noch keinen blassen Schimmer hast.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben