Flexslider Slideshow
Auf der Seite https://www.woothemes.com/flexslider findet Ihr eine geniale Slideshow, die Ihr als html-Widget auf Eurer Webseite einsetzen könnt.
Beispiel:
flexslider slideshow
-
Flexslider by WooThemes...
-
This image is wrapped in a link.
...klick on it! -
This image is not wrapped in a link.
No use klicking on it. -
This image gets you to http://flexslider.woothemes.com/
Das Besondere an der Flexslider-Slideshow ist, dass sie auch in der mobilen Ansicht richtig dargestellt wird, da das flexslider-Skript die Slideshow automatisch auf die jeweilige
Browsergröße skaliert!
HowToDo
1. Flexslider-Skripte in den Head-Bereich der eigenen Webseite/Unterseite einbinden:
<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/hide.css"
rel="stylesheet"
info="Kommentare im UI" />
<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/styles.css"
rel="stylesheet" info="Styles" />
<link type="text/css" href="https://redesign-berlin.lima-city.de/__css/flexslider-jimdo.css"
rel="stylesheet"
info="angepasstes Flexslider-Script" />
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" info="Icons" />
<style type="text/css">
/*<![CDATA[*/
/*alle Anpassungen für flexslider.css
-----------------------------------------*/
/* Anpassungen für flexslider.css
-----------------------------------------*/
.flex-caption {
position: absolute;
top: 20%;
bottom: 20%;
width: 65%;
max-width: 450px;
height: auto;
left: calc(50% - 65% / 2 - 15px);
font-size: calc(0.5em + 1.5vmin);
background: rgba(33,33,33,.33);
z-index: 1;
padding: 25px 15px;
color: white!important;
}
.flexslider a:link, .flexslider a:visited, .flexslider a:hover {
text-decoration:none;
}
/*]]>*/
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://redesign-berlin.lima-city.de/__js/jquery-flexslider-min.js"></script>
Pfade ggf. austauschen (Dateien auf eigener Webseite hochladen und Linkadressen verwenden)!
2. html-Code der Slideshow in ein html-Widget-Element einfügen
<div class="flexslider">
<ul class="slides">
<li>
<img src="URL(Bild1)" alt="" />
<p class="flex-caption">
Bildbeschreibung
</p>
</li>
<li>
<a href="URL(Link)">
<img src="URL(Bild2)" alt="" /></a>
<p class="flex-caption">
Dieses Bild ist verlinkt...
</p>
</li>
<li>
<img src="URL(Bild3)" alt="" />
</li>
<li>
<img src="URL(Bild4)" alt="" />
</li>
</ul>
</div>
Wichtig: Platzhalter für Pfade (URL) mit eigenen Pfaden zu Links und Bildern austauschen!
3. Inhalt der Datei flexslider-init.htm (s.u.) als html-Widget am Ende der Seite einsetzen:
<script type="text/javascript">
//<![CDATA[
(function($) {
$(document).ready(function() {
$('.flexslider').flexslider({
slideshowSpeed: 8000,
pauseOnAction: false
});
});
})(jQuery);
(function() {
var regBuff = window.__regModuleBuffer = [];
if (!window.jimdoGen002) {
window.jimdoGen002 = {};
}
if (!window.jimdoGen002.regModule) {
window.jimdoGen002.regModule = function() {
var args = [].slice.call(arguments);
regBuff.push(args);
};
}
})();
//]]>
</script>
init .flexslider (script)
Wenn gewünscht, helfen wir gern bei der Erstellung einer Flexslider-Slideshow auf Eurer Webseite.
- Bitte einfach eine Nachricht senden über das Kontaktformular