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

matthewk

Member
  • Posts

    9
  • Joined

  • Last visited

Posts posted by matthewk

  1. Hi there. I'm looking for the ability to create a gallery that has one row of images that autoscroll and if you hover over the image or click on one the scrolling stops and the image is enlarged. I already have code for autoscrolling but I need something like a lightbox but that isn't available in gallery:reel
    Thanks!

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

     

  3. 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;
        }
      }
    }
×
×
  • Create New...