Picture Shuffle

Question

У меня есть bootstrap, и у меня есть миниатюры, созданные для отображения набора изображений. Я хочу, чтобы миниатюры оставались на месте и не двигались. Но я хочу, чтобы изображения изменялись внутри миниатюр и имели размер изображения, соответствующий размеру эскиза.

Я хочу, чтобы миниатюры оставались в одном месте и поддерживали размер.

Я хочу, чтобы картинки перетасовать между различными иконками и настроить его размер, чтобы соответствовать миниатюре он находится в

Я в настоящее время имею этот сценарий, который перемешивает эскизы вокруг страницы:. (То, что я не хотите)

(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> 

Что я мог изменить на сценарии, который тасует эскизы, которые сделали бы это только перетасовать изображения и сделать эти изображения подстраиваться эскизом он находится в? Я так много пытался это сделать. Надеюсь, я достаточно четко изложу вопрос о том, чего я хочу.

Answer 1

высота и ширина Дают свойства для 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(); 
}) 

Демо: Fiddle