-3
I have a list of 21 images, arranged in a grid of 3 columns and 7 lines, and I need to make sure that each time there is a refresh on the page, or it is accessed by another IP, those images change position, so that the image at position 1 goes to position 2, the image in position 2 go to position 3, and so on.
Can you help me?
0
Take a look at this example Maybe I can help you.
Place the javascript code at the bottom of the page.
When refreshing 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>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQTUs-q4L6_5h796EcaqbamcUU2K6M8ofHH747nXmT30Lcvbe3f"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="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>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVvDaaOhX5qQqceSi3ig_KqadYZh4jCatnnCrXb6Hky5PxJ69e"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR_DY2Nn9Jps_xTbUpRY7wWAEA7FiJAtN0IPaDBbFoGmiLWS2hI5Q"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="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>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdP1LO4b1TWv4VH-GJiX2P4lgd0ad1cD36yskPCjHlQVBFBcka"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTEgpfDDHkNAkp0YcHVNCnJzXhlt2RP14SzsKjsR5WrshWEgaMd"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="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>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnf80rzHvYlbwU6_N9UjbDP_TbVc4DcaArubV__aobVp9pHFAF"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="member">
<ul>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRigN44ISilbS0YQhNcbw_85Vq0K4CvS_eUc29b5QOhBiarQy7FAg"></img>
</li>
</ul>
</div>
</td>
<td>
<div class="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);
Browser other questions tagged jquery
You are not signed in. Login or sign up in order to post.
What have you done so far? Include the code you have so far, always try to include a mcve, this makes it easier to help you. The way you are it just seems that you want it to be done for you.
– Bruno César
I just don’t have any experience with it. Image list: <ul id="minhalista"> <li>Image 1</li> <li>Image 2</li> <li>Image 3</li> <li>Image 4</li> <li>Image 5</li>
<li>Image 6</li> <li>Image 7</li> <li>Image 8</li> <li>Image 9</li> <li>Image 10</li> </ul> Code: var ul = $("#minhalist"); var lis = ul.Children(); var sorted = Math.floor(Math.Random()*lis.length); for ( var i = 0 ; i < sorted ; i++ ) lis.eq(i). detach(). appendTo(ul); So the images are alternating randomly. I would like it to be in order.
– Antonio
This topic almost solved... http://answall.com/questions/4654/randomizar-a-posi%C3%A7%C3%A3o-das-imagens? Rq=1
– Antonio