Easy Fancybox – width and height not working

Does it open staff images? Then you cannot set a fixed the light box size. Fancybox was designed to always scale dynamically to image and viewport size when showing pure images…

When you click an image it then opens a shadowbox that includes the image and text. It can be seen at https://midtownpilates.khcreativemedia.com/meet-our-staff/

So does this mean I can’t adjust it?

Thank you,
Keith

Or, is it possible to force my plugin to open in an iframe?
Here’s my code.

[staff_loop]
<div class="staff-summary">
	<div class="staff-thumb">
		<a id="inline" href="#[staff-name-slug]" class="fancybox"><img class="staff-member-photo" src="[staff-photo-url]"></a>
	</div>
	<div class="staff-member-info-wrap">
		<h3><a id="inline" href="#[staff-name-slug]" class="fancybox">[staff-name]</a></h3>
		<p class="staff-position">[staff-position]</p>
	</div>
</div>
<div style="display:none">
	<div id="[staff-name-slug]" class="staff-full">
             <img class="staff-member-photo" src="[staff-photo-url]">
                <h1>[staff-name]</h1>
		<p class="staff-position">[staff-position]</p>
		[staff-email-link]
                [staff-bio]
       </div>
</div>
[/staff_loop]

Being on a tablet right now I cannot check out your complete page source but judging by the code sample you gave above it looks like you should be able to get it working… Just a few more steps.

1. Go to Settings > Media and enable the Inline Content type.
2. Maybe you already had step 1 but you are not using this Inline Content mode yet. To start using it, you need to change the link class in your staff loop to “fancybox-inline”.
3. Finally, give the staff-full div the dimensions you wish the light box to use. For example:
<div id="[staff-name-slug]" class="staff-full" width="360" height="420">

Thanks for your help. I thought this would do the trick, but no luck.
I scraped the code it produced for you to see. The fancybox-content is still setting the size by the browser window width.

<div id="fancybox-content" style="border-width: 10px; width: 1308px; height: auto;">
<div style="width:auto;height:auto;overflow: hidden;position:relative;">
<div id="katie-aldridge" class="staff-full" height="420" width="360">
<img class="staff-member-photo" src="https://midtownpilates.khcreativemedia.com/wp-content/uploads/2015/08/MidtownPilates-Katie.jpg">
<h1>Katie Aldridge</h1>
<p class="staff-position">manager + instructor</p>
<a class="staff-member-email" title="Email Katie Aldridge" href="mailto:"></a>

OK, had a chance to look at your sites source code and the first thing that strikes me are these following lines at the top of your source:

<link rel="stylesheet" href="https://dorm-decor.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.fancybox-1.3.4.min.css?ver=4.1.1" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://dorm-decor.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script>

$(document).ready(function() {

	/* This is basic - uses default settings */

	$("a#single_image").fancybox();

	/* Using custom settings */

	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	/* Apply fancybox to multiple items */

	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	200,
		'speedOut'		:	200,
		'overlayShow'	:	false,
		'width' : 50,
		'centerOnScroll' : true
	});

});
</script>

They do not belong there. Your source should always begin with the DOCTYPE declaration and be aware of including scripts from other sites that interfere with your own site’s scripts.

You’ll need to find out where these lines are coming from and remove them. Start with checking your themes header.php

I’m sorry, you caught me in the middle of working on a solution. I’ve removed this code. I currently have the window sizing correctly using css, although the fancybox begins being drawn on the left side of the screen and then shifts over to the middle.

Keith

The code is still there in the source of https://midtownpilates.khcreativemedia.com/meet-our-staff/ while not on other pages… is it a custom template file?

Ugh! It’s been a crazy week. We launched the site late last night and I thought you were looking at the live site. I’m sorry for the trouble and confusion. The live site is now at https://www.midtownpilates.com.

This code was on a page template that is not currently being used on the live site.

Sorry again,
Keith

Ah, that explains it… Looking at the live site now and I notice

/* # Meet the staff Page
____________________________________________________________________________________________________ */
#fancybox-wrap {height: auto !important; width: 50% !important;}
#fancybox-content {height: 100% !important; width: 100% !important;}

in https://midtownpilates.com/wordpress/wp-content/themes/midtown-pilates/style.css

Why is that there? Try changing that to

/* # Meet the staff Page
____________________________________________________________________________________________________
#fancybox-wrap {height: auto !important; width: 50% !important;}
#fancybox-content {height: 100% !important; width: 100% !important;}
*/

by moving the */ to after the style rules.

That code is my work around to get the box to the size I want. You can see in the css that is being dynamically created that the box is still being created based on the size of the viewport. My code is just reducing it after that.

Keith

OK, sorry I gave a bad example. Use the style attribute:

<div id="[staff-name-slug]" class="staff-full" style="width:360px;height:420px">

Or you could reference the class in your stylesheet:

.staff-full {
  width:360px;
  height:420px;
}

That worked, thanks. Of course its the little things like “px” that cause the problem. So, my only issue now is wanting to keep this responsive. I tried using “%” instead of “px”, but not luck. If I set this via css, the box is drawn and then slides in from the left. Any suggestions on how to do this and be responsive?

Again, thanks for all your help.

Do not use % here because that means a percentage of the wrapping div, not the browser viewport.

Use a fixed width, then on smaller screens the frame will not grow to its full width but stop to fit within the device viewport. To see this in a normal browser, close the lightbox then resize the browser and click the staff image again.

Doing this does not allow the height of the lightbox to increase as the width decreases, causing text to be hidden. Otherwise, you’re correct that the lightbox fits within the viewport.

I currently have it set up as you suggested so you can view it.

Keith