persimmondevelopment Posted July 18, 2019 Share Posted July 18, 2019 (edited) 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 July 18, 2019 by persimmondevelopment Initial Revision Link to comment
Beyondspace Posted June 17, 2020 Share Posted June 17, 2020 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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted June 17, 2020 Share Posted June 17, 2020 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; } } }); BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
RyanDejaegher Posted June 17, 2020 Share Posted June 17, 2020 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 CleanShot 2020-06-17 at 11.25.31.mp4 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Beyondspace Posted June 17, 2020 Share Posted June 17, 2020 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 CleanShot 2020-06-17 at 11.25.31.mp4 Mine not jQuery, it's YUI library, goes along with Squarespace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
RyanDejaegher Posted June 17, 2020 Share Posted June 17, 2020 @bangank36 my bad 🙂 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
Beyondspace Posted June 17, 2020 Share Posted June 17, 2020 3 minutes ago, RyanDejaegher said: @bangank36 my bad 🙂 It's ok bro, you good BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
melmotz Posted December 19, 2022 Share Posted December 19, 2022 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
Beyondspace Posted December 20, 2022 Share Posted December 20, 2022 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? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
melmotz Posted December 21, 2022 Share Posted December 21, 2022 @Beyondspace 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! Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment