Jump to content

Sliders broke, can anyone help to fix?

Recommended Posts

Hi peeps,

Awhile back I used Rebecca Grace's Slider code to get some slider action going on my website, but along the way it broke and no longer works. I don't know if an update killed it or I did with some further code injections, woops.

The blog entry where it no longer works is here;

https://www.eddysummers.com.au/naturalvssatobi


(The images are supposed to have a slider to show the differences between the two colour profiles)

I had to be a bit sneaky with this iirc, this actually isn't a blog entry per se, but a blog page that points to another hidden page on the site whereby the content exists, otherwise the slider stuff seemed to affect all the other blog page entries with undesired results (if that makes sense), so this was my workaround at the time.



The actual images are code links I think? here's the code when I go and click 'Edit';

---------------
 

<div class="sqs-block gallery-block sqs-block-gallery" style="padding:0px;">
  <div class="sqs-block-content">
    <div class="sqs-gallery-container sqs-gallery-block-stacked sqs-gallery-block-show-meta block-animation-none clear">
      <div class="sqs-gallery">
        <div class="image-wrapper sqs-active-slide" data-type="image" data-animation-role="image">
          <img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0ed6ae5c41e6184a16e/1639297266896/IMGP2879nt.jpg"
            data-image="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0ed6ae5c41e6184a16e/1639297266896/IMGP2879nt.jpg" data-load="false" data-type="image" alt="ALTERNATE TEXT"
            src="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0ed6ae5c41e6184a16e/1639297266896/IMGP2879nt.jpg">
        </div>

        <div class="image-wrapper" data-type="image" data-animation-role="image">
          <img class="thumb-image loaded" data-src="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0e023fa3061c93a69a8/1639297253281/IMGP2786sb.jpg"
            data-image="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0e023fa3061c93a69a8/1639297253281/IMGP2786sb.jpg" data-load="false" data-type="image" alt="ALTERNATE TEXT"
            src="https://static1.squarespace.com/static/5ffe734fb1c4a52c404bea7b/t/61b5b0e023fa3061c93a69a8/1639297253281/IMGP2786sb.jpg">
        </div>
      </div>
    </div>
  </div>
</div>


---------------

Under Design>Custom CSS I have the following code;

@media only screen and (max-width: 767px) {
  section[data-section-id="6205c9597f1a9d535ceee684"] .gallery-fullscreen-slideshow-item-img img {
    width: 100% !important;
    height: auto !important
  }
  section[data-section-id="6205c9597f1a9d535ceee684"] .gallery-fullscreen-slideshow {
    height: 50vh!important
  }
}

Under the Natural vs Satobi Page Settings>Advanced I have the following;

Page Header Code Injection

<!-- Image Slider -->
<script>
$(window).on("load", function () {
$(".sqs-gallery-block-stacked").imagesliderblock({
    before_label: 'Natural', // Set a custom before label
after_label: 'Satobi' // Set a custom after label
});
});
</script>

<!-- End of Image Slider -->

Under Developer Tools I have the following for Code Injection;

Header

<!-- Image Slider -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jqueryimagesliderblock.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/imageslider.css" type="text/css" media="screen" />
<!-- End of Image Slider -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


Footer

<script>
$("img[alt='Eddy Summers']").parent().attr("href", "/main/");
</script>

I think that is really all the custom coding I have on my site. This was awhile ago that I did all this, some of this code might not be relevant to this issue, maybe it is, I dunno...

I would love SqSp to natively support sliders as this all feels way above my ability to handle on an infrequent basis, what I learn at the time to implement is soon forgotten. I should still have the tutorial I paid for with Rebecca Grace's slider code, I can rewatch that to see if anything looks amiss, but I fear that its actually fine and something else has happened or gone wrong to break this feature.

Can anyone help or is this looking for too much assistance here?

Kind Regards,

Eddy

Screenshot 2023-04-28 095837.jpg

Screenshot 2023-04-28 095800.jpg

Link to comment
  • Replies 0
  • Views 309
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.