Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

How to randomize images on page?


persimmondevelopment

Question

I have a page full of image cards and I'm looking for a way to randomize the order they are displayed each time someone visits the page. I know there is no native way in Squarespace to do this, does anyone know how to do this using custom code?

Thanks!

Edited by persimmondevelopment
Initial Revision
Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

persimmondevelopment Can be via custom jQuery code, steps are:

- Select the images via correct selector

- Detach them from parent to keep the event stays, save in an array

- Shuflle the array

- Re-append them into the container

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
On 7/18/2019 at 9:33 PM, persimmondevelopment said:

I have a page full of image cards and I'm looking for a way to randomize the order they are displayed each time someone visits the page. I know there is no native way in Squarespace to do this, does anyone know how to do this using custom code?

Thanks!

I assume you have a cards page like so, and your template already has YUI loaded

https://www.crxssplatfxrm.com/selected-artists

Working: http://recordit.co/TVbGuBsPBo

Y.on('domready', function () {
  // Find the container of the grid item on your page
    var parentSelector = "#gridThumbs";
  // Get the class name of the grid item, in common on all items share same class name, site-specific
	var itemSelector = parentSelector + " .grid-item";
  // Get all the items
	var items = Y.all(itemSelector)._nodes;
	shuffleArray(items);
	items.forEach(function(el) { Y.one(parentSelector).append(el) });
  // Shuffle the array
	function shuffleArray(array) {
	    for (var i = array.length - 1; i > 0; i--) {
	        var j = Math.floor(Math.random() * (i + 1));
	        var temp = array[i];
	        array[i] = array[j];
	        array[j] = temp;
	    }
	}
});

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Solution that doesn't require jQuery
 



<script>
// Add this code to Settings -> Advanced -> Code Injection -> Footer
(function(){

function shuffleChildren(parentSelector) {
    var parent = document.querySelector(parentSelector);
    
    parent.children.forEach((item,index) => {
        parent.appendChild(parent.children[Math.random() *index | 0])
    })   

})();

  // Example
shuffleChildren('.index-list');
}
</script>  

Demo
 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0
1 minute ago, RyanDejaegher said:

Solution that doesn't require jQuery
 




<script>
// Add this code to Settings -> Advanced -> Code Injection -> Footer
(function(){

function shuffleChildren(parentSelector) {
    var parent = document.querySelector(parentSelector);
    
    parent.children.forEach((item,index) => {
        parent.appendChild(parent.children[Math.random() *index | 0])
    })   

})();

  // Example
shuffleChildren('.index-list');
}
</script>  

Demo
 

Mine not jQuery, it's YUI library, goes along with Squarespace 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
3 minutes ago, RyanDejaegher said:

@bangank36 my bad 🙂

It's ok bro, you good

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...