1

ブートストラップがあり、一連の写真を表示するようにサムネイルを設定しています。サムネイルを動かさずに固定したい。しかし、サムネイル内で写真を変更し、画像のサイズをサムネイルに合わせて調整したい.

サムネイルを 1 か所にとどめ、サイズを維持したい。

写真をさまざまなサムネイル間でシャッフルし、そのサイズをサムネイルに合わせて調整します。

私は現在、ページの周りのサムネイルをシャッフルするこのスクリプトを持っています:(私がしたくないこと)

(function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

$(function(){
$('ul#list li').shuffle();
})

サムネイルのマークアップは次のようになります。

<ul class="thumbnails" id="list">
    <li class="span4">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/360x270" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
</ul>

サムネイルをシャッフルして画像をシャッフルし、それらの画像をサムネイルに合わせて調整するスクリプトで何を変更できますか? 私はこれを得るために多くのことを試みました。私が何を望んでいるかについて、質問を十分に明確にしていることを願っています。

4

1 に答える 1

0

img次のような要素に高さと幅のプロパティを与えます

<img src="http://placehold.it/360x270" alt="" width="360" height="270"/>

それで

(function($){

    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };

    $.fn.shuffle = function() {

        var srcs =  this.find('img').map(function(i, el){
            return el.src;
        });
        shuffle(srcs)

        return this.each(function(i){
            $(this).find('img').attr('src', srcs[i]);
        });
    };

})(jQuery);

$(function(){
    $('ul#list li').shuffle();
})

デモ:フィドル

于 2013-05-22T03:05:20.667 に答える