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

  • Resolved faeronsayn

    (@faeronsayn)


    11 years, 3 months ago

    I’ve been looking at the support threads here and a lot of them relate to users wanting to display their posts or more specifically their post contents in the fancybox.

    Would it be possible to wrap fancybox divs around php code? 

    <div class="fancybox">
<?php the_title(); ?> <br />
<?php the_content(); ?>
</div>

    Would something like this be possible? Maybe the title of the post could be a permalink to the post which opens a fancybox with the following code 

    <?php the_title(); ?> <br />
<?php the_content(); ?>

    I’ve also tried a custom template for a custom post type like single-books.php

    I then only pasted the above code in it 

    <?php the_title(); ?> <br />
<?php the_content(); ?>

    Assuming that the header/footer and other aesthetic elements wouldn’t be called when I use the traditional way of adding the iframe class to the permalink of the post. However, it didn’t help since it still brought up the whole website in the iframe essentially.

    Anyway to work around this?

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 15 replies - 1 through 15 (of 22 total)
1 2
  • Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

    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!

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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 🙂

    Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

    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?

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

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

    Here is the link that this can currently be seen on

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

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

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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.

    Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

    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 http://downloads.wordpress.org/plugin/easy-fancybox.zip .

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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? http://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.

    Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

    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.

    Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

    Hmmm… hang on. I did a test and the iframe does not get cleared after closing the popup on http://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.

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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.

    Rolf Allard van Hagen

    (@ravanh)

    11 years, 3 months ago

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

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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: http://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.

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    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.

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

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

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

    http://pastebin.com/7QPbHTip

    Thread Starter faeronsayn

    (@faeronsayn)

    11 years, 3 months ago

    Resolved o.o?

Viewing 15 replies - 1 through 15 (of 22 total)
1 2
  • The topic ‘wrapping fancybox around php code? Example: the_content();?’ is closed to new replies.

Tags