jquery超级需要在播放幻灯片后重新加载页面

时间:2013-10-22 03:34:25

标签: javascript php jquery supersized

我正在运行Supersized Slideshow,它运行良好,但我需要在显示幻灯片后刷新/重新加载页面。图片是从我的服务器动态提取的,可以在播放幻灯片时添加新图片。我想让它播放图片,然后重新加载,以便它可以检查新图片。这是我正在使用的代码

//php code to get pictures

$picture = array();
    foreach( $rows as $row )
    {
    $picture[] = $row["photo"];
    }

    $newarray = array();
    for ($key_Number = 0; $key_Number < count($picture); $key_Number++) {
    $newarray[] = "{image : '".$path . "/" . $album . "/" . $picture[$key_Number]."'}";

// Then in my Html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   4000,       // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   700,        // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)                                        
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images

                                            <?php echo implode(',', $newarray) ?>
                                            ]

            });
        });

    </script>
    }

我在考虑使用window.location.reload();或者某些功能,但我不知道如何实现它或使其工作。谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

这是我找到的解决方案。有点黑客但工作得很好。我设置了一个计时器功能来计算幻灯片的长度,然后刷新页面。由于我的幻灯片是从数据库加载的,所以我使用php来计算长度。如果您已经对图片链接进行了硬编码,那么您已经知道自己有多少但不需要刷新页面......

PHP

$count = $stmt->rowCount(); // counts how many pictures will be displayed
$timer = $count * 4700; // slide length is 4000 and transition is 700

然后在我的超级功能

<script type="text/javascript">

         jQuery(function($){
            var interval = 4000,
            speed = 700,
            slideArray = [<?php echo implode(',', $newarray) ?>];  // add your slides to this array


            $.supersized({

                // Functionality
                slide_interval          :   interval,       // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   speed,      // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)                                        
                image_protect           :   1,          // Disables image dragging and right click with Javascript
                stop_loop               :   false,      // Pauses slideshow on last slide
                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   slideArray      

            });

        });
    </script>


// here is where we reload the page
// I pass the information needed to pull the pictures from the database
// and in my php I check for a $_GET['email'] etc, etc, etc. to start the
// process over. It then finds new pictures, counts them, displays them. 
// Hopefully this will help someone else

        <script>
            setTimeout(function() {
                  <?php echo 'window.location.href = "http://www.myurl.com/slideshow/slideshow.php?email='.urlencode($email).'&album='.urlencode($album).'&directory='.urlencode($directory).'&dir2='.urlencode($dir2).'"'; ?>

            },<?php echo $timer; ?>);
        </script>