CODEWITHSUNDEEP
twitter-bootstraptwentytwenty
Chris
Chris

Reputation: 7621

Responsive image inside bootstrap modal - not showing until I resize the window

I'm using the TwentyTwenty jQuery library to allow me to have 2 images with a before and after slider, and I want to display these inside a Bootstrap modal.

However once I click on the thumbnail image to open the modal, the image doesn't display in the modal until I resize the browser (I can resize it by 1px and it'll display straight after).

I've tried using window.dispatchEvent(new Event('resize')); to the browser to calculate the height required for the image, but it isn't working. Is there some function in JavaScript (or jQuery) that force the browser to display the image?

The page is here:

http://turfectsolutions.chrisstclair.co.uk/Gallery/

Thanks! :)

Upvotes: 1

Views: 988

Answers (1)

davidtully13
davidtully13

Reputation: 1

late to the party but i figured out a fix for my set up (chrome - asp.net core razor page, Twenty Twenty, style:height = 0 but only shows when resize (not scroll))

I added a container to the markup - fixed a few but intermittently. I read forums that stated Twenty Twenty only triggers on SHOWN divs, or Visibility: visible.

add an OnClick event to the button/anchor which triggers the modal. 

 <button type="button" onClick="modalButtonClick()" 
                        class="btn btn-info btn-lg" 
                        data-toggle="modal"
                        data-target="#myModal">Bigger?</button>

the function will show the modal, and then you call the twenty twenty function to format the images. the alert is just there for test to make sure the function is being called.

function modalButtonClick() {
            $("#myModal").show();
            $("#before_after_container1modal").twentytwenty();
            alert("I am an alert box!");
        }

I am sure there is a better way, but this seems to work - if any one has a better suggestion im all for learning :)

Upvotes: 0

Related Questions