Billyb Posted January 7, 2022 Share Posted January 7, 2022 (edited) Site URL: https://salmon-capybera-psd8.squarespace.com/ Hello, I appreciate someone has asked this last year but it appears to have been forgotten about and looks unresolved anyway. I would like to randomise the order of the images in my gallery. There is a plugin but it only works on image blocks in 7.1. Any help with the code would be very much appreciated! https://salmon-capybera-psd8.squarespace.com/ password is test Thank you, Billy Edited January 7, 2022 by Billyb Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 For Gallery Section on Homepage? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Billyb Posted January 8, 2022 Author Share Posted January 8, 2022 Yes I have multiple galleries in Strips and would like the images to randomise on refresh Link to comment
shopkisme Posted February 28, 2023 Share Posted February 28, 2023 @billyb It appears that you found a solution. Could you help point me in the right direction? I am trying to do exactly what your homepage does. Link to comment
tuanphan Posted March 6, 2023 Share Posted March 6, 2023 On 3/1/2023 at 5:44 AM, shopkisme said: @billyb It appears that you found a solution. Could you help point me in the right direction? I am trying to do exactly what your homepage does. He used Gallery Section then add this to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-strips-wrapper').randomize('.gallery-strips-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tcrown86 Posted April 30 Share Posted April 30 anyone know how to make images load in random order on a grid:stripes for portfolio pages: https://rico-x.com/projects/keep-it-warm-ill-be-back thanks Link to comment
tuanphan Posted May 2 Share Posted May 2 On 5/1/2024 at 3:07 AM, tcrown86 said: anyone know how to make images load in random order on a grid:stripes for portfolio pages: https://rico-x.com/projects/keep-it-warm-ill-be-back thanks You can use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-strips-wrapper').randomize('.gallery-strips-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> AdamBlyth 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tcrown86 Posted May 2 Share Posted May 2 worked really well, thanks for your help on this, not a coder, building this all myself. thanks Link to comment
marrrrk Posted June 11 Share Posted June 11 @tuanphanI was wondering if randomising a gallery is possible in squarespace 7.0? I am trying to achieve the same result but so far my (very) limited coding skills are failing... here is the page I'm trying to randomise: marrrrk.com.au thanks in advance! Link to comment
tuanphan Posted June 13 Share Posted June 13 On 6/11/2024 at 1:57 PM, marrrrk said: @tuanphanI was wondering if randomising a gallery is possible in squarespace 7.0? I am trying to achieve the same result but so far my (very) limited coding skills are failing... here is the page I'm trying to randomise: marrrrk.com.au thanks in advance! You mean Homepage is Gallery Page? If yes, try this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('div#thumbList').randomize('.thumb'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AdamBlyth Posted June 16 Share Posted June 16 On 5/2/2024 at 6:16 PM, tuanphan said: You can use this code to Website > Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-strips-wrapper').randomize('.gallery-strips-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> This worked perfectly for my Gallery Page, thank you. @tuanphan how could I also randomise the images loaded on my homepage, which is a Slideshow : Simple section? Thanks in advance! https://sepia-koala-36ck.squarespace.com/ Link to comment
tuanphan Posted June 17 Share Posted June 17 On 6/16/2024 at 2:13 PM, AdamBlyth said: This worked perfectly for my Gallery Page, thank you. @tuanphan how could I also randomise the images loaded on my homepage, which is a Slideshow : Simple section? Thanks in advance! https://sepia-koala-36ck.squarespace.com/ I don't think code will work with Gallery Slideshow. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> In case it doesn't work, I will send a plugin to achieve this, if you have a budget. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Turnervision Posted June 17 Share Posted June 17 5 hours ago, tuanphan said: I don't think code will work with Gallery Slideshow. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> In case it doesn't work, I will send a plugin to achieve this, if you have a budget. @tuanphan do you know if this works on a 7.1 website as well? I have a code I added to my website now that works but when you refresh the page the slideshow goes blank. I was really hoping that we would receive features similar to the Tetragrammaton site especially how it features two random images at a time. My webpage is https://www.ventvibes.com/gallery also if you need to take a look at it. Link to comment
tuanphan Posted June 19 Share Posted June 19 On 6/17/2024 at 10:27 PM, Turnervision said: @tuanphan do you know if this works on a 7.1 website as well? I have a code I added to my website now that works but when you refresh the page the slideshow goes blank. I was really hoping that we would receive features similar to the Tetragrammaton site especially how it features two random images at a time. My webpage is https://www.ventvibes.com/gallery also if you need to take a look at it. Add this code under code you added <style> [data-active="true"] img { display: block !important; } </style> Turnervision 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AdamBlyth Posted June 22 Share Posted June 22 (edited) On 6/17/2024 at 7:13 PM, tuanphan said: I don't think code will work with Gallery Slideshow. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $( document ).ready(function() { $('.gallery-slideshow-wrapper').randomize('figure.gallery-slideshow-item'); }); (function($) { $.fn.randomize = function(childElem) { function shuffle(o) { for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; return this.each(function() { var $this = $(this); var elems = $this.children(childElem); shuffle(elems); $this.detach(childElem); for(var i=0; i < elems.length; i++) { $this.append(elems[i]); } }); } })(jQuery); </script> In case it doesn't work, I will send a plugin to achieve this, if you have a budget. Yep I tried that too and it didn't work unfortunately, thanks anyway. This solution worked however: https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Section/Gallery/Gallery Section Image Order Random#gallery-section-image-order-random Edited June 22 by AdamBlyth Link to comment
Turnervision Posted June 24 Share Posted June 24 On 6/19/2024 at 4:39 AM, tuanphan said: Add this code under code you added <style> [data-active="true"] img { display: block !important; } </style> Thank you so much this worked perfectly! 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