LFyel101

Trying to create a counter for my slideshow gallery which changes number in relation to what image the slideshow is currently on. Initially had it working by creating a counter that changes when the arrows are clicked, but sometimes you can click the page and the image will not change (however the counter which detects the clicks will!)

I wondered if anyone had any luck creating gallery pagination by getting the index of the image currently on display, however this level of javascript is a bit over my head. Any help would be greatly appreciated! If anyone had any plug ins to recommend rather than my own shonky javascript that would be greatly appreciated!

I've created the counter by adding a code block below the image and inserting the following script. 


<p class="counter"></p> <script> let imageNumber = 1 const counter = document.querySelector("p.counter") const nextButton = document.querySelector("a.next") const prevButton = document.querySelector("a.previous") const image = document.querySelectorAll(".thumb-image").length const galleryContainer = document.querySelector(".sqs-block-gallery") const imageSingle = document.querySelector(".thumb-image") let newCurrent = imageSingle.tabIndex const updateSection = function (){ counter.innerHTML = `${imageNumber} / ${image}` } const nextFunction = function (){ imageNumber = imageNumber + 1 if ( imageNumber > image ) { imageNumber = 1 } } const prevFunction = function (){ imageNumber = imageNumber - 1 if ( imageNumber < 1 ) { imageNumber = image } } updateSection() nextButton.addEventListener("click", function (){ nextFunction() updateSection() }) imageSingle.addEventListener("click", function (){ nextFunction() updateSection() }) prevButton.addEventListener("click", function (){ prevFunction() updateSection() }) </script>  

<script>  // Changes the format of date on summary items  var myObj = document.getElementsByClassName('summary-metadata-item--date');  var options = {  year: 'numeric', month: 'long', day: 'numeric'};  for (var i = 0; i < myObj.length; ++i) {      var item = myObj[i];        var date = new Date(item.innerHTML);       item.innerHTML = date.toLocaleDateString('en-GB', options);  }        </script> Hi Folks, 
Wondering if anyone can help, I've used the above code to get UK format dates on my summary blocks for events, but this doesn't work with events that have a date range rather than a single date. Wondering if anyone can help me get it working as its beyond my JS skills! It just shows "invalid date" for thumbnails that have an event spanning more than one date
Any advice appreciated

Hi,
Can you duplicate the page & don't add code there. We can compared 2 pages & check easier?

Hi. The scripts above did not work for me.
I figure this is due to differences in how templates handle the html.
I tried to make it a bit more generic by using meta-data and common tags.
Another huge upgrade is that I'm converting the strings to Date objects.
That way you don't have to deal with manual if cases. And can choose to format to something localized based on context. (Only blog-post pages has a time signature though, not sure if this is a template fault or squarespace fault)
Hopefully this will work for more templates.
It needs to have two separate behaviours based on weather it is on a blog post page or not.
As normal pages might have several dates to update. While a blog post has one that is handled a little differently.
I made a shared function that handles the formatting at least. So they all should get the same formatted text and different elements get fed in. You may replace the steps inside the updateDateElement function with a format of your liking. 😃
<script>   document.addEventListener("DOMContentLoaded", function(event) {     //Figure out context (blog-post or not?)     var dateMeta = document.querySelector('[itemprop=datePublished]');     if (dateMeta != null) {       //Handle blog post date       var publishedDate = new Date(dateMeta.content);       var dateElem = document.querySelector('time span');       updateDateElement(dateElem, publishedDate);     }     else {       //Handle all dates on page       var times = document.querySelectorAll('time');       for (var i = 0; i < times.length; i++) {         var dateElem = times[i];         var publishedDate = new Date(dateElem.innerHTML);         updateDateElement(dateElem, publishedDate);       }     }   });      function updateDateElement(elem, date) {     //Construct new display string //If you want a different localization, you can change the 'en-US'. //You can also type in undefined insteath of 'en-US' and let the device choose.     var dateFormat = { year: 'numeric', month: 'long', day: 'numeric' };     var newFormat = date.toLocaleDateString('en-US', dateFormat);          //Assign new string     elem.textContent = newFormat;   } </script> I wanted to do mine in native js.
Thought this might be slightly kinder on the load-time.
But some neat formatting libraries I found along the way...
https://github.com/datejs/Datejs https://momentjs.com/ https://www.npmjs.com/package/dateformat

Site URL: https://www.likeneonlove.com/
Is there any code I can use that will change the date format of my blog posts? At the moment, my latest post reads "Apr 15", but I'd like it displayed as "15 April". I managed to change the format of my summary block using the below script, but I can't seem to get it working for my actual blog page. I'm using the Skye template.
It's honestly infuriating that Squarespace STILL doesn't cater to its international customers. Having flexibility in changing date formats, US-based or not, should be a given for any website service!
<script>  // Changes the format of date on summary items  var myObj = document.getElementsByClassName('summary-metadata-item--date');  var options = {  year: 'numeric', month: 'long', day: 'numeric' };  for (var i = 0; i < myObj.length; ++i) {      var item = myObj[i];        var date = new Date(item.innerHTML);       item.innerHTML = date.toLocaleDateString('en-GB', options);  }        </script>  

Hi Paul,
Thanks for your response. The client (an art gallery) needs to be able to display their archive of past events so that they can show the breadth and history of their programme, and also so they can feature previous works that have happened at the gallery. Unfortunately I can't share the website in development on a public forum. 

I have tried the lazy summaries plug in, and it doesn't seem to be compatible with past events in its original form. I have emailed the developer however to see if there is any way to get this working. But thanks for your advice with this!

I'm currently scouring the internet to try and find a solution to my problem. I am producing a website for a client that needs to be able to display a high number of past events (so more than the 30 past events limit). Has anyone found a good solution to this? So far my only possible solution seems to be to use a summary block in leiu of an events page, and use something like this lazy summaries plug in or similar https://www.squarewebsites.org/squarespace-plugins/lazy-summaries 
If anyone has found a solution to this problem that works with a plug in or a bit of custom code, it would be great if they could share! 

Hi folks, wondering if anyone can help.
I'm trying to use javascript to add some custom code to a filtered view of events on squarespace (so a filtered view of a category).
(what i'm trying to do eventually is to add in some extra links above the "filtering by" text. )

 
I thought i'd do an initial test to see if I could get some code applied to the page (i.e just changing the background colour of the block). 
But it seems like something is happening when I try to apply the code to this page.  My code is super simple (see below)...
<script> const filteredView = document.querySelectorAll("div.sqs-events-collection-list") filteredView.style.backgroundColor = '#000000' </script> However, when I check the console, everything I try to set just keeps coming up as "undefined". 
 
Does anyone know if there's something that blocks scripts on category pages? or perhaps there's something i'm missing!
 
i've tried adding the script to both the footer and header injection...
 
 
 
any help or advice appreciated!