No Scrollbars in Popup

Home Forums Easy FancyBox Pro No Scrollbars in Popup

This topic contains 6 replies, has 2 voices, and was last updated by  Simon Degay 7 hours, 50 minutes ago.

  • Author
    Posts
  • #8282

    Simon Degay
    Participant

    Hi there,
    I’ve set FancyBox so that content is not scaled down in the popup window. However, there are no scroll bars showing in the popup. Am I missing something?
    Thanks

  • #8285

    RavanH
    Keymaster

    Hi Simon, what are you trying to show inside the light box?

    If it’s images then no, there should not be scroll bars. Whatever the image size (scaled down to fit inside the browser view port or not) the light box frame should fit around it.

    But if it’s Inline content (which in turn can be an image but also text or other content like a contact form) then there might be scroll bars visible, but only if they are needed. I.e. on smaller screens.

    Can you share a link to your site so I can see what you mean maybe?

  • #8297

    Simon Degay
    Participant

    Sorry but the site isn’t up yet – it’s still on the local server.

    I’m trying to display the artwork for long single-page web designs.
    I’m using small square thumbs that link to images of the entire design.
    The problem is that the linked-to images are very long and narrow.
    This means that when the whole image is displayed on the popup, it’s ridiculously small.
    On the other hand, if I don’t fit the image to the popup, most of the bottom of it is cut off.
    I want to display vertical scrollbars in the popup so that the visitor can scroll the entire length of the image.

  • #8298

    RavanH
    Keymaster

    Hi Simon, I have the impression there is something going wrong on your site. It might be a CSS rule from the theme stylesheet that is interfering.

    When you have set images in FancyBox to not scale down to the browser view port, then the light box frame should scale up to the image size. This would force the browser to show scroll bars (not inside the light box frame but outside on the browser window edge) and allow users to scroll the page and see the rest of the image.

    Could you try deactivating the option “Center on scroll” on Settings > Media, if you have not already done so?

  • #8300

    Simon Degay
    Participant

    Yes, the scroll bars do appear at the browser edge, allow me to view the entire length of the image by scrolling the entire page but that’s not ideal. Scrolling the entire length of the page leave me right at the bottom of the page, and some distance away from the original thumbs.

    Having to click a thumb – scroll to the bottom of the page – then scroll back to the top of the page in order to click another thumb just doesn’t work.

    Also, the viewer cannot scroll down the page when his mouse is over the image, so he will be very confused.

    Also, by scrolling to the bottom of the page, the close button is then off screen.

    What I need to make happen is for these long vertical images to scroll independently within the lightbox frame.

  • #8301

    RavanH
    Keymaster

    Ahhh, I am getting a clear picture now 😉 thanks for explaining more, and for your patience.

    I fear the only way to get what you want it though the Inline Content method. And I say “fear” because it will need a bit more complicated manual HTML manipulation on your part, involving the Text editor tab. I hope you are at ease with that.

    Here are step by step instructions for one image to see if this does indeed give you the desired result.

    1. Activate Inline Content on Settings > Media
    2. Go back to edit your portfolio page and switch to Text view tab
    3. Find the first thumbnail IMG tag in the raw HTML code
    4. Now notice the A tag that wraps that IMG tag and copy the full size image URL that is there in the HREF attribute
    5. Then replace the attribute with href=”#project-1″ and add another attribute class=”fancybox-inline”
    6. Next, start a new line after the closing < /a > tag and type the following:

    
    <div style="display:none">
    <div id="project-1" style="width:400px;height:600px">
    <img src="..." />
    </div>
    </div>
    

    7. Paste the URL copied at step 4 in place of the three dots as the SRC attribute value.

    Save the page and try the front end.

    You may need to adjust the width/height values (or remove them entirely) in the typed code, or go back to Settings > Media and deselect “Try to adjust size to inline/html content.” in the Inline Content section. Or change the “Scrolling” settings there to “Always”…

    Once you are satisfied, you can then proceed to adapt all other thumbnail links and add one hidden inline content section for each one. Be aware that each link and hidden section pair must use a matching but unique (!) ID. So for example for the second link, use href=”#project-2″ and its matching hidden section use id=”project-2” and so on.

    Hope that works for you. Let me know!

  • #8318

    Simon Degay
    Participant

    Very sorry Ravan, but you’ve totally lost me. The photos are being displayed through a text widget on the front page.

    This is the code from the text widget:

    <a href="/wp-content/uploads/2017/05/workimage_2.jpg" class="fancybox">
    
    <img src="/wp-content/uploads/2017/05/front-gallery-thumb-335x335-2.png">
    
    </a>
    
    <a href="/wp-content/uploads/2017/05/workimage_2.jpg" class="fancybox">
    
    <img src="/wp-content/uploads/2017/05/front-gallery-thumb-335x335-2.png">
    
    </a>
    
    <a href="/wp-content/uploads/2017/05/workimage_3.jpg" class="fancybox">
    
    <img src="/wp-content/uploads/2017/05/front-gallery-thumb-335x335-3.png">
    
    </a>
    
    <a href="/wp-content/uploads/2017/05/workimage_4.jpg" class="fancybox">
    
    <img src="/wp-content/uploads/2017/05/front-gallery-thumb-335x335-4.png">
    
    </a>

    And this is the CSS:

    .front-page-2 img { display: block; }
    
    .front-page-2 {
    	padding-left: 7.5%;
    	padding-right: 7.5%;
    }
    
    #text-6 {
    	padding: 0;
    }
    
    .front-page-gallery {
    	float: left;
    	width: 23.076923076923077%;
    	margin-right: 2.564102564102564%;
    	margin-bottom: 0;
    }
    
    .gallery-fourth {
    	margin-right: 0;
    }
    
    @media only screen and (max-width: 800px) {
    	.front-page-gallery {
    		float: left;
    		margin-right: 2.564102564102564%;
    		margin-bottom: 2.564102564102564%;
    		width: 48.717948717948715%;
    	}
    
    	.gallery-second, .gallery-fourth {
    		margin-right: 0;
    	}
    }
    
    @media only screen and (max-width: 375px) {
    	.front-page-gallery {
    		float: left;
    		width: 100%;
    		margin-right: 0;
    		margin-bottom: 7.5%;
    	}
    }

    I wonder if you could just advise what changes i should make.

    I noticed the HTML was not displaying correctly in this post. It should look like this:

You must be logged in to reply to this topic.