Jump to content

How to randomize images on page?

Recommended Posts

  • 10 months later...
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment

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 comment
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 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
3 minutes ago, RyanDejaegher said:

@bangank36 my bad 🙂

It's ok bro, you good

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
  • 2 years later...

 

On 6/17/2020 at 10:33 AM, Beyondspace said:

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

 

@beyondspace is it possible to do this on 7.1 with background image on homepage?

Site is https://goose-ferret-j3rk.squarespace.com pw: smalls

Link to comment
On 12/20/2022 at 12:16 AM, melmotz said:

 

@beyondspace is it possible to do this on 7.1 with background image on homepage?

Site is https://goose-ferret-j3rk.squarespace.com pw: smalls

On your homepage, I check that there is only one background image. So how can we set random images?

Greeting, it's 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 lightbox, Delivery Date Picker, Keyword Highlighter
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 comment
On 12/22/2022 at 1:59 AM, melmotz said:

 I got something to work temporarily, but would love a better solution. I am not sure how to set up more than one image, whether it should be background image, gallery, etc. What do you recommend? Thanks in advance!

Do you still need help on this? We can achieve it with Gallery Block or Summary Block + Script code (Requires a Business or higher)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.