1

我有一个画廊,里面有不同尺寸的图片。有些是纵向的,有些是横向的。使用最新版本的 JQuery 和 Supersized,是否可以:

a)以#supersized ul的100%按比例显示我的所有图像,而不会切断我的横向格式图像,并且在调整窗口大小时所有图像仍按比例调整大小?

b) 将这些图像水平居中,随着它们变小,水平和垂直居中?

或者是否有其他插件我们可以这是我对使用 Wordpress 循环的 Supersized 的调用:

    jQuery(document).ready(function($){

                        $.supersized({

                            // Functionality
                            slideshow               :   1,
                            start_slide             :   1,          // Start slide (0 is random)
                            new_window              :   1,          // Image links open in new window/tab
                            image_protect           :   1,          // Disables image dragging and right click with Javascript
                            transition              :   6,  
                            autoplay                :   1,
                            slide_interval          :   7000,
                            transition_speed        :   1000,                                  
                            // Size & Position                         
                            min_width               :   0,          // Min width allowed (in pixels)
                            min_height              :   0,          // Min height allowed (in pixels)
                            vertical_center         :   0,          // Vertically center background
                            horizontal_center       :   0,          // Horizontally center background
                            fit_always              :   1,          // Image will never exceed browser width or height (Ignores min. dimensions)
                            fit_portrait            :   1,          // Portrait images will not exceed browser height
                            fit_landscape           :   1,          // Landscape images will not exceed browser width

                            // Components
                            thumb_links             :   1,
                            thumbnail_navigation    :   1,
                            slide_links             :   0,
                            keyboard_nav            :   1,
                            slides                  :   [       

                            <?php 
                            $category = get_queried_object();
                            $cid = $category->term_id;
                            $args = array('post_type'=>'photo', 'cat'=>$cid);
                            $i = 0;
                            $posts = query_posts( $args );
                            $count = count($posts) - 1;

                            $q = new WP_Query( $args );

                            if ($q->have_posts()) : while ($q->have_posts()) : $q->the_post(); 
                                        $post_thumbnail_id = get_post_thumbnail_id();
                                        $featured_src = wp_get_attachment_image_src( $post_thumbnail_id, 'square' );

                                        if ($i != $count) {     
                                            echo "{ image : '". $featured_src[0] ."', title :''},";
                                        } else {
                                            echo "{ image : '". $featured_src[0] ."', title :''}";
                                        }
                                        $i++;
                                        endwhile; 
                                         ?>
                            ],
                            progress_bar: 0

                        });
                    });
                </script>

这是我的 CSS(特定于类别图像,因为我在页面的其他地方有一个实际的全屏 Supersized):

    body.category #supersized-loader { margin:auto 0; position:fixed; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
body.category #supersized {left:240px;display:block; position:fixed; margin:0 auto; overflow:hidden; z-index:1; height:100%; width:100%; /*max-width:1280px;max-height:720px;*/}
body.category #supersized img {width:auto; height:auto; position:relative; display:none; outline:none; border:none;}
body.category #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
body.category #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }         /*Quality*/

body.category #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#272727; }
body.category #supersized a { width:100%; height:100%; display:block; }
body.category #supersized li.prevslide { z-index:-20; }
body.category #supersized li.activeslide { z-index:-10; }
body.category #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
body.category #supersized li.image-loading img{ visibility:hidden; }
body.category #supersized li.prevslide img, body.category #supersized li.activeslide img{ display:inline; }
4

0 回答 0