0

だから基本的に私は小さなサムネイルの行を（div内に）隠した大きな画像を保持する別のdivのすぐ下に、親指をクリックすると現在の画像がjqueryから.hide（）を取得し、クリックしたものは.show()'n、非常にシンプルで機能します。唯一の問題 - その画像が一瞬消えて、次の画像が表示される前に、プレビュー div が空になり、すべてのサムネイルが div の場所まで移動します! どうすれば防ぐことができますか？

スクリプトは次のとおりです: $(document).ready(function() {

var current = '#s0';
var last = '#s0';

$(current).show();

$(".thumb").click(function(){
    last = current;
    current = '#s'+$(this).attr('id');
    $(last).hide(1000);
    $(current).show(1000);
    //$('#tmp').text(current+' / '+last);
});

});

ページ：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">        </script>
<script src="scripts/scripts.js"></script>
<link rel='stylesheet' href='styles/default.css' type='text/css'>

<html>
<title>Playground</title>
<head>
    <h2>this is a test...</h2>
</head>
<body>
    <?php
    $i = 0;
    $images = glob("./images/*.jpg");

    echo '<div width=600 height=600 class=\'preview\' id=\'slides\'>';
    foreach($images as $image)
    {
    echo '<img class=\'slide\' id=\'s'.$i.'\' src=\''.$image.'\' width=600 height=600 />';
    $i++;
    }
    echo '</div>';

    $i = 0;
    echo '<div class=\'thumbs\' id=\'thumbs\'>';
    foreach($images as $image)
    {
    echo '<img class=\'thumb\' id=\''.$i.'\' src=\''.$image.'\' width=100      height=100 />&nbsp';
    $i++;
    }
    echo '</div>';
    echo '<div id=\'tmp\'/>';
    ?>
</body>

</html>

そしてCSS：

.slide{
display: none;
}

body {
 color: black;
 background-color: #DCDCDC;
 font-family: sans-serif;
 font-style: italic;
 font-size: xx-small;
 }

h2{
  text-align: center;
 }

 div{
  text-align: center;
 }

何らかの理由でここにコードを正しく貼り付けることができないので、ここに jfiddle アドレスを示します。どうもありがとうございました。 http://jsfiddle.net/EbDvk/

4

0 に答える 0