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