1
我有一個畫廊，圖像大小不同。有些是肖像，有些是景觀。使用JQuery和Supersized的最新版本，是否有可能：超大幻燈片，不同尺寸/長寬比的圖像，中心圖像
a）在超大尺寸ul的100％下按比例顯示我的所有圖像，而不會截斷我的橫向格式圖像，並且所有圖像仍按比例調整大小窗口被調整大小？
b）水平居中這些圖像，並且隨着它們變得更小，水平和垂直？
還是有另一種插件，在那裏我們可以 這裏是我的電話，以超大型與WordPress的循環：
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（具體以類別內的圖像，因爲我有一個實際的全屏超大型其他地方的頁面）：
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; }