Processwire - Vegas Slideshow

Vegas Slideshow in Processwire Integrieren Beispiele

Siehe auch

• JavaScript - Vegas Slider

Beispiel 1

Header

<link rel="stylesheet" href="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.css" type="text/css" media="screen">

Footer

<script src="<?php echo $config->urls->templates?>vendors/vegas/vegas.min.js" type="text/javascript" charset="utf-8"></script>

Main JavaScript

Wir prüfen ob die Funktion initVegas auf der Seite vorhanden ist bevor wir versuchen sie auszuführen. So gibt es keine Fehler auf Seiten, auf denen die Funktion nicht genutzt wird.

(function($){ //create closure so we can safely use $ as alias for jQuery
  $(document).ready(function(){
    // init Vegas
    if (ifNamespaceFunctionExists("initVegas") ) {// init Vegas Slider if av.
      initVegas();
    }
  });
})(jQuery);

function ifNamespaceFunctionExists(myFnc){
  //var myFnc = "foo.bar.fun";

  var nameParts = myFnc.split(".");  //split up the string into the different levels
  var fnc = window;  //set it to window
  for(var i=0;i<nameParts.length;i++){  //loop through each level of the namespace
      fnc = fnc[nameParts[i]];
      if(!fnc){  //make sure it exists, if not exit loop
          fnc = null;
          break;
      }
  }
  if( fnc && typeof fnc === "function" ) {  //make sure it exists and it is a function
      return true;  //or execute it
  }else return false;
}

CSS

.stretch-height{
  position: relative;
  height: 100%;
}

.nav-slider{
  color: white;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.nav-slider .prev,
.nav-slider .next{
  position: absolute;
  top:0;
  bottom: 0;
  width:50%;
  cursor: pointer;
}
.nav-slider .prev{
  left: 0;
  padding-left: 1em;
}
.nav-slider .next{
  right: 0;
  text-align: right;
  padding-right: 1em;
}
.nav-slider i{
  position: relative;
  top: 50%;
  margin-top: -2em;
}

Processwire Template

/*
 * Vegas Slideshow
 * creates markup for vegas slideshow inclusive script
 */
$out = '';
$slides = array();
$width = 1600; // todo -> make this accessible via textbox in admin

foreach($page->images as $image){
  $myImage = $image->width($width);
  $slides[] = '{ src: "'.$myImage->url.'" }';
}

$vegasMarkup = '<div class="col-md-12 vegas stretch-height">&nbsp;</div>';
$vegasMarkup .= '
<script type="text/javascript">
function initVegas(){
  $slider = $(".vegas");
  $slider.vegas({
    delay:7000,
    timer:false,
    transition: "fade",
    transitionDuration: 750,
    animation: "random",
    slides: ['.implode($slides,',').']
  });
  $("span.next").click(function(){
    $slider.vegas("options", "transition", "slideLeft2");
    $slider.vegas("next");
    $slider.vegas("options", "transition", "fade");
  });
  $("span.prev").click(function(){
    $slider.vegas("options", "transition", "slideRight2");
    $slider.vegas("previous");
    $slider.vegas("options", "transition", "fade");
  });
}
// if loaded via ajax call initVegas() after receiving data
</script>

';

/*
 * Slide Navigation
 */
$navSlideMarkup = '
<div class="nav-slider">
  <span class="prev"><i class="fa fa-angle-left fa-4x" aria-hidden="true"></i></span>
  <span class="next"><i class="fa fa-angle-right fa-4x" aria-hidden="true"></i></span>
</div>';


$content = '';
$content = '
<div id="main" class="stretch-height">
  <!-- ajax Content -->
  '.$navSlideMarkup.'
  <div class="row bg-image stretch-height">
    '.$vegasMarkup.'
  </div><!-- row end -->

  <!-- ajax content end -->

</div><!-- main end -->' ;