超大jQuery插件无法在IE7 IE8中加载图像

时间:2013-08-20 17:54:40

标签: jquery

请注意:我已尝试删除新用户通常遇到问题的上一个图像文件路径修复中的逗号。它还没有解决我的问题。

我使用Supersize jQuery插件的网站没有在IE7和IE8中加载图片。它适用于所有浏览器中的其他任何地方。我注意到使用IE调试工具栏强制IE8的怪癖模式使它加载图像,就像它应该的那样。我在IE7 / IE8中得到的是一个灰色屏幕和图像加载器动画,没有我可以使用Firebug和IE调试工具栏检测到的错误消息。我在Wordpress网站中使用它,但不是Wordpress插件,而是使用jQuery插件。我的超级代码在这里:

<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

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/Donnie-S_Home_Duo_NAME.jpg'},
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/Tom-M_Home_Duo_NAME.jpg'},                                                      
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/Jason-S_Home_Duo_NAME.jpg'},
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/James-G_Home_Duo_NAME.jpg'},                                                        
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/RDJoseph_Home_Duo_NAME-3.jpg'},
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/Paul-D_Home_Duo_NAME.jpg'},
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/Steven-H_Home_Duo_NAME.jpg'},
                                                    {image : 'http://boultonweb.com/dennis-sparrow/wp-content/themes/SDMTheme/superstuff/slides/JMTHomas_Home_Duo_NAME.jpg'}                                                    
                                            ]                                           

            });
            if(window.innerWidth <= 765){
                all_slides = [ all_slides.shift() ];
            }else{
                //only need controllers for multiple slides
                $("#slider article:first-child").addClass('active');
            }

        });

    </script>

有没有人看到我的任何新手错误可能阻止它在IE7和IE8中运行或有疑难解答建议甚至是变通方法?我一直在验证html5 / css删除错误,但到目前为止这没有任何实际效果。任何帮助将不胜感激。

-c -

2 个答案:

答案 0 :(得分:0)

IE7&amp; IE8不支持window.innerWidth,请使用jQuery $(window).innerWidth()

答案 1 :(得分:0)

超大型演示在IE中完美运行 - http://buildinternet.com/project/supersized/3/default.html

如果您在超大型jquery插件上阅读更多内容 - http://buildinternet.com/2010/11/supersized-3-0-full-screen-background-slideshow-jquery-plugin/

另外请确保您拥有最新的jquery插件......

其他人遇到同样的问题,在结束标记后缺少逗号:

<script type=&#34;text/javascript&#34;>  
    $&#40;function&#40;&#41;{
        $.fn.supersized.options = {  
            startwidth&#58; 640,  
            startheight&#58; 480,
            vertical_center&#58; 1,
            slideshow&#58; 1,
            navigation&#58; 0,
            thumbnail_navigation&#58; 0,
            transition&#58; 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
            pause_hover&#58; 0,
            slide_counter&#58; 0,
            slide_captions&#58; 0,
            slide_interval&#58; 15000,
            slides &#58; &#91;
                {image &#58; &#39;slides/background_3.jpg&#39;, title &#58; &#39;City Clock Tower&#39;},
                {image &#58; &#39;slides/background_1.jpg&#39;, title &#58; &#39;City Clock Tower&#39;},
                {image &#58; &#39;slides/background_2.jpg&#39;, title &#58; &#39;City Clock Tower&#39;},
                {image &#58; &#39;slides/background_4.jpg&#39;, title &#58; &#39;City Clock Tower&#39;}
            &#93;
        };
        $&#40;&#39;#supersized&#39;&#41;.supersized&#40;&#41;; 
    }&#41;;
</script>