No Scrollbars in Popup – Status301 Premium

This topic has 7 replies, 2 voices, and was last updated 6 years ago by Rolf.

Viewing 7 reply threads

Author

Posts
- 8 May 2017 at 22:25 #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
- 10 May 2017 at 00:12 #8285
  
  Rolf
  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?
- 15 May 2017 at 21:57 #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.
- 15 May 2017 at 23:13 #8298
  
  Rolf
  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?
- 16 May 2017 at 21:06 #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.
- 17 May 2017 at 01:11 #8301
  Rolf
  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!
- 22 May 2017 at 21:27 #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:
- 24 May 2017 at 18:27 #8334
  Rolf
  Keymaster
  Let’s take that first image as example.
  
  Change the link from
```
<a href="/wp-content/uploads/2017/05/workimage_2.jpg" class="fancybox">
```
  to
```
<a href="#workimage_2" class="fancybox-inline">
```
  Then add at the end of the widget:
```
<div style="display:none">
<div id="workimage_2" style="width:400px;height:600px">
<img src="/wp-content/uploads/2017/05/workimage_2.jpg" />
</div>
</div>
```
  Don’t forget to enable Inline Content on Settings > Media and then test your front page first image.
  
  Adjust the style=”width:400px;height:600px” values if you need or try to remove that part completely and see how that works.
  
  Let me know 🙂
Author

Posts

Viewing 7 reply threads

You must be logged in to reply to this topic.