cycle2_carousel_pager

cycle2_carousel_pager.php

$preset = new stdClass();
$preset->disabled = FALSE; /* Edit this to true to make a default preset disabled initially */
$preset->api_version = 1;
$preset->name = 'cycle2_carousel_pager';
$preset->title = 'Cycle2 Carousel Pager';
$preset->html = '<div id="slideshow-1">
    <p>
        <a href="#" class="cycle-prev">&laquo; prev</a> | <a href="#" class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-tmpl-regex="\\[\\[((\\.)?.*?)\\]\\]"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-1 .cycle-prev"
        data-cycle-next="#slideshow-1 .cycle-next"
        data-cycle-caption="#slideshow-1 .custom-caption"
        data-cycle-caption-template="Slide [[slideNum]] of [[slideCount]]"
        data-cycle-fx="tileBlind"
        >
        {{#data}}
      	<div><img src="{{image}}" width="500" height="500"></div>
      	{{/data}}
    </div>
</div>

<div id="slideshow-2">
    <div id="cycle-2" class="cycle-slideshow"
        data-cycle-tmpl-regex="\\[\\[((\\.)?.*?)\\]\\]"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-2 .cycle-prev"
        data-cycle-next="#slideshow-2 .cycle-next"
        data-cycle-caption="#slideshow-2 .custom-caption"
        data-cycle-caption-template="Slide [[slideNum]] of [[slideCount]]"
        data-cycle-fx="carousel"
        data-cycle-carousel-visible="5"
        data-cycle-carousel-fluid=true
        data-allow-wrap="false"
        >
      	{{#data}}
        <div><img src="{{image_1}}" width="100" height="100"></div>
      	{{/data}}
    </div>

    <p>
        <a href="#" class="cycle-prev">&laquo; prev</a> | <a href="#" class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
</div>

<script>
  (function($){
    
    jQuery(document).ready(function($){

      var slideshows = $(\'.cycle-slideshow\').on(\'cycle-next cycle-prev\', function(e, opts) {
          // advance the other slideshow
          slideshows.not(this).cycle(\'goto\', opts.currSlide);
      });

      $(\'#cycle-2 .cycle-slide\').click(function(){
          var index = $(\'#cycle-2\').data(\'cycle.API\').getSlideIndex(this);
          slideshows.cycle(\'goto\', index);
      });

    });  
    
  })(jQuery);

</script>';
$preset->css = '#cycle-1 div { width:100%; }
#cycle-2 .cycle-slide { border:3px solid #fff; }
#cycle-2 .cycle-slide-active { border:3px solid #004; }

#slideshow-1,#slideshow-2 { width: 50%; max-width: 600px; margin: auto }
#slideshow-2 { margin-top: 10px }
.cycle-slideshow img { width: 100%; height: auto; display: block; }

';
$preset->ext_css = '';
$preset->ext_js = 'http://malsup.github.io/jquery.cycle2.js
http://malsup.github.io/jquery.cycle2.carousel.js
http://malsup.github.io/jquery.cycle2.tile.js';
$preset->html_compiled = '<?php return function ($in) {
    $cx = Array(
        \'flags\' => Array(
            \'jstrue\' => false,
            \'jsobj\' => false,
        ),
        \'scopes\' => Array($in),
        \'path\' => Array(),

    );
    ob_start();echo \'<div id="slideshow-1">
    <p>
        <a href="#" class="cycle-prev">&laquo; prev</a> | <a href="#" class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
    <div id="cycle-1" class="cycle-slideshow"
        data-cycle-tmpl-regex="\\[\\[((\\.)?.*?)\\]\\]"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-1 .cycle-prev"
        data-cycle-next="#slideshow-1 .cycle-next"
        data-cycle-caption="#slideshow-1 .custom-caption"
        data-cycle-caption-template="Slide [[slideNum]] of [[slideCount]]"
        data-cycle-fx="tileBlind"
        >
        \',LCRun::sec(\'data\', $cx, $in, false, function($cx, $in) {echo \'
      	<div><img src="\',htmlentities($in[\'image\'], ENT_QUOTES),\'" width="500" height="500"></div>
      	\';}),\'
    </div>
</div>

<div id="slideshow-2">
    <div id="cycle-2" class="cycle-slideshow"
        data-cycle-tmpl-regex="\\[\\[((\\.)?.*?)\\]\\]"
        data-cycle-slides="> div"
        data-cycle-timeout="0"
        data-cycle-prev="#slideshow-2 .cycle-prev"
        data-cycle-next="#slideshow-2 .cycle-next"
        data-cycle-caption="#slideshow-2 .custom-caption"
        data-cycle-caption-template="Slide [[slideNum]] of [[slideCount]]"
        data-cycle-fx="carousel"
        data-cycle-carousel-visible="5"
        data-cycle-carousel-fluid=true
        data-allow-wrap="false"
        >
      	\',LCRun::sec(\'data\', $cx, $in, false, function($cx, $in) {echo \'
        <div><img src="\',htmlentities($in[\'image_1\'], ENT_QUOTES),\'" width="100" height="100"></div>
      	\';}),\'
    </div>

    <p>
        <a href="#" class="cycle-prev">&laquo; prev</a> | <a href="#" class="cycle-next">next &raquo;</a>
        <span class="custom-caption"></span>
    </p>
</div>

<script>
  (function($){
    
    jQuery(document).ready(function($){

      var slideshows = $(\\\'.cycle-slideshow\\\').on(\\\'cycle-next cycle-prev\\\', function(e, opts) {
          // advance the other slideshow
          slideshows.not(this).cycle(\\\'goto\\\', opts.currSlide);
      });

      $(\\\'#cycle-2 .cycle-slide\\\').click(function(){
          var index = $(\\\'#cycle-2\\\').data(\\\'cycle.API\\\').getSlideIndex(this);
          slideshows.cycle(\\\'goto\\\', index);
      });

    });  
    
  })(jQuery);

</script>\';return ob_get_clean();
}
?>';