CODEWITHSUNDEEP
javascriptjqueryhtmlcssnyromodal
boguslavsky
boguslavsky

Reputation: 165

nyroModal resizes based on page size instead of browser size

I have a link to an image that opens with nyroModal. Everything works great except for the fact that the Modal window is placed in the middle of the page instead of in the middle of the browser window. This makes it so only the top half or so of the image is visible. I should note that the image is pretty large, I'm just expecting nyroModal to resize the image based on the browser size.

Here's a screenshot of the problem: https://i.sstatic.net/Vn5mI.jpg

Screenshot of where it works better, but still has the problem: https://i.sstatic.net/JFXv3.jpg

Is there any way to make it so that nyroModal places the window and resizes it based on the browser window dimensions as opposed to the page size?

EDIT: I've kept trying to fix the problem, and have documented some more details about it. 1. This problem only exists in Firefox and Chrome. The latest version of IE has absolutely no problem. 2. The modal window seems to open at exactly 50% down the total page height. This means that if the page is long enough, the modal window will be entirely outside of the view port. 3. The window opens in the same place regardless of image size, or if there is no content in it at all.

I've emailed the developer of nyroModal as a last ditch effort and haven't recieved any reply.

Here is the code in which I'm using nyroModal:

<div class="segment" 
onmouseover="document.getElementById('hypocricy').style.display = 'block';"
onmouseout="document.getElementById('hypocricy').style.display = 'none';">
    <div id="hypocricy" style="display:none;">
        <div id="thumbDescription">
        <h2>Hypocricy Sculpture</h2>
        <div class="thumbDescriptionLinks">
            <div class="thumbDescriptionLinkBox">
            <a href="projects/hypocricy/hypocricy1.jpg" class="nyroModal" rel="gal-hypocricy">zoom</a>
            <a href="zoom-images/hypocricy2.jpg" style="display:none;" class="nyroModal" rel="gal-hypocricy" ></a>
            <a href="zoom-images/hypocricy3.jpg" style="display:none;" class="nyroModal" rel="gal-hypocricy" ></a>
            </div>
            <div class="thumbDescriptionLinkBox"><a href="hypocricy-process.html">process</a></div>
        </div>
        <p>A sculpture of two intersecting heads made up of layers of bass wood.<br/><br/>
        For this, I cut many evenly spaced slices out of a 3d head model. Importing the top view of these cross sections into Illustrator allowed me to cut them out of a sheet of bass wood via laser cutter. The slices were then assembled into two separate heads using circular spacers between each slice.</p>
        </div>
    </div>
    <img src="work/school-thumbs/hypocricy.jpg" />
</div>

There's basically a square div with another square div on top of it which is hidden. Once you mouse over the lower div, the hidden div becomes visible, and there is a link inside to the nyroModal image.

Upvotes: 0

Views: 207

Answers (2)

Guillaume
Guillaume

Reputation: 1105

With the same problem, my solution was to use ColorBox

I need something which could be used on links having each its own url, the modal content being the page located at the url.

With Colorbox, it was easy.

Upvotes: 0

boguslavsky
boguslavsky

Reputation: 165

The way I solved this problem turned out to be quite simple. I stopped using nyroModal and instead am using Shadowbox.

Upvotes: 0

Related Questions