javascript - Picture Shuffle -


i have bootstrap , have thumbnails set display set of pictures. want thumbnails stay put , not move. want pictures change inside thumbnails , have size of image adjust thumbnail in.

i want thumbnails stay in 1 spot , maintain size.

i want pictures shuffle in between different thumbnails , adjust it's size match thumbnail in.

i have script shuffles thumbnails around page: (what don't want) 

(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(); })

the thumbnails markup looks following. 

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

what change on script shuffles thumbnails make shuffle images , make images adjust thumbnail located in? have tried this. hope making question clear enough on wanting.

give height , width properties img elements like

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

then

(function($){      //+ jonas raoni soares silva     //@ http://jsfromhell.com/array/shuffle [v1.0]     function shuffle(o){ //v1.0         for(var j, x, = 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(); })

demo: fiddle


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more