jQuery UIでソート可能な画像ビューアー/エンラージャーを使用しています。かなりの数の画像がある場合、それらに対応するためにウィンドウがスクロール可能になります。この場合、ある場所から別の場所にドラッグすると画像がぎくしゃくします。表示されるスクロールバーもジャンプします。
私がIE以外のすべてで働いていた元のCSS。次に、いくつかの新しい CSS を生成し、すべてのブラウザーで動作するようになりましたが、ビューアーの領域を比較的小さく保つ必要があります。これは、大量の画像がある場合には理想的ではありません (つまり、一部が完全に非表示になり、ドラッグが困難になります)。ビューアの実際の領域がウィンドウの境界を超えた場合にのみ発生するようです。私は CSS または jQuery を介したソリューションに対してオープンです。CSS を最初に試した b/c は、私がよく知っていることです。ありがとう！
まず、jQuery は次のとおりです。
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
if (agentID) {
$("#gallery, #viewer").sortable({
connectWith: ".images",
items: "div",
forcePlaceholderSize: true,
forceHelperSize: true,
receive: function (event, ui) {
switch (ui.item.parent().attr("id")) {
case "viewer":
ui.item.animate({ height: "250px", width: "250px" });
break;
case "gallery":
ui.item.animate({ height: "96px", width: "96px" });
break;
}
}
}).disableSelection();
}
else {
$("#gallery, #viewer").sortable({
connectWith: ".images",
items: "div",
forcePlaceholderSize: true,
forceHelperSize: true,
receive: function (event, ui) {
switch (ui.item.parent().attr("id")) {
case "viewer":
ui.item.css({ height: "525px", width: "auto" });
break;
case "gallery":
ui.item.css({ height: "150px", width: "auto" });
break;
}
}
}).disableSelection();
}
});
IE 以外のすべてにジャンプするわけではない CSS:
html, body {min-height:100%;}
.hangingIndent{ padding-left:22px; text-indent:-22px;}
#gallery {width: 95%; min-height: 100px; overflow:auto; *overflow:inherit; margin-bottom: 10px;}
*html #gallery {height: 100px; }
#gallery .image {float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
#gallery .image img { width: auto; height: 148px; border: solid 1px black; cursor: move; }
#viewer {width: 95%; min-height: 250px; background-color:#A3A3A3; padding: 1%; overflow:auto; *overflow:inherit;}
* html #viewer {height: 250px;}
#viewer .image {float: left; height: 325px; width: auto; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
#viewer .image img {width: auto; height: 525px; border: solid 3px white; cursor: move; }
#viewer h4 {line-height: 1em; margin: 0 0 0.4em; color:#000;}
また、拡大された画像以外はすべてスクロール可能な領域内にある CSS は次のようになります。
html, body {min-height:100%;}
.hangingIndent{ padding-left:22px; text-indent:-22px;}
#gallery
{
width: 95%;
min-height: 100px;
height: 100px;
overflow: auto;
margin-bottom: 10px;
}
#gallery {}
#gallery .image {float: left; width: auto; height: 150px; padding: 0; margin-right: 10px; text-align: center; background-color:#e2e2e2;}
#gallery .image img { width: auto; height: 148px; border: solid 1px black; cursor: move; }
#viewer
{
width: 95%;
height: 250px;
min-height: 250px;
background-color: #A3A3A3;
padding: 1%;
overflow: auto;
}
#viewer .image
{
float: left;
height: 325px;
width: auto;
padding: 0;
margin-right: 10px;
text-align: center;
background-color: #e2e2e2;
border:none;
}
#viewer .image img
{
width: auto;
height: 525px;
border: solid 3px white;
cursor: move;
}
#viewer h4 {line-height: 1em; margin: 0 0 0.4em; color:#000;}
そしてHTML：
<div id="gallery" class="images">
<div class="ui-corner-tr image"><img src="../../../../../images/Fig267b.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9a.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9b.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/Question_9c.jpg" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray1.JPG" alt="" title="" /></div>
<div class="ui-corner-tr image"><img src="../../../../../images/xray2.JPG" alt="" title="" /></div>
</div>
<div id="viewer" class="images">
<h4>Drag the images to the area above to remove them from the viewing tool.</h4>
</div>