• R
    rsepierre

    I'm guessing you could set your own CSS to have 80% of browser height as your carousel height :

    select your row "add custom class or id" : custom-class

    Then add this code to your custom css :

    custom-class . lay-carousel-wrap {
        height: 80vh;
    }
    

    To set the transition speed of your carousel you have to change the "friction" and "attraction" parameters. Add this code to "custom HTML and CSS at bottom" general laytheme option

    window.Frontend.GlobalEvents.on("projectpageshown", function(a) {
                setTimeout(function() {
                    jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 }) ;}, 100)  });
    

    Did not tested the first CSS thing, not sure this all works. The last bit of code should.

    posted in General Discussion read more
  • R
    rsepierre

    I've reworked my code to make it "sort of update proof", this might interest you @wow123

    Now all you need to do to have this feature is to add this code to the "Custom HTML at bottom" option in Laytheme parameters

    0_1486826084720_upload-7e63ca5f-5b32-4ced-8f03-9ffeb7a8388e

    <script>
    (function() {
            function layCarouselResize() {
                layCarousel.sizeCarousels();
                layCarousel.sizeCaptions();
                layCarousel.repositionSliders();
                jQuery(".lay-carousel:not(:hover)").flickity( 'next' );
                console.log('custom autoplay');
            }
            setInterval( layCarouselResize, 4000 );
    
            window.Frontend.GlobalEvents.on("projectpageshown", function(a) {
                setTimeout(function() {
                    jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });
                    /*jQuery('.lay-carousel').on( 'settle.flickity', function() {
                        console.log('slide-end callback');
                        // callback not working well
                        layCarouselResize():
                    });*/
                }, 100)
            });
            layCarousel.playPauseHtml5Videos = function(a) {
            var b = a.find(".lay-carousel-slide:not(.is-selected) video");
            if (b.each(function() {
    //              this.pause();
    //              var a = jQuery(this.parentNode).find(".html5video-customplayicon");
    //              0 != a.length && a.show();
    //              var b = jQuery(this.parentNode).find(".html5-video-placeholder-image");
    //              0 != b.length && b.show()
                }), !layCarousel.isTouchDevice) {
                var c = a.find(".lay-carousel-slide video");
                0 != c.length && c[0].play(), c.on("canplay", function() {
                    this.play(), c.off("canplay")
                    })
                }
            };
    })();
    </script>
    
    <style>
    .multiple-slides-view .lay-carousel-slide {
          width: auto !important;
    }
    .multiple-slides-view img.h100 , .multiple-slides-view .video-slide.h100 video {
        position: relative !important;
        -webkit-transform: none !important;
        transform: none !important;
        -ms-transform: none !important;
        left: 0 !important;
    }
    
    .multiple-slides-view .slide-inner a, .multiple-slides-view .slide-inner {
        width: auto !important;
        position: relative !important;
        height: 100% !important;
    }
    
    .multiple-slides-view .slide-inner {
        margin-right: 1vw;
    }
    </style>
    

    And then add "multiple-slides-view" class to the row in which you wan't that carrousel, like so :

    0_1486826188116_upload-3c53332f-3287-4fbe-b3b1-0b9aad309c69

    drawbacks :

    flickity used in layTheme is not compatible with "imageloaded", so my "hack" is to update the layout everytime change slide (every 4000ms in my case).

    And because the layCarouselResize() updates all carousels at once, i had to create my own autoplay so all carousels are synchronized.

    You should then make sure to :

    • disable autoplay on the "multiple-slides-view" sliders.
    • change the autoplaytime at the following line :
      setInterval( layCarouselResize, 4000 );
    • change the "transition duration" with friction and attraction custom options at the following line :
      jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });

    posted in Addons read more
  • R
    rsepierre

    The layTheme Carousel/SlideShow addon is able to handle images, video, images thumbnails but not video thumbnails.

    Think it would be a great addition to the plug-in. Cheers

    posted in Addons read more
  • R
    rsepierre

    Browser don't work like images softwares. I doubt this is due do laytheme but more of a general issue with web.

    Open the image on your computer from the browser (drag&drop the file to your url bar should do the trick). If the issue appears, it's definitly a browser issue.

    (If not, you can still give it a try, but i'm not sure this will solve that !)

    My fix :
    First step (this is probably the issue) check the image color profile. Prefer basic sRVB, Web coated RVB (i think).

    Check color depth (should be 32bits/8 bits per layer). Thought exporting to jpg or png should set will this anyway.

    If you have lots of images you can do a photoshop script to export all.

    Once your files are ready, you can fine tune the colors if any modification happend during the process. But now : what you see should be what you get on (though it might never be exactly the same).

    Hope this helps !

    posted in Bug Reports read more
  • R
    rsepierre

    @arminunruh Ah cool, it is better ! Didn't know we could do this, so i will use it on mine too !

    @paubo yes sorry what i said couldn't work because a bit of code was missing to what I said, you should have added <style></style> like so :

       <style>
            .sitetitle, .primary a {color:white !important;}
            nav.primary a span {border-bottom-color: white !important;}
       </style>
    

    BUT

    you should defenitly use armin's solution now !

    posted in General Discussion read more
  • R
    rsepierre

    Current fix for this could be to insert menu via a shortcode in the footer using an extension like thoses :

    (specific to inserting menu via a shortcode)
    https://fr.wordpress.org/plugins/menu-shortcode/
    https://fr.wordpress.org/plugins/smart-menu-shortcode/

    (pack of shortcodes, more users (better support) and includes menu shortcodes too)
    https://fr.wordpress.org/plugins/shortcodes-ultimate/screenshots/

    posted in General Discussion read more
  • R
    rsepierre

    My fix for this is to insert HTML in the homepage
    (in the page editor [ + MORE ] > [ + HTML ] ), place it where ever you wan't in the page

    0_1482931446728_upload-15a81432-1c60-48df-bb44-bbb809a2180d

    with this code :

            .sitetitle, .primary a {color:white !important;}
            nav.primary a span {border-bottom-color: white !important;}
    

    or this code if you wan't to exclude the phone theme :

    @media (min-width: 900px) {
            .sitetitle, .primary a {color:white !important;}
            nav.primary a span {border-bottom-color: white !important;}
    }
    

    of course instead of "white" insert the color you want

    posted in General Discussion read more
  • R
    rsepierre

    Hi,

    I'm using an iframe on the website i'm building. I think it would be cool to be able to insert them without any coding.

    It is easy enough to code it ourselves using the "+HTML" button.
    But maybe it is easy to implement this to the "+embed" button.

    I'm guessing the +embed button is compatible with certain webpage using "oembed" or something. (In the video i tried to use dead youtube link, but it works with full ones :) )

    Instead of showing "Error, no embed found for this URL." the +EMBED could suggest to import the page through an iframe.
    "This URL has no embed tag, if you press OK, we will use an iframe"

    see video : https://www.opentest.co/share/901ba510ccd511e6abf79735dfd95770

    posted in Feedback read more
  • R
    rsepierre

    Hi,

    I wan't to suggest a new feature for the carousel addon.

    I think it would be really good to be able to show multiple slides per view (see video).

    https://www.opentest.co/share/0e7f78d0cc6f11e688ecd510bcea4514

    I tweaked the laytheme carousel plugin to get this result, but the result is poorly implemented and will probably be lost in the next update, so i'm posting here hoping you could consider implementing later on.

    What i did :

    I changed the CSS for when "multiple slides" is checked, each slide is sized according to the images. I think I added the "loop" functionnality from flickity to the slider so we could infinite scroll through the slider (wrapAround: true), but maybe it was already there.

    The main issue is that we must rezise the slider once images are loaded in order to be clean, if i hit the following command in the console or if I resize the window, everything works fine.

    layCarousel.sizeCarousels(),layCarousel.sizeCaptions(),layCarousel.repositionSliders()

    There is also an option within flickity that could solve this issues (imagesLoaded:true). I imported the full flickity.pkgd.js to be able to use it but for some reason it doesn't work. (i'm guessing you did some custom coding there)

    I know you are using flickity only if the slider transition is to "slide", I think this is not an issue because it's only with the "slide" option that the "multiple images per view" carousel is interesting.

    I hope you would be interesting to add this functionnality !
    Cheers.

    P.

    posted in Addons read more
  • R
    rsepierre

    @rsepierre of course, after an hour strugling, it took me 3 minutes after posting here to fix the issue. All clean.

    posted in Bug Reports read more

Looks like your connection to Lay Theme Forum was lost, please wait while we try to reconnect.