さまざまなサイズの画像を含むギャラリーがあります。いくつかは縦向きで、いくつかは横向きです。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です（ページのどこかに実際のフルスクリーンスーパーサイズがあるので、カテゴリ画像に固有です）：
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; }