是否可以向flexslider添加一个选择器?

时间:2013-08-27 18:17:30

标签: javascript jquery flexslider

我想知道,是否可以在Wootheme的flexslider中添加另一个选择器?在不同的页面上,我为幻灯片使用了不同的样式,这就是为什么我要添加到$.flexslider.defaults之类的内容:

selector1:".my_slides > li",

到flexslider中的选择器,而不删除默认值

selector:".slides > li".  

我尝试过像

这样的事情
selector:".slides > li", ".my_slides > li", 

但它不起作用。

这是我使用.slides和.my_slides的代码(我不知道是否存在差异,但我在Wordpress中使用它):

/* *********** (12) Display Post Format ******** */

function swm_display_post_format() {

    $format = get_post_format();

    if(empty($format)) {
        $format = 'standard';
    }
    if( $format == 'standard' || $format == 'gallery' || $format == 'image' || $format == 'video' ) {

        get_template_part( 'includes/' . $format );
    }
}



/* ************* (13) Blog Gallery Slider ************* */

if ( !function_exists( 'swm_blog_gallery' ) ) {
    function swm_blog_gallery($postid, $image_size) { ?>
        <script type="text/javascript">
            jQuery(document).ready(function($){

                if ( $.browser.msie ){
                    if($.browser.version == '8.0') {
                         $("#flex-<?php echo $postid; ?>").flexslider({
                            slideshow: false,
                            controlNav: true,
                            smoothHeight: true,
                            start: function(slider) {
                                slider.container.click(function(event) {
                                    if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                });
                            }
                        });
                    }
                }


               $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                $("#flex-<?php echo $postid; ?>").flexslider({
                    slideshow: false,
                    controlNav: true,
                    smoothHeight: true,
                    start: function(slider) {
                        slider.container.click(function(event) {
                            if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                        });
                    }
                });
               });
            });
        </script>
        <?php

        $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
        $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

        echo "<div class='pf_featured_img pf_l_img'><div class='swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";


        if ( $gal_images ) {
            echo "<ul class='slides'>";

            foreach ( $gal_images as $gal_image ) {
               //   $swm_gal_image = "{$gal_image['url']}";
                $swm_gal_image = swm_resize($gal_image['url'], 635, 425,  $meta_gallery_img_height, true,'c',true);
                    echo "<li><img src='$swm_gal_image' alt='' /></li>";
            }
            echo '</ul>';
        }
        echo "</div></div></div>";
    }
}





/* **************** (12) Display MY Post Format **************************** */

function swm_display_my_post_format() {

    $format = 'gallery1';

    get_template_part( 'includes/' . $format );
}



/* ***********************(13) Blog MY Gallery Slider *********************** */

if ( !function_exists( 'swm_my_blog_gallery' ) ) {
    function swm_my_blog_gallery($postid, $image_size) { ?>
        <script type="text/javascript">
            jQuery(document).ready(function($){

                if ( $.browser.msie ){
                    if($.browser.version == '8.0') {
                        $("#flex-<?php echo $postid; ?>").flexslider({
                            slideshow: true,
                            controlNav: true,
                            smoothHeight: true,
                            start: function(slider) {
                                slider.container.click(function(event) {
                                    if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                });
                            }
                        });
                    }
                }


                $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                    $("#flex-<?php echo $postid; ?>").flexslider({
                        slideshow: true,
                        controlNav: true,
                        smoothHeight: true,
                        start: function(slider) {
                            slider.container.click(function(event) {
                                if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                            });
                        }
                    });
                });
            });
        </script>
        <?php

        $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
        $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

        echo "<div class='pf_featured_img pf_l_img'><div class='my_swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";

        if ( $gal_images ) {
            echo "<ul class='my_slides'>";

            foreach ( $gal_images as $gal_image ) {
                //  $swm_gal_image = "{$gal_image['url']}";
                $swm_gal_image = swm_resize($gal_image['url'], 510, 410,  $meta_gallery_img_height, true,'c',true);
                echo "<li><img src='$swm_gal_image' alt='' /></li>";
            }
            echo '</ul>';
        }
        echo "</div></div></div>";
    }
}

1 个答案:

答案 0 :(得分:2)

试试这个:

selector: ".slides > li, .my_slides > li"

此语法:

$('selector1', 'selector2')

选择与selector1匹配的元素,但仅选择与selector2匹配的元素后代的元素。

此语法:

$('selector1, selector2')

选择与selector1匹配的元素和与selector2匹配的元素。我假设插件的工作方式相同。