wrapping fancybox around php code? Example: the_content();?

You need to elements: 1. a link that has FancyBox bound to it and 2. a target where that link points to (href) to show inside FancyBox.

In your case, you want the post content to be the target which can be done by wrapping it in a div with a unique ID. And you’ll need to create a link, using class=”fancybox” plus the correct href pointing to that ID along with it…

You could do something like this:

<h2><a href="#post-<?php the_ID(); ?>" title="<?php the_title(); ?>" class="fancybox"><?php the_title(); ?></a></h2>

<div class="fancybox-hidden">
  <div id="post-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
</div>

Note: the div with class=”fancybox-hidden” is to hide that content from initial view, otherwise it’s no fun ?? … other advantage: when you ever decide to disable Easy FancyBox, the post content will appear automatically in normal view!

Great way of coding this. The thought never even crossed my mind, it’s so simply yet it works great.

I’ve tried this in the loop, and it’s working flawlessly. One slight problem though, once I close the fancybox, and I try to open it again some of the content is not displaying. It’s mainly the video I have in the fancybox that no longer displays, however, it displays on the first time I open it. In fact they are videos that are using iframes. When I inspected the element, the iframe’s source changed to about:blank from it’s original source.

Could you think of why this would have happened?

Thanks again for such a good way of implementing this by the way ??

This is a known issue with FancyBox. Iframes that are being shown in inline display mode (which is the case with this method) will get cleared upon closing FancyBox. This is by design, to facilitate another case: iframe display mode.

I do not know if there is an easy way around this… You might try to force fancybox to iframe mode by changing the link to use class=”fancybox iframe” (use a space here) but if that works at all, it might not even solve the issue.

Do you have a link to your site so I can study the issue live?

I’m not going to fiddle with it, until you see it live.

Here is the link that this can currently be seen on

https://phanime.net/23092/subbed-sword-art-online-online-episode-5/

Scroll all the way down, until the thumbnails, those lead to the fancybox.

Also is there anyway to make it so the fancybox only closes when you click the “x”, and not when you click outside of it? It would be great for my users so they don’t accidently click out of the fancybox when they are in the middle of watching a video.

I’m afraid there is no way to prevent FancyBox to clear these inline iframes on close… Sorry.

Preventing clicks on the overlay (outside the box) to close the box, is planned for the next release. It’s in the development release right now so if you would like to have that feature, download and install https://downloads.www.ads-software.com/plugin/easy-fancybox.zip .

That’s unfortunate, is there anyway I can force the fancybox to maybe completely reload the content when you click on the fancybox after you close it? Maybe then it won’t reset the iframes? It’s essentially just resetting the source of the iFrame I believe, not exactly all of it, the code still remains, just the source has been reset.

Could I maybe alter the iframes in a way to make this work? Wrap the iframes with something?

Could this be of any use? https://stackoverflow.com/questions/12406232/fancybox-iframe-type-return-value-on-close

There must be some other way of doing it ??

And thanks for the development release, i’ll definitely take a look at it.

Try the following. Create a text widget (in a footer bar or last in the sidebar) with this content:

jQuery(document).on('fancybox-cleanup', function() {window.location.reload(false);} );

This will make the page reload after FancyBox closes. But be warned, this will happen every time you close a fancybox, no matter what the content is.

Hmmm… hang on. I did a test and the iframe does not get cleared after closing the popup on https://demo.status301.net/easy-fancybox-sandbox/ (close by clicking Agree, open a second time by clicking that link at the top of the page). There seems to be something else going on at your end.

I was hoping the fancybox itself could reload instead of the page.

I just checked the site out, and I can see that it’s working fine, what could be the reason behind it clearing my iframe src when reopened? I have this in a loop if that matters at all.

Could you disable prettyPhoto again on your site https://phanime.net/23092/subbed-sword-art-online-online-episode-5/ ? Then I can take another look and try to debug…

Yea sorry about that, I changed it to that until this problem was solved.

However, I’ve changed it back to easy fancybox, you should be able to use the same link above to debug it live: https://phanime.net/23092/subbed-sword-art-online-online-episode-5/

Here’s the code for the implementation

<div style="float: left; padding: 4px;">
				<center>
				<a href="#post-<?php the_ID(); ?>" class="fancybox">
					<div style="overflow: hidden; width: 150px; height: 100px;">
						<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
							<center>
								<?php $posttitle = the_title_attribute('echo=0');
								$posttitle1 = trim($posttitle);
								$length = strpos($posttitle1, " ");
								$videoprovider = substr($posttitle1, 0, $length);
								echo $videoprovider; echo ' Mirror';?>
							</center>
						</div>
						<img src="<?php echo $thumbnail_src; ?>"/>

					</div>
				</a>

				<div class="fancybox-hidden">
 				 	<div id="post-<?php the_ID(); ?>">
    						<center><?php the_title(); ?><br /><br />
							<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
							<?php wprp(true);?>
						</center>
  					</div>
				</div>
				</center>
				</div>

This code is within the loop.

Ughhh, it seems like having other elements that use # to link makes the fancybox not work.

I added tabs using # to link them, and now the fancybox is not working.

Okay I’ve reverted it for now, so you can debug it.

But I think this was the code that was causing the error

https://pastebin.com/7QPbHTip

Resolved o.o?