I've got a simple Cycle2 slideshow that reads images from a server folder and displays them full height and centered on a web page. The images are loaded through an Ajax call which returns any new files it finds, it's called at page load and subsequently at programmed intervals. I use a session variable to keep track of the currently used files. I use the Cycle2 "add" command and the "Center" add-on as I have different sized images to display. It works nicely except that after 'cycle' initialization any new slides added are not centered... I know that Cycle2 adds inline styling but it only centers the images on initialization. It should be possible to call the centerHoriz and centerVert programatically when adding the new slides but can't work out how to at the same time as the 'add' command? Here is my code:
<?php
/*
* Template Name: Slideshow
*/
?>
<?php
session_start();
$_SESSION['curfiles'] = array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style type="text/css">
.slideshow {
width: 80%;
margin: auto;
border: 1px solid #bbb;
background: #ffc;
}
@media screen and (max-width: 1164px) {
.label {font-size: 2vw;}
.textbox {font-size: 1.5vw;}
.cycle-slide {width:100%;}
.slideshow {width: 95%;}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<script type="text/javascript">
function loadSlides() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response) {
var temp_images = eval("(" + response + ")");
for(ti in temp_images){
$('.slideshow').cycle('add','<img src="/files/display/' + temp_images[ti] + '" alt="">');
}
});
}
window.setInterval(function(){loadSlides()}, 5000);
jQuery(document).ready(function($){
loadSlides();
$('.slideshow').cycle(
{
next: '.slideshow'
});
});
</script>
</head>
<body>
<div class="slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="800000"
data-cycle-speed="700"
data-cycle-center-horz="true"
data-cycle-center-vert="true"
data-cycle-pause-on-hover="true"
>
</div>
</body>
</html>