Save
Saving
  • N Nemo

    Hello Richard,

    Actually no I didn't take the captions down !
    It's just that for it to appear you have to resize the browser window... I don't know why, I think the script is taken into account only when the browser change size... Or maybe the picture load before the script ?
    www.melanie-lefebvre.com/2015-2

    If you have an idea about that ?

    And then there is the problem with the captions not corresponding to the image. I have to change the css this way (left:250%) to make it work, but the left position is related to the number of images, so if I add another one, I will need to change the percentage, which is not a very handy solution... :

    .lay-carousel-sink-parent {
       position:  absolute;
       top: 50%;
       left: 250%;
       bottom: auto;
       transform:translate(-50%, -50%); }
    

    Thank you for your help !

    posted in General Discussion read more
  • N Nemo

    Hello Richard,

    Thanks a lot for your advices !

    Since it's a little too complicated for me anyway I asked some help from a developper friend.
    Thanks to your advices he managed to do that :

    <script>
    function resizeCaption () {
        const slides = jQuery('.lay-carousel-slide .slide-inner > img')
        const slidesWidth = slides.map((i, caption) => {
            return jQuery(caption).width()
        })
        jQuery('.captions-slider .single-caption-inner').each((i, caption) => {
            jQuery(caption).width(window.innerWidth - slidesWidth[i]).css('margin-left', slidesWidth[i] + 'px')
        })
    }
    
    window.laytheme.on('newpageshown', resizeCaption)
    window.addEventListener('resize', resizeCaption)
    </script>
    

    And it kind of work ! But not perfectly.

    First it seems I need to resize the window browser for the script to be taken into account.
    Then the caption doesn't correspond to the image. I managed to fit the caption with the image though with some CSS but it's not a good way to do it. I changed this :

    .lay-carousel-sink-parent {
       position: absolute;
       top: 50%;
       left: 50%;
       bottom: auto;
       transform: translate(-50%, -50%); }
    

    to this :

    .lay-carousel-sink-parent {
       position:  absolute;
       top: 50%;
       left: 250%;
       bottom: auto;
       transform:translate(-50%, -50%); }
    

    But it doesn't really work because if I add another image to the carousel, I need to change again left: 250%; to maybe 300%

    Then the caption numbers are not centered like the captions text.
    Actually there were out of the screen, so I managed to centered it a little like that but it's not pretty...

    .sink-with-numbers-and-captions.lay-carousel-sink.numbers-right .numbers {
        right: 85%;
        top: 250% !important;
        position: absolute; }
    

    Thank you again !

    posted in General Discussion read more
  • N Nemo

    Hello Richard !

    Sorry I didn't see your answer, but thanks you for taking the time !

    You can access the WIP site here : https://www.melanie-lefebvre.com/accueil

    I tried the centered captions in the section 2015 only, here :
    https://www.melanie-lefebvre.com/2015-2/

    (On the other sections it's an alternative version.)

    But I can't make it work for now, and I was working on something else so I didn't make any progress and I don't really know Javascript so it's kind of hard for me.
    And I realized the caption that appear above the image is not the one corresponding to the picture !... Not sure what I did !... :)

    Thanks !

    posted in General Discussion read more
  • N Nemo

    Hello !

    It may not be easy but here's how I would like to change the carousel :

    A.jpg

    SITE-MELMessapia-double2.jpg

    The images would be on the left of the screen, and the captions would be centered in the free space on the right. The images would be of different sizes so the captions have to adapt to the images width.

    I managed to fix the images to the left, and to center the captions in the middle of the page. But the captions should be centered on the free space to the right of the images.

    Do you know if it's doable in Javascript to do something like this :
    First calculate the width :
    Width of window - Width of carousel image = NewWidth
    Then apply it :
    NewWidth = Width of Captions

    I guess it's not possible in CSS..
    I hope it's understandable !

    Thank you !

    posted in General Discussion read more
  • N Nemo

    Hello Richard,

    Yes I posted it in another thread ! You can delete this one !

    posted in General Discussion read more
  • N Nemo

    Hello,

    Since I finally managed to do it and some people are asking it, here's the JS code I used :

    <script>
    var images = ['https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg', 'https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg', 'https://cdnuploads.aa.com.tr/uploads/Contents/2020/05/14/thumbs_b_c_88bedbc66bb57f0e884555e8250ae5f9.jpg?v=140708', ];
    
    var randomImage = Math.floor(Math.random() * 3)
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
       if(type == "page" && obj.id == 72){
    	jQuery("body").css("background-image", "url('" + images[randomImage] +"')");
      } else {
        jQuery("body").css("background-image", "")
      }
    });
    
    </script>
    

    You just have to change the url of the images, the number of images and the id of the corresponding page.

    Enjoy !

    posted in General Discussion read more
  • N Nemo

    Update :

    I managed to aim at the menus like that :
    (But not on a specific li of the menu)

    nav.primary:hover ~ nav.second_menu {
    opacity:1!important;
    }

    nav.second_menu:hover ~ nav.third_menu {
    opacity:1!important;
    }

    But well I'm not sure it can work this way actually...

    When I hover the first menu, the second one appear, and when I hover the second one the third one appear but the second one disappear... And when I hover the third one it disappear...

    Maybe that was a dumb way to try, I don't know... But I didn't find an easy way to do it in Laytheme...
    (I'm not a developper by the way haha)

    Let me know if you think something can be done this way.
    Thanks !

    posted in General Discussion read more
  • N Nemo

    I changed the Home page to UNDER CONSTRUCTION so to site the website you have to go there :
    www.melanie-lefebvre.com/infos

    Sorry about that.

    posted in General Discussion read more
  • N Nemo

    Hello,

    Is there a simple way to have a random background image on the Home page ?
    I know it isn't a lay option but I guess it's something simple in javascript ? (but I don't know js so...)

    All I know is that it should begin like that :
    (id:72 correspond to my landing page)

    <script>
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
    
      if(type == "page" && obj.id == 72){
     // Put all of your js, without document ready inside here 
    
      }
    });
    </script>
    

    So basically not much... And add a class in html.

    I found a lot of different codes online like those :
    http://jsfiddle.net/mrwigster/36cL6/

    https://fredthewebguy.me/tutorials/load-random-images-page-load-jquery/

    but can't make them to work... And I don't know if I should write the paths to the images as a link "http://..." or "/media/img.jpg"

    Sorry for my vague message. But it seems a lot of people would to add that to their land page so it would be nice to have an easy solution somewhere.

    Thank you very much !

    posted in General Discussion read more
  • N Nemo

    Here are with screenshots :

    SITE-MEL4.jpg

    SITE-MEL5.jpg

    SITE-MEL6.jpg

    posted in General Discussion read more