html - Javascript Resize Images on shuffle -
ok, have bootstrap thumbnails set script shuffles images inside thumbnails or a element inside li parts works fine except images larger/smaller others. images resize on shuffle match space allowed in <li class="span#"> possible in javascript function have?
bootstrap thumbnails:
<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> javascript:
<script> window.onload = function() { $('ul#list li img').shuffle(); }; </script> <script> (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); </script> the span# looks in css:
.span4 { width: 300px; } .span3 { width: 220px; } .span2 { width: 140px; }
instead of shuffling img elements, can shuffle li elements this:
$('ul#list li').shuffle(); ?
i created fiddle code , seems work fine: check out
if can't that, option add span classes directly img elements.
Comments
Post a Comment