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

How to randomize images on page?

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

Share this post


Link to post

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

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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;
	    }
	}
});

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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

 

Share this post


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 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


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