Jump to content
jhmagic1

Randomise Thumbnail Images Order

Recommended Posts

I created a script http://jsbin.com/nudolediga/edit?html,js,output that randomises DOM nodes so you can use it to randomise any HTML list. Just pass the list items into the function.

function randomiseArr(arr) {
  return arr.sort(function() { 
    return 0.5 - Math.random();
  });
}

function randomiseNodes(nodes) {
  var randomisedNodes = randomiseArr([].slice.call(nodes));
  var html = randomisedNodes.reduce(function(html, node) {
    return html + ( node.outerHTML || node.nodeValue );
  }, '');
  nodes[0].parentElement.innerHTML = html;
}

randomiseNodes(document.querySelectorAll('.js-image'));

  <ul>
    <li class="js-image">
      1
    </li>
    <li class="js-image">
      2
    </li>
    <li class="js-image">
      3
    </li>
    <li class="js-image">
      4
    </li>
  </ul>
Edited by rbrtsmith

Share this post


Link to post
Share on other sites

I would recommend you learn at least basic HTML, it's very straightforward to learn.

Your JavaScript in this instance would live in it's own .js file and you would import that in with a <script src="yourscript.js" />

That HTML goes wherever your images are. Each <li> (List item) will contain one of your images. The script just re-orders them.

 

You will also need some CSS there.

 

 

In all honesty you won't get far at all without knowing HTML and CSS. For anything beyond the most basic of websites you'll want to learn JavaScript too.

HTML https://developer.mozilla.org/en-US/docs/Web/HTML
CSS https://developer.mozilla.org/en-US/docs/Web/CSS
JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript

Share this post


Link to post
Share on other sites

Hello,

 

I am looking for a piece of code to randomise the order of my portfolio thumbnail images each time the page is reloaded i.e the thumbnail images will be displayed in a different order every time the page is opened.

 

This is the webpage with the thumbnails - http://www.magicdesignhub.com/#portfolio.html

 

Any solutions? Thanks.

 

The question is why would you want do that. It might cause issues with search engines when trying to index your site.

Share this post


Link to post
Share on other sites

 

The question is why would you want do that. It might cause issues with search engines when trying to index your site.

I'm not convinced this would be an issue. Especially if it's done with JavaScript like in my example, but even so the ordering of images isn't gonna have any real world impact and if there's a good UX case for randomising things than go with it. UX trumps SEO every day.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,534
    • Most Online
      4,970

    Newest Member
    2nd Mortgages GTA
    Joined
  • Forum Statistics

    • Total Topics
      65,734
    • Total Posts
      455,403
×