Question

我有一个简单的Cycle2幻灯片，它从服务器文件夹中读取图像，并以网页为中心显示它们的全高。图像通过Ajax调用加载，该调用返回它找到的任何新文件，在页面加载时调用，随后以编程的间隔调用。我使用会话变量来跟踪当前使用的文件。我使用Cycle2“添加”命令和“中心”插件，因为我有不同大小的图像要显示。除了在“循环”初始化之后，添加的任何新幻灯片都不居中... 我知道Cycle2添加了内联样式，但它只在初始化时将图像居中。应该可以在添加新幻灯片时以编程方式调用centerHoriz和centerVert但是无法解决如何与'add'命令同时进行的操作？这是我的代码：

<?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>

Cycle2添加和居中新幻灯片

0 个答案: