Change size of fullscreen container

[t-book]

Hi,

I'm in the need to dynamically create and place the container used by chocolate.

1. user clicks chocolat__image
2. container is created based on header and viewport height
3. chocolat gallery is drawn into the container

Is there some hook I can use to do something after an image has been clicked?

As alternative would it work to change the height of the fullWindow container to abstract the height of a navbar?

[nicolas-t]

Hello,

Your use case is not very clear, can you be more precise ?

Is there some hook I can use to do something after an image has been clicked?

you can use afterMarkup or afterImageLoad

here is an example :

Chocolat/test/test.chocolat.js

Lines 153 to 162 in 399cf1c

	var afterMarkup = function() {
	return this.elems.description.appendTo(this.elems.top)
	}
	var chocolat = $('#example0')
	.Chocolat({
	loop: true,
	container: $('#container'),
	afterMarkup: afterMarkup,
	})

[t-book]

@nicolas-t thanks for your reply and sorry for being unclear. My question might be quite easy. Let's say you have a big long single page with some sticky-top navbar.

Now from somewhere, a chocolat gallery is opened as fullwindow. Due to the z-index of the navbar the closing button of the gallery might be covered further the image is not centered. What I'm looking for is a way to change the height of a fullwindow gallery to take the remaining space (viewport minus navbar)

It might work to just give the gallery some top-margin based on the viewport height? Unfortunately I can only test this evening when back in the office.

[nicolas-t]

In your css you can add

body .chocolat-overlay{
    left: 0;
    bottom: 0;
    right: 0;
    top: 60px; /* height of the topbar */
    height: auto;
    width: auto;
}
body .chocolat-wrapper{
    left: 0;
    bottom: 0;
    right: 0;
    top: 60px; /* height of the topbar */
    height: auto;
    width: auto;
}

I think it'll do the job

[t-book]

Wonderful and thanks for your helping hand @nicolas-t will give it a try!

[t-book]

@nicolas-t this did it! thanks!

For the record, had to add some margin to the content as well:

body .chocolat-content {
  margin-top: 120px;
}

[t-book]

a shit. this will also affect the full-fullscreen view unfortuantaly the :fullscreen pseudo class does not catch .chocolat-content :/

[t-book]

a little dirty but might do it ...

        $(document).on('click', '.chocolat-fullscreen', function(){
            $('.chocolat-content').css('margin-top',"0px")
        });
        $(document).on('click', '.chocolat-close', function(){
            $('.chocolat-content').css('margin-top',"120px")
        });