Carouseul Captions to the right of images

[Nemo]

Hello !

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

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 !

[Richard]

Dear @Nemo

Apologies for the delayed reply,
When i visit your site, it is still under construction, so i can't get a deeper look, or try some different JS

Did you manage to find a solution this week?

Best wishes, let me know and have a wonderful day

Richard

[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 !

[Richard]

Dear @Nemo

For this to work properly both the Image slide and the Caption slide must have the same overall width.

The Image Carousel and the Captions Carousel are in fact two different boxes, the captions does not live 'inside' of the Image carousel.

Here i can see your Image Carousel has a width of 80vw, is this necessary?

And here your captions have full browser width '100%'

Once both are equal width:

Take width of image within slide (%)
Save this as a variable

Then Captions:
Width of Captions slide - (minus) Variable %

The captions will now have the correct width in relation to the image so that in total they should add to 100% in whatever ratio, given bigger or smaller image.

Then with CSS on the captions container:

Text-align: center;

Is this what you were after @Nemo
Let me know :)

Also if it helps 'Calc' with CSS is great ( in your case the variable will keep changing though )
https://www.w3schools.com/cssref/func_calc.asp

Best wishes
Richard

[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 !

[Richard]

Dear @Nemo

Apologies for the delay, i see now that you have taken the captions down?
Can i be of help still or you have decided to go a different route?

Best
Richard

[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 !