Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag28.04.2014 um 10:26 (UTC)    
Titel: [erledigt] Slideshow für rechte Box

Hallöle mal wieder,

ich versuche schon seit ewigen Zeiten, eine einfache Slideshow in eine meiner rechten Boxen einzubinden. Einzig und allein fehlte es mir bislang immer an den richtigen Code.

Hier im Forum wurde ich auf die folgende Seite mit einer entsprechenden Beschreibung aufmerksam gemacht:

http://hpbk-templateworld.de.tl/Slideshow.htm

Nun habe ich mich heran gemacht und versucht, meine Testslideshow in meiner Seite einzubauen. Leider ist es mir bisher n i c h t gelungen die Slideshow zum Laufen zu bringen.

Ich habe folgendes getan:

Den Code
Code:
<!-- include jQuery library -->
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow')
    .after('<div id="nav">')
    .cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    pager:  '#nav'
    });
});
</script>


habe ich wie beschrieben im Extra "Eigener Head Bereich" hinein kopiert.

Im Folgenden habe ich den HTML Code auf meiner Testeite ....http://einetaler.de.tl/Testseite.htm....eingepflegt:

Code:

<div class="slideshow">
    <img src="http://img.webme.com/pic/e/einetaler/silke2014.jpg" width="190" height="292" />
    <img src="http://img.webme.com/pic/e/einetaler/stephanundsven2014.jpg" width="190" height="167" />
    <img src="http://img.webme.com/pic/e/einetaler/joerg2004.png" width="190" height="301" />
    <img src="http://img.webme.com/pic/e/einetaler/happy.png" width="190" height="124" />
    </div><!--end slideshow-->


Zu guter letzt habe ich -wie beschrieben- den Code:

Code:

.slideshow {
    width: 540px;
    height: 395px;
    margin: 30px auto;
}
.slideshow img {
    padding: 20px;
    background: #transparent;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


in den Bereich "CSS-Code ohne Style Tags" hinein kopiert.

Leider funktioniert es trotz allem nicht.

Wo liegt der Fehler?


Gruß Jörg
______________


Zuletzt bearbeitet von einetaler am 12.05.2014, 03:09, insgesamt einmal bearbeitet
Beitrag30.04.2014 um 18:20 (UTC)    
Titel:

Hallo Jörg!

Wenn du etwas von HpBk-TemplateWorld auf deiner Homepage verwendest und es nicht funktioniert, kannst du mir natürlich gerne persönlich Bescheid geben oder im Community-Board von TemplateWorld schreiben, denn dort kann ich jedem schneller helfen.

Du hast fast alles richtig gemacht Wink

Der Fehler liegt am CSS-Code. Du hast dem CSS-Code nicht gesagt, dass es sich um einen Style-Code handelt. Und zwar muss folgendes eingefügt werden:

<style type="text/css">
.slideshow {
width: 150px;
height: auto;
}
</style>

Außerdem hast du der Slideshow keine Größe gegeben. Width steht hier im Code für die Breite der Slideshow. Ich habe gesehen, dass deine Bilder 150 Pixel breit sind, also habe ich hier die Größe 150 Pixel eingetragen. Diesen Code kannst du nun bei "Hinweis unter der Navigation" oder "Text unter dem Design" einfügen. Das Feld "CSS-Code ohne Style-Tags" gibt es bei dem RED-Design nicht, da es nur für das CSS-Design vorhanden ist.

Ich habe gerade gesehen, dass wenn man den Code so einfügt, Zahlen unter der Slideshow stehen. Wenn du diese dort nicht sehen möchtest, füge einfach folgenden Code im Extra "Eigener Head-Bereich" ein.

<!-- include jQuery library -->
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow1.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/82955745/slideshow2.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>

Ich hoffe, ich konnte dir helfen und würde mich über eine Rückmeldung freuen.
Schau dir gerne mal meine Testseite an, dort läuft die Slideshow gerade. Wink

http://community-fuer-templates-und-tutorials-im-homepage-baukasten.de.tl/

Viele Grüße,

Jens
______________

Grundwissen HPBK | Tipps & Tutorials | Community | TemplateWorld FAQs | Smiley-Center | Design-Center
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de