Jump to content


Photo

Randomise Thumbnail Images Order


  • Please log in to reply
5 replies to this topic

#1 jhmagic1

jhmagic1

    Forum Newcomer

  • Members
  • Pip
  • 2 posts

Posted 02 June 2017 - 03:47 PM

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.magicdesi...#portfolio.html

 

Any solutions? Thanks.



#2 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,030 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 03 June 2017 - 10:56 AM

I created a script http://jsbin.com/nud...?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, 03 June 2017 - 10:59 AM.


#3 jhmagic1

jhmagic1

    Forum Newcomer

  • Members
  • Pip
  • 2 posts

Posted 15 June 2017 - 10:56 PM

Hello rbrtsmith,

 

Thanks for the code, however I know nothing about how JS and HTML work. Can you advise how and where to place this code in my files please?



#4 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,030 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 16 June 2017 - 07:27 AM

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.mo...S/docs/Web/HTML
CSS https://developer.mo...US/docs/Web/CSS
JavaScript https://developer.mo.../Web/JavaScript



#5 Nillervision

Nillervision

    All-rounder

  • Privileged
  • PipPipPipPipPip
  • 1,597 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 18 June 2017 - 09:29 PM

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.magicdesi...#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.



#6 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,030 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 19 June 2017 - 07:44 AM

 

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users