标签: supersized

我正在使用jQuery的超大插件来显示完整的背景图片.我想用图像(带jquery.click())更改数组,但不重新加载页面.链接通过AJAX将内容加载到div中,同时我想切换数组.

这是我为超大化加载的默认代码:

$.supersized({
    random: 1,
    image_protect: 0,
    slide_interval: 5000,
    transition: 1,
    transition_speed: 3000,
    vertical_center: 0,
    horizontal_center: 0,
    fit_portrait: 1,
    slides:
    [
        {image : 'imgs/bg-01.jpg'},
        {image : 'imgs/bg-02.jpg'},
        {image : 'imgs/bg-03.jpg'},
    ]
});

这是我改变数组所做的:

$('#link1').click(function() {
    // placeholder for ajax load

    $.supersized({
        random: 1,
        image_protect: 0,
        slide_interval: 5000,
        transition: 1,
        transition_speed: 3000,
        vertical_center: 0,
        horizontal_center: 0,
        fit_portrait: 1,
        slides:
        [
            {image : 'other-imgs/new-bg-01.jpg'},
            {image : 'other-imgs/new-bg-02.jpg'}
        ]
    });
});

但这只会将2个新图像添加到另一个3.如何清除第一个数组和/或替换它的内容？

我正在尝试使用Supersized在背景上进行简单的幻灯片放映,但由于某种原因,它似乎只显示一张幻灯片.

$.supersized({
        slideshow           :   1,
        autoplay            :   1,
        slide_interval      :   1000,
        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    :   1000,
        min_height          :   0,
        min_width           :   0,
        horizontal_center   :   1,
        fit_portrait        :   1,
        slides              :   images
    })

当我检查'images'中的内容时,它返回一个包含2个对象的数组,但是当我检查源代码时,我可以看到它只显示一个图像,而它通常应该显示所有图像的'ul'.

我在这个网站上的Safari上的字体有问题(vincentmorin.com).如果单击屏幕右上角的图标,您将看到下拉菜单中的字体看起来很奇怪(细而模糊).

我认为这个问题是由Supersized JS插件引起的.如果您查看未调用Supersized插件的另一个页面(例如:vincentmorin.com/Tour),菜单看起来很好.

另请参见:vincentmorin.com/ dev您可以看到只有在加载第一张幻灯片时才会出现问题.奇怪的!

有人知道是什么原因引起的吗？

谢谢.

我正在使用全屏幕背景库Supersized开发一个网站,网站开始在页面加载时显示默认图库.它完美地运作.

问题是当我尝试:

• 删除Supersized istance

• 使用ajax加载的其他数据重新加载新的istance

      var options = {
              progress_bar            :   1,
              random                  :   1,
              slide_interval          :   3000,       // 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
  
              // Components                           
              slide_links             :   'blank',    // Individual links for each slide (Options: false, 'number', 'name', 'blank')
              slides                  :   [           // Slideshow Images
                                              {image : 'http://spiaggiaolivi.webjuice.it/foto/galleria/sfondi/livedinnerparty_-07_1280x853.jpg', title : 'Image Credit: Maria Kazvan'}, …

  Run Code Online (Sandbox Code Playgroud)

我有一个jQuery插件,超级3.2.7在Chrome和Firefox中工作,但只是在IE8中不起作用.图片未加载.

以下是控制台中显示的错误.

SCRIPT5007: Unable to get value of the property 'thumb': object is null or undefined 
supersized.js?ver=3.4, line 13 character 1126

Javascript代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="assets/js/supersized.js?ver=3.4"></script>
<script src="assets/js/supersized.shutter.js?ver=3.4"></script>
<script src="assets/js/easing.js"></script>
<script>

    jQuery(function($){

        jQuery.supersized({ 
            slide_interval: 5000,
            transition: 'fade',
            transition_speed: 1000,
            new_window: 0,
            horizontal_center: 1,
            progress_bar: 0,
            mouse_scrub: 0,                             
            slides:[

                {image: 'http://localhost/assets/images/city-at-night.jpg', title: '<h1>Discover More Possibilities...</h1><h2>At Lorem Ipsum, we fulfil your ideas'},
                {image: 'http://localhost/assets/images/modern-skyscraper.jpg', title: '<h1>Explore Our Capabilities</h1><h2>Lorem Ipsum Dolor Sit Amet'},
            ]

        });
    });

</script>
<script src="assets/js/scripts.js"></script>

任何帮助,将不胜感激!

我已经设置了JQuery Plugin Supersized(http://www.buildinternet.com/project/supersized/)并从示例中复制了设置,用我自己的图像替换了他们的图像.

虽然第一张图像显示正常,但它不会转换到第二张图像,并且不显示背面和下一条箭头.

谁能指出我正确的方向？难道我做错了什么？谢谢!

设置是:

<link rel="stylesheet" type="text/css" href="css/supersized.core.css" />
<script src="js/supersized.core.3.2.1.min.js"></script>
<script src="js/jquery.easing.min.js"></script>

<script type="text/javascript">



        jQuery(function($){

        $.supersized({

        // Functionality
        slideshow:1,    // Slideshow on/off
        autoplay:1, // Slideshow starts playing automatically
        start_slide:1,  // Start slide (0 is random)
        stop_loop:0,    // Pauses slideshow on last slide
        random:0,   // Randomize slide order (Ignores start slide)
        slide_interval:3000, // Length between transitions
        transition:6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed:1000,  // Speed of transition
        new_window:1, …

我正在使用两个流行的工具Zurb基础和一个站点的Supersized jquery插件.我以前曾经用过它们一次.但是,当我一起使用时,Zurb Foundation CSS会压缩图像宽高比,这会扭曲Supersized jquery插件中的图像.当浏览器窗口缩小时,它会执行此操作.

在我以前的网站上没问题.它不会在我当前的网站上.

所以当窗户或设备狭窄时,图像会被挤压.

如果我删除了Zurb CSS,那么Supersized会保持纵横比不变,所以我知道原因与Zurb Foundation的图像重新调整大小有关.那么我如何过度使用Zurb CSS来获取Supersized中的背景图像.

网站演示可以在这里看到:http://mwildmandesign.com/IBG/index.html

这是一个网站调整大小,保持宽高比完整我需要它在我的网站上查看:http://risd.edu

我正在使用超大的jquery脚本为我的wordpress页面使用各种滑动背景.

现在我想为每个站点制作不同的幻灯片,如果请求需要php.

我的代码:

<?php if ( is_page(array('Restaurant'))) { 
    echo"<script type="text/javascript">
        jQuery(function($) {

            $.supersized({

                // Functionality
                slide_interval: 9000, // 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: 1400, // Speed of transition

                // Components                           
                slide_links: 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides: [ // Slideshow Images
                    {
                        image: 'http://www.hotel-zur-traube.eu/wp-content/themes/hotelzurtraube/images/bg.jpg',
                        title: 'Hotel-Pension-Restaurant Zur Traube in Altenahr'
                    }, {
                        image: 'http://www.hotel-zur-traube.eu/wp-content/themes/hotelzurtraube/images/bg2.jpg',
                        title: 'Hotel-Pension-Restaurant Zur …