">
<?php
$count = 0;
foreach ($ss['slides_1'] as $key => $value) {
$slide_url = $value['media'];
?>
<li id="mainpage_slider_foreground-<?php
echo $count;
?>
" style="<?php
echo $count > 0 ? "display: none;" : "";
?>
">
<?php
display_slide($value, $ss_w, $ss_h);
?>
</li>
<?php
$count++;
}
?>
</ul>
<!-- foreground slider end -->
<?php
} else {
show_header_content($theHeader['content']);
}
// BP actions
do_action('bp_header');
function display_slideShow($id, $width = false, $height = false, $fromShortcode = false)
{
global $themeScripts, $jsPath, $SS_IDs, $is_responsive;
$SS_IDs = $SS_IDs ? $SS_IDs + 1 : 1;
// global ID used to increment each slide show index (prevents duplicate IDs)
// we only do these things once per page...
if (!$themeScripts['jquery-cycle']) {
// print the script include needed for this code. Not ideal, but necessary until wp_enqueue works better with shortcodes.
echo '<script type="text/javascript" src="' . $jsPath . 'libs/jquery.cycle.all.min.js"></script>';
$themeScripts['jquery-cycle'] = true;
}
// get the selected slide show
$ss = get_theme_var('slideshows,' . $id);
if (is_array($ss)) {
// ok we have a slide show, look up the columns and such
$cols = $ss['columns'];
// number of image columns
$fx = !empty($ss['transition']) ? $ss['transition'] : 'fade';
// default transition
$speed = $ss['speed'] ? $ss['speed'] : '1000';
// speed of transition
$pauseOnHover = $ss['pause_on_hover'] == true ? '1' : '0';
// pause when mouse over
$default_width = '960';
// default width
$default_height = '340';
// default height
// If width/height is specified, for example by a shortcode we use it, or default to slide show setting.
$w = $width ? $width : $ss['width'];
$h = $height ? $height : $ss['height'];
// Double check size setting. Slide show width/height can be left blank so we use default.
if (!$w) {
$w = $default_width;
}
if (!$h) {
$h = $default_height;
}
$total_width = $w;
if ($cols > 1) {
// get width for multiple image columns
$w = floor($total_width / $cols);
}
$scripts = array();
$ratio = $is_responsive ? 'data-ratio="' . round($w / $h, 3) . '"' : '';
$cols_number = $is_responsive ? 'data-cols="' . $cols . '"' : '';
echo ' <section class="slideShow" style="margin-bottom:0px;height: ' . $h . 'px;" ' . $ratio . ' ' . $cols_number . ' >';
for ($n = 1; $n <= $cols; $n++) {
// variables
$ssID = 'SS-' . $SS_IDs . '-' . $n;
$slide_fx = array();
$class = '';
// multi-column stuff
if ($cols > 1) {
// columns get special class
$class = 'class="ss-column"';
// last column width, add remainder
if ($n == $cols) {
$w += fmod($total_width, $cols);
}
}
// get the slides
$slides = $ss['slides_' . $n];
if (is_array($slides)) {
// create the container
//echo '<div id="'. $ssID .'" '.$class.' style="height: '.$h.'px;" '.$ratio.'>';
echo '<div id="' . $ssID . '" ' . $class . ' style="width: ' . $w . 'px;height: ' . $h . 'px;" ' . $ratio . '>';
// print each slide
foreach ($slides as $slide) {
echo '<div>';
// echo '<div style="width: '.$w.'px; height: '.$h.'px; overflow: hidden;">';
display_slide($slide, $w, $h);
echo '</div>';
$slide_fx[] = $slide['transition'] ? $slide['transition'] : $fx;
// if this slide has a custom transition, else use default.
}
// close the container
echo '</div> <!-- END "' . $ssID . '" -->';
// add variables to the JavaScript array
$fx_string = implode(",", $slide_fx);
$scripts[$ssID] = array('fx' => $fx_string, 'timing' => $ss['timing'] . '000', 'speed' => $speed, 'pause' => $pauseOnHover);
} else {
_e('No slides.', THEME_NAME);
}
}
echo ' </section> <!-- END id="SlideShow" -->';
echo '<div id="' . $ssID . '_nav" class="slideShowPager"></div>';
// add the JS for the slide show to initialize
echo '<script type="text/javascript"> jQuery(document).ready(function($) { ';
$jsID = str_replace('-', '_', $id);
// multiple slide shows so we do a few things differeng.
foreach ($scripts as $key => $value) {
$slideTimeout = $value['timing'];
// multi-column specific items
if (count($scripts) > 1) {
$slideTimeout = '0';
// 1) Stopped at load.
$timing = $value['timing'];
// 2) Timing and "next" transition triggered by interval function
}
// Extra parameters for cycle in responsive layouts
$responsiveCycle = $is_responsive ? ",slideExpr:'.slide',slideResize:0" : "";
// create slide show (or column) JavaScript
echo '$("#' . $key . '").filter(":first").waitForImages(function() {';
// allow all images to load before starting slide show
echo '$("#' . $key . '").cycle({ before: beforeSlide, after: afterSlide, fx:"' . $value['fx'] . '",timeout:' . $slideTimeout . ',speed:' . $value['speed'] . ',pause:' . $value['pause'] . $responsiveCycle . ',randomizeEffects:0, pager:"#' . $key . '_nav"});';
echo '});';
}
// create a JS function to access slide show. if multiple columns this function will trigger "next slide" to prevent sync issues.
echo 'SS_' . $jsID . ' = $("#' . implode(',#', array_keys($scripts)) . '");';
// advance multi-column slides using "setInteral"
if (count($scripts) > 1) {
echo 'setInterval("SS_' . $jsID . '.cycle(\'next\');", ' . $timing . ');';
}
echo '}); </script>';
}
}