jquery 超大小显示 IE 错误

jquery Supersize show IE error

本文关键字:IE 错误 显示 jquery      更新时间:2023-09-26

我正在尝试将超大的Jquery集成到Wordpress中。

我知道那里有一个WP插件,但更愿意手动执行此操作,因为我正在为幻灯片使用自定义标题,自定义模板和wp电子商务产品帖子(难以与插件集成)

一切都很好,除了由于最后一个幻灯片逗号未被删除,我在 IE 中出现错误。

IE 错误是:消息:"base.options.slides[...]。thumb' 为空或不是对象

====

===============

编辑:我更新了下面的代码以反映Naor的答案 - 他的建议非常有效(谢谢Naor!!

<!--
Supersized 3.2.7 - Fullscreen Background jQuery Plugin
www.buildinternet.com/project/supersized
By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
Released under MIT License / GPL License
    Adapted for Wordpress (WP Supersized 3.0.2) by Benoit De Boeck / World in my Eyes (www.worldinmyeyes.be)
-->    
    <script type="text/javascript"> 
var slides=[];
<?php $my_query = new WP_Query
( array(
        'post_status' => 'publish',
        'post_type'   => 'wpsc-product',
  //'numberposts' => 5,
        'orderby'     => 'title',
    'order'       => 'ASC',
        // 'wpsc_product_category'=>'phones, laptops', // leave this out if you want to show all, or comma separate to specify categories
    'showposts'   => 50 )); 
while( $my_query->have_posts() ) : $my_query->the_post();  ?>
slides.push({image : '<?php echo wpsc_the_product_image(); ?>', title : '<div class="slidecaptioninside"><a href="<?php echo wpsc_the_product_permalink(); ?>"><?php echo wpsc_the_product_title(); ?></a> <br /><div class="slidedescription"><?php $excerpt = wpsc_the_product_description(); echo string_limit_words($excerpt,5)."...";?>  <br />Priced from- <?php echo wpsc_the_product_price(); ?> - <a href="<?php echo wpsc_the_product_permalink(); ?>">find out more</a></div>', url : '<?php echo wpsc_the_product_permalink(); ?>'});
<?php endwhile; ?>
jQuery(document).ready(function($) {
            $.supersized({
                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                slide_interval          :   6000,   //Length between transitions
                random                  :   0,
                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        :   800,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                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
                image_path              :   '<?php bloginfo('template_url'); ?>/supersized/img/', //Default image path
                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   1,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width
                //Components
                //navigation              :   1,        //Slideshow controls on/off
                thumbnail_navigation    :   1,      //Thumbnail navigation
                thumb_links             :    1,
                slide_counter           :   1,      //Display slide numbers
                slide_captions          :   1,      //Slide caption (Pull from "title" in slides array)
                slides                  :   slides,

                slide_links     : 'blank',
                progress_bar    : 1,                        
                mouse_scrub     : 1                                             
            }); 
        });
    </script>

我不熟悉 php,但您可以在超大初始化之前准备幻灯片数组,如下所示:

var slides=[];
<?php while( $my_query->have_posts() ) : $my_query->the_post();  ?>
slides.push({image : '<?php echo wpsc_the_product_image(); ?>', title : '<div class="slidecaptioninside"><a href="<?php echo wpsc_the_product_permalink(); ?>"><?php echo wpsc_the_product_title(); ?></a> <br /><div class="slidedescription"><?php $excerpt = wpsc_the_product_description(); echo string_limit_words($excerpt,5)."...";?>  <br />Priced from- <?php echo wpsc_the_product_price(); ?> - <a href="<?php echo wpsc_the_product_permalink(); ?>">find out more</a></div>', url : '<?php echo wpsc_the_product_permalink(); ?>'});
<?php endwhile; ?>   

然后初始化超大:

   $.supersized({
                 ....
                 ....
                 ....
                 slides: slides,
                 ....
                 ....
    });

希望这是有帮助的。

祝你好运!