I have a list with 21 images, arranged in a grid of 3 columns and 7 lines, and I have to make every time there is a refresh on the page, or it is accessed by another IP, these images change position, so that the image in position 1 goes to position 2, the image in position 2 goes to position 3, and so on.
Can you help me?
At a glance this example might help you.
Put the javascript code at the bottom of the page .
When updating the page you will have the images in different positions.
Make sure your code has the jquery plugin.
<div class="band">
<table>
<tr>
<td>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVvDaaOhX5qQqceSi3ig_KqadYZh4jCatnnCrXb6Hky5PxJ69e"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTUs-q4L6_5h796EcaqbamcUU2K6M8ofHH747nXmT30Lcvbe3f"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT18KP4pLbzFQ1fE636tJ8wvhDuNUy-iQuFSSUghW-0_ZefmuWs"></img></li></ul></div></td></tr><tr><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVvDaaOhX5qQqceSi3ig_KqadYZh4jCatnnCrXb6Hky5PxJ69e"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_DY2Nn9Jps_xTbUpRY7wWAEA7FiJAtN0IPaDBbFoGmiLWS2hI5Q"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT18KP4pLbzFQ1fE636tJ8wvhDuNUy-iQuFSSUghW-0_ZefmuWs"></img></li></ul></div></td></tr><tr><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdP1LO4b1TWv4VH-GJiX2P4lgd0ad1cD36yskPCjHlQVBFBcka"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTEgpfDDHkNAkp0YcHVNCnJzXhlt2RP14SzsKjsR5WrshWEgaMd"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT18KP4pLbzFQ1fE636tJ8wvhDuNUy-iQuFSSUghW-0_ZefmuWs"></img></li></ul></div></td></tr><tr><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnf80rzHvYlbwU6_N9UjbDP_TbVc4DcaArubV__aobVp9pHFAF"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRigN44ISilbS0YQhNcbw_85Vq0K4CvS_eUc29b5QOhBiarQy7FAg"></img></li></ul></div></td><td><divclass="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRA9kDuINLMU4kSvZeYMGoRx5tE3hPTQm4URfEMcHCQ7iYeGqInSg"></img></li></ul></div></td></tr></table></div>$( document ).ready(function() {
$("div.band").randomize("table tr td", "div.member");
});
(function ($) {
$.fn.randomize = function (tree, childElem) {
return this.each(function () {
var $this = $(this);
if (tree)
$this = $(this).find(tree);
var unsortedElems = $this.children(childElem);
var elems = unsortedElems.clone();
elems.sort(function () {
return (Math.round(Math.random()) - 0.5);
});
for (var i = 0; i < elems.length; i++)
unsortedElems.eq(i).replaceWith(elems[i]);
});
};
})(jQuery);