Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How can I change the arrow style in a 'reel gallery' on version 7.1?


Recommended Posts

Site URL: http://www.studiolilykate.com/

Hey guys and gals, I'm wanting to know if there is a way to change the arrows that seem to be default and the only option when you select the 'reel slideshow' in version 7.1.
I'd like to change them to the more minimalist style arrow available though the other gallery options slideshow full & simple & not have the transparent box that backs it. 
(I've attached a picture of the section on my website and the default arrows that it comes with.)
Thank you in advance for anyone who has the answer!

Lily 
xx

Screen Shot 2020-09-30 at 10.54.13 AM.png

Link to comment

To implement the following you will need the business plan or above

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page where you want the effect to occur.

<script>

  $( ( ) => {
  
    // returns svg element
    
      buttonSvg = ( direction, points ) => {
      
        let $e = $( '<svg class="caret-' + direction + '-icon--small" viewBox="0 0 9 16">' +
        
          '<polyline fill="none" stroke-miterlimit="10" points="' + points + ' ">' +
          
            '</polyline>' +
            
          '</svg>' );
          
        return $e;
        
        }
        
    // simple class changer
    
      simpleClassChanger = ( old, nw ) => {
      
        $( '.' + old )
        
          .removeClass ( old )
          
          .addClass ( nw );
          
        }
        
    simpleClassChanger ( 'gallery-reel-controls', 'gallery-slideshow-controls' );
    
    // start previous button
    
      $( '.gallery-reel-control:nth-of-type( odd )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'left',
          
            '7.3,14.7 2.5,8 7.3,1.2' ) );
            
          } );
          
      // end previous button
      
    // start next button
    
      $( '.gallery-reel-control:nth-of-type( even )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'right',
          
            '1.6,1.2 6.5,7.9 1.6,14.7' ) );
            
          } );
          
      // end next button
        
    simpleClassChanger ( 'gallery-reel-control-btn', 'gallery-slideshow-control-btn' );
    
    simpleClassChanger ( 'gallery-reel-control-btn-icon',
    
      'gallery-slideshow-control-btn-icon' );
      
    } );
    
  </script>

The above code is for a v7.1 site using a gallery type of slideshow reel.

If you want the effect site wide then the above code would probably need to be adapted. I didn't test for that scenario.

I also didn't test on mobile.

Basically what the code is doing is updating the classes used for the reel style buttons to the styles for slideshow simple. In addition it replaces the SVG for the reel button icon with the slideshow simple icon.

Let us know how it goes.

Edited by creedon
version 2 of script

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 5 months later...

Hi Creedon and all.  I want to use the code above for the custom arrows but I already have some code that makes the slideshow reel autoscroll.  When I add this code below that, the arrows are there but the autoscroll stops.  Any help would be so appreciated.  Thanks!

This is the code for the auto scroll.  The first part goes into the Page Header Advanced Settings and then the second part goes into the custom CSS 

<script   src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script>

$(function(){

  window.setInterval(function(){

    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")

    [0].click()}     

  }, 2000);

});

</script>

 

 

CSS

[data-section-id='YOUR DATA SECTION ID']{
  .gallery-reel{
    height:20vh !important;
    padding-left: 0px;
    padding-right: 0px;

    figure{
    filter:grayscale(100%);
    }

    .gallery-reel-controls{
      display:none;
    }
  }
}
Link to comment

That worked!  Thank you.  For anyone else that wants the minimalist buttons and for the reel to scroll, this is what I used:

<script>

  $( ( ) => {
  
    // returns svg element
    
      buttonSvg = ( direction, points ) => {
      
        let $e = $( '<svg class="caret-' + direction + '-icon--small" viewBox="0 0 9 16">' +
        
          '<polyline fill="none" stroke-miterlimit="10" points="' + points + ' ">' +
          
            '</polyline>' +
            
          '</svg>' );
          
        return $e;
        
        }
        
    // simple class changer
    
      simpleClassChanger = ( old, nw ) => {
      
        $( '.' + old )
        
          .removeClass ( old )
          
          .addClass ( nw );
          
        }
        
    simpleClassChanger ( 'gallery-reel-controls', 'gallery-slideshow-controls' );
    
    // start previous button
    
      $( '.gallery-reel-control:nth-of-type( odd )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'left',
          
            '7.3,14.7 2.5,8 7.3,1.2' ) );
            
          } );
          
      // end previous button
      
    // start next button
    
      $( '.gallery-reel-control:nth-of-type( even )' )
      
        .removeClass ( 'gallery-reel-control' )
        
        .addClass ( 'gallery-slideshow-control gallery-slideshow-control-prev' )
        
        .each ( function ( ) {
        
          $( 'svg', $( this ) ).replaceWith ( buttonSvg ( 'right',
          
            '1.6,1.2 6.5,7.9 1.6,14.7' ) );
            
          } );
          
      // end next button
        
    simpleClassChanger ( 'gallery-reel-control-btn', 'gallery-slideshow-control-btn' );
    
    simpleClassChanger ( 'gallery-reel-control-btn-icon',
    
      'gallery-slideshow-control-btn-icon' );
      
    } );
    
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active, .sqs-edit-mode) .gallery-slideshow-control:nth-of-type(2) .gallery-slideshow-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

 

Link to comment
  • 2 weeks later...
On 3/31/2021 at 9:32 PM, creedon said:

@matthewk

Not off the top of my head by visual identification.

Can you provide a URL for a page for the first image or tell us which type of gallery it is? Also which version of SS?

A URL to a page is worth a thousand words! 🙂

Did you ever solve for this question, I'd love to know as well. Thanks!

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...