Okay
  Public Ticket #2750052
Broken module / Broken feature
Open

Comments

  • Patrick Gavaghan started the conversation

    Hi there, 


    I have run into an issue whilst deploying the slider .. the option for  -- thumbnailNavigation: 'hover', -- does not work .... when hovering the slide the thumbnail nav does not appear ..

    'always' works fine

    Does this option only work on certain skins or is there some other limitation?

    thank you in advance.

    Pat


  •  156
    Kristof replied

    Hello Patrick,

    Thank you for getting in touch with us!
    Which skin do you use? Could you please send me your slider?
    I would like to check it.

    Best Regards,
    Kristof Molnar | Kreatura Support Team

  • Patrick Gavaghan replied

    Hi Kristof .. thanks for your reply ...

    Some extra info:

    No errors in the console ... LayerSlider Initalized message showing ... on hover of main image the left and right swipe arrows appear and then disappear on mouse out

     is this enough? 

        // Running the code when the document is ready
        jQuery(document).ready(function(){
        console.log("doc ready on prop page");

        // var screenwidth = jQuery(window).width();
        // var screenheight = jQuery(window).height();
        jQuery('#layerslider, .slide-ol').css({'width':'900px', 'height':'600px'});
     
            // Calling LayerSlider on the target element
            jQuery('#layerslider').layerSlider({
     
                // Slider options will be added here
                // later in this guide.
                autoStart: true,
                type: 'responsive',
                firstSlide: 1,
                skin: 'photogallery',
                bgcolor: '#000000',
                pauseOnHover: 'disabled',
                fitScreenWidth: 'false',
                tnWidth: 150,
                tnHeight: 100,
                tnContainerWidth: '80%',
                tnActiveOpacity: 100,
                tnInactiveOpacity: 50,
                navButtons: true,            
                thumbnailNavigation: 'always',

                
            });
        });


    And then in the html

      <div class = 'col-xs-12 col-md-8' style = ''>
        <div id="layerslider" class = 'xxcol-xs-12' style="width: 900px; height: 600px;">
          {{ content.field_property_images }}
        </div>
      </div>


    Other than this issue . .everything seems to be working fine.


    Pat


  • Patrick Gavaghan replied

    Here is the output HTML from the twig var  {{ content.field_property_images }}


      <div class = 'col-xs-12 col-md-8' style = ''>
        <div id="layerslider" class = 'col-xs-12' style="width: 900px; height: 600px;">
          

    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'field' -->
    <!-- FILE NAME SUGGESTIONS:
       * field--node--field-property-images--property.html.twig
       * field--node--field-property-images.html.twig
       * field--node--property.html.twig
       * field--field-property-images.html.twig
       * field--image.html.twig
       * field.html.twig
    -->
    <!-- BEGIN OUTPUT from 'themes/skipierdor/fields/field--field_property_images.html.twig' -->
              <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
          <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app1.jpg?itok=ABRv-OIu'/>
          <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app1.jpg?itok=vRVb_Tjb" alt="Slide thumb_std"/>
        </div>     
              <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
          <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app2.jpg?itok=gtPZN2Bk'/>
          <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app2.jpg?itok=3HNmE6Td" alt="Slide thumb_std"/>
        </div>     
              <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
          <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app3.jpg?itok=qNRpW028'/>
          <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app3.jpg?itok=W-JZz16L" alt="Slide thumb_std"/>
        </div>     
              <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
          <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app4.jpg?itok=9lWntfsM'/>
          <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app4.jpg?itok=WjeSSAnM" alt="Slide thumb_std"/>
        </div>     
              <div class="field--itemxx ls-slide"  data-ls="duration: 600000; kenburnszoom: in; kenburnsscale:1.2;  parallaxtype: 2d;">
          <img class = 'ls-bg' src = '/sites/default/files/styles/large_photo_std/public/2021-04/app5.jpg?itok=F-ma4dlu'/>
          <img class="ls-tn"  src="/sites/default/files/styles/thumb_std/public/2021-04/app5.jpg?itok=2cy7E6sB" alt="Slide thumb_std"/>
        </div>     
        

      
     
    <!-- END OUTPUT from 'themes/skipierdor/fields/field--field_property_images.html.twig' -->

        </div>
      </div>


  •  156
    Kristof replied

    Hello Patrick,

    Thank you for your feedback!

    Unfortunately, we can't help you based on the codes you copied. There can be several reasons which cause the problem and we need to see and test how the whole slider is behaving. Please zip the images and the html code together to us and we will check it or put your website temporary online.

    I'm looking forward to your reply.

    Best Regards,
    Kristof Molnar | Kreatura Support Team

  • Patrick Gavaghan replied

    Hey Kristof .. I'll come back to you once I have a dev version on line.

    thank you

    Patrick

  •  156
    Kristof replied

    Okay, thank you for your feedback!

    Best Regards,
    Kristof Molnar | Kreatura Support Team