any slider
AnythingSlider jQuery Plugin
Online Dokumentation: https://github.com/ProLoser/AnythingSlider/wiki
Aufgabe
Bilder Slider für z.B. die Startseite (wird nicht in allen Templates unterstützt: z.B. bringt Bootstrap einen eigenen Slider mit sich (Carousel)
Quellcode:
<head>
<script type="text/javascript" src="<?php echo $firstparturl;?>plugins/jquery/jquery-1.7.2.min.js"></script>
<!-- AnySlider ...
//to load anyslider: you need a topic called effects-startpage, put pictures into it and load the effect in an other topic by typing: ***effects-startpage-PLACEHOLDER*** -->
<?php if (inStr("***effects-startpage-PLACEHOLDER***",$text)) {?>
<script>window.jQuery || document.write('<script src="<?php echo $firstparturl;?>plugins/any-slider/js/jquery.min.js"><\/script>')</script>
<link rel="stylesheet" href="<?php echo $firstparturl,$templatedir;?>any-slider.css">
<!-- Anything Slider -->
<link rel="stylesheet" href="<?php echo $firstparturl;?>plugins/any-slider/css/anythingslider.css">
<script src="<?php echo $firstparturl;?>plugins/any-slider/js/jquery.anythingslider.js"></script>
<!-- Anything Slider optional plugins -->
<script src="<?php echo $firstparturl;?>plugins/jquery/jquery.easing.1.2.js"></script>
<link rel="stylesheet" href="<?php echo $firstparturl;?>plugins/any-slider/css/theme-metallic.css">
<!-- Define slider dimensions here -->
<style>
#slider { width: 400px; height: 300px;}
div.anythingSlider .anythingWindow {height: 300px;}
</style>
<script>
<!-- AnythingSlider initialization -->
// DOM Ready
$(function(){
$('#slider').anythingSlider({
autoPlay : true,
buildArrows : true, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, builds a list of anchor links to link to each panel
buildStartStop : true, // If true, builds the start/stop button
theme : 'metallic',
easing : 'easeInOutBack'
});
});
</script>
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet -->
<!--[if lte IE 9]>
<link rel="stylesheet" href="<?php echo $firstparturl,$templatedir;?>anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->
<?php
//Placeholder: ***EFFECT-SLIDER-PLACEHOLDER*** replaced by anythingSlider:
$effect=loadcontent("effects-startpage");//load the Content of topic effects-startpage->
$text=str_replace("***effects-startpage-PLACEHOLDER***", "<ul id=\"slider\">$effect</ul>", $text);//put the loaded content in <ul id=..></ul>
}
?>
<!-- ... AnySlider -->
</head>
<body>
</body>
Verwendung
im Topic in dem der Any-Slider verwendet werden soll muss folgender Text in den Editor eingefügt werden, z.B. auf der Startseite:
***effects-startpage-PLACEHOLDER***
Die Bilder für Anyslider können dann im Sonderartikel: effects-startpage hinzugefügt werden