Ultimate FadeIn-Slideshow
Die oben dargestellte Slideshow wurde mit dem folgenden Tool erstellt:
HowToDo
Kopiere folgenden Code in ein html/widget-Element:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script><script type="text/javascript" src="https://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/fadeslideshow.js">
//<![CDATA[
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at https://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//]]>
</script><script type="text/javascript">
//<![CDATA[
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [490, 220], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["https://u.jimdo.com/www10/o/se6e836e0457a9c28/img/i5b068d4b4ea12383/1367490671/std/image.jpg", "", "", ""],
["https://u.jimdo.com/www10/o/se6e836e0457a9c28/img/i953926fcb5793c38/1367490676/std/image.jpg", "", "", ""],
["https://u.jimdo.com/www10/o/se6e836e0457a9c28/img/i3fd5f7d816a970e9/1367490680/std/image.jpg", "", "", ""]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 4000, //transition duration (milliseconds)
descreveal: "peekaboo",
togglerid: "slideshowtoggler"
})
//]]>
</script>
<div class="css3box" id="fadeshow1">
</div>
Erklärung:
Am Anfang des Elements stehen die Skripte, die die Slideshow für die Ausführung benötigt:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script><script type="text/javascript" src="https://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/fadeslideshow.js">
Der auskommentierte Text
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at https://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
ist für die Ausführung überflüssig, muss aber aus Lizenzgründen im Widget erhalten bleiben.
Die Dimensionen (Breite/Höhe) der Slideshow sollen sich an den verwendeten Bildern orientieren, bzw. die Dimensionen der Bilder an den für die Slideshow gewünschten Dimenionen:
dimensions: [490, 220]
In den Image-Arrays liegen die Bilder der Slideshow. Es können so viele Bilder eingefügt werden, wie man will. Wichtig ist die korrekte Syntax und die Vollständigkeit des Image-Strings:
imagearray:
[["https://.../image.jpg", "", "", ""],
Die Bilder müssen auf der Webseite hochgeladen sein und werden per Quellenverknüpfung aufgerufen (Pfadangabe)
Die zeitliche Abfolge der Bildwechsel im Slider wird mit dem Parametern "pause" und "fadeduration" bestimmt. Im Beispiel sind es 2,5 Sek. für Pause und 4 Sek. für die Fadeduration = Überblendungsdauer)
Skalierbare Slideshows
Diese Slideshow wird auf Deiner Jimdo-Seite nicht skaliert! Für mobile Ansichten müsste daher das CSS-Skript der Slideshow angepasst werden.
Hier findet Ihr Beispiele für skalierbare Slideshows, die keine weitere CSS-Anpassung für mobile Ansichten benötigen: