Docs

[wnhorne246]

Hello,

I’m setting up a page at http://dev.emilycolin.com/11-75-personal-peculiarities/, where I’m trying to figure out if I can make the lightbox display a different image than what the grid image is. The concept here is, when you click on the grid box in question, instead of displaying that image, I want it to load another image that I will design and will have messaging on it that the end user desires.

She really hopes this can be done! More excited about this idea than anything else so far.

Thanks for your time.

[Rupok]

Hi there,

Thanks for writing in! Kindly follow Essential Grid documentation as we mentioned further up, we’re only going to cover how to use Essential Grid and not every option it provides, to learn more about Essential Grid check out the official documentation here.

Cheers!

[wnhorne246]

OK, I understand.

I’ve now gone another way since this option does not seem doable and I could use some help refining my idea.

I now have the essential grid images open up the entire post in a Fancybox that is part of the X Theme (no plugin). I used the technique found in this video… https://www.youtube.com/watch?v=shG9O6DcJzg. The issue that I could use some help with is setting the Fancybox to a certain width, say 700px, and somehow have the height autosize, based on the text content to fill the whole Fancybox. The Fancybox also has a kinda big space above the title at the top of the text even though I have set the padding to 0.

If we can get this textbox working correctly, then I, along with your team, will become a hero to my wife!

Here is the JS used in the video…

var myAjaxContainer;

window.myAjaxLoaded = function(data) {
  
  if(!myAjaxContainer) {
    
    myAjaxContainer =  jQuery(data.containerid).esgbox({
      
		maxWidth    : 700,
		maxHeight   : 500,
		fitToView   : false,
		width       : '70%',
		height      : '70%',
                padding     : [0,30,30,30],
		autoSize    : false,
		closeClick  : false,
		openEffect  : 'none',
		closeEffect : 'none'
      
	});
  
  }
  
  myAjaxContainer.click();

}

I’ll wait, with my fingers crossed, in hopes that you can help!

Once again the page in question is at http://dev.emilycolin.com/11-75-personal-peculiarities/.

[Lely]

Hi There,

Please add this CSS on Appearance > Customize > Custom > CSS to adjust space above the header:

.eg-ajax-target h3 {
    margin-top: 10px;
}

Fancybox is responsive right now when I check. See this: http://screencast-o-matic.com/watch/cD1oQ6iFpd
We can add this to make the headings responsive.

@media (max-width: 480px){
.eg-ajax-target h3 {
    font-size: 26px;
}
}

Hope this helps.

[wnhorne246]

The adjustment for the header worked perfectly. Thank you. Good call on the header size too. Didn’t think of that one!

As for the responsiveness of the Fancybox, that was never the issue. Even in the video you posted of the Fancybox resizing, there was a scroll bar because the content exceeded the size of the container. I’d like for the box to grow in height, instead of a scroll bar. Also, when the content of the box is minimal, the box does not shrink in height.

Can this bee done? Please see my screenshots of what I’m referencing.

I think what needs to be adjusted or changed lies in the Java Script, but I’m not sure really.

[Lely]

Hello There,

You’re welcome and thank you for the screenshot.
Please try to adjust the following line from your code above:
height : '70%',

Hope this helps.

[wnhorne246]

When I set it to 100% and it still did nothing and gave me a scroll bar for content too much for the container and did not shrink for content that was short. I also tried to remove the maxHeight : 500, but then the Fancybox spanned the entire height of the browser window, from top to bottom.

[Rad]

Hi there,

Max height will add scrollbars if the content is greater than its height. And setting height isn’t effective along with max height.

How about this,

.esgbox-inner {
height: auto !important;
}

That should remove the limit within the wrapper where content is.

Thanks!

[wnhorne246]

This works wonderfully, except for a few caveats. The Fancybox does expand and contract based on the content within it, but the placement of the Fancybox, no longer opens in the center of the screen. If the text is long, it opens further down the page. If the text is short, it opens further up the page. Does that make sense? I’ll attach screen shots just in case. There also looks to be more padding at the bottom of the post, than needs to be there. If you look at the space above there header of the post, that’s the amount of space I’d like at the bottom. This is all inside the Fancy box after it opens…

I also noticed another issue with the Fancybox itself. I may need to start another ticket for this, but when X-Smooth Scroll is turned on and the Fancybox is engaged by opening any lightbox, the whole background shifts to the left about 20px. When you close it, it shifts back. This only happens when the Smooth Scroll plugin is turned on. Took me a long while to nail that one down!

Just let me know if I need to start another ticket for that issue. I find separating issues to be sometimes, beneficial!

I can also give you the login credentials if you need them.

[Lely]

Hi There,

Please do open a new thread for the background shifting issue.
What you see is the side effect when height is auto. Although it will remove the scrollbar it is also not advisable because fancybox or any lightbox should only stay on the screen view size. Removing the max-height and settings height to auto will make the fancybox overflow from the screen when the content is too much. Using percentage on height and this max-height also helps in calculating the space of fancybox on top and bottom of the screen. We can adjust both of this value to a certain extent, but to much text will surely add scroll.

Hope this helps.

[wnhorne246]

OK, I’ll open another thread on the background shifting issue.

As for the Fancybox, when the screen size gets small, like on a mobile phone, I’ll need and want the scroll bar (can this be done as well?), but on desktop, laptop, and tablet, I’m just trying to take what Rad supplied above, to the next step and center the box on the screen and remove a bit of the margin/padding below the text, inside the box.

Just let me know what you would like me to try next.

Thanks

[Lely]

Hi There,

Try adding this custom CSS:

.esgbox-opened {
    top: 5% !important;
}

That will override the default calculated top position of the fancybox.

Hope this helps.

[wnhorne246]

Yeah, I guess I can live with a fixed position. It would be nice if it could some how figure out how much space it was going to take up and the find the middle, before opening. At some point we’ll have to go with the least of all evils though.

What about removing the extra margin/padding below the text? When it opens up right at first, it looks almost perfect, and then it adds a bit of margin. It something you have to see as it’s hard to describe.

[Lely]

Hi There,

The space is the default bottom margin set in Ethos stack for paragraph tag. Please add this CSS to remove it:

.esgbox-inner p {
    margin-bottom: 0;
}

Cheers!

[wnhorne246]

Perfect!

One last thing. I have added the following for mobile but it’s not working…

.esgbox-opened {
    top: 25% !important;
}

@media (max-width: 480px){
.eg-ajax-target h3 {
    font-size: 26px;
	}
}

@media (max-width: 480px){
.esgbox-opened {
    top: 5% !important;
	}
}

I’d like it to start at 5% at the top of a mobile device and stop at 5% at the bottom of mobile and then add a scroll bar. Is this possible?

[Author]

Posts