WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] wrapping fancybox around php code? Example: the_content();? (23 posts)

  1. faeronsayn
    Member
    Posted 1 year 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/

  2. RavanH
    Member
    Plugin Author

    Posted 1 year 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!

  3. faeronsayn
    Member
    Posted 1 year 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 :)

  4. RavanH
    Member
    Plugin Author

    Posted 1 year 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?

  5. faeronsayn
    Member
    Posted 1 year 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.

  6. faeronsayn
    Member
    Posted 1 year 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.

  7. RavanH
    Member
    Plugin Author

    Posted 1 year 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 .

  8. faeronsayn
    Member
    Posted 1 year 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.

  9. RavanH
    Member
    Plugin Author

    Posted 1 year 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.

  10. RavanH
    Member
    Plugin Author

    Posted 1 year 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.

  11. faeronsayn
    Member
    Posted 1 year 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.

  12. RavanH
    Member
    Plugin Author

    Posted 1 year 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...

  13. faeronsayn
    Member
    Posted 1 year 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.

  14. faeronsayn
    Member
    Posted 1 year 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.

  15. faeronsayn
    Member
    Posted 1 year 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

  16. faeronsayn
    Member
    Posted 1 year ago #

    Resolved o.o?

  17. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Resolved o.o?

    No, this second issue (the iframe getting cleared after closing) is not resolved...

    I tried the same embed code with the same move on http://demo.status301.net/easy-fancybox-sandbox/ and there it does not show this issue. On your site, there is just too much javascript being loaded at the same time. Let alone the two other lightbox scripts: prettyPhoto and colorBox that are active right now... I'm afraid I cannot find out what is going wrong. Sorry.

  18. faeronsayn
    Member
    Posted 1 year ago #

    I've noticed a couple of things, the fancybox on your site that displays the video is noticeably different than the one that I had implemented. The one that I had implemented was a lot similar to the one that pops up when you click on one of the images below on your site. You can notice the difference in animation and appearance. Maybe you're using a different fancybox / class?

    The one that I was using for the video looked and functioned similar to the one that your images are popping in on your site.

    The one that you have the video in has a very different animation.

  19. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hmmm... you might want to install the development version then. Go to http://wordpress.org/extend/plugins/easy-fancybox/developers/ and find it under Other Versions. Download, unpack and upload via FTP.

    Then you will see on Settings > Media a new section dedicated for Inline content (as opposed to Images+Inline combined) where you can differentiate these effects.

    Maybe it does make the difference. Who knows...

  20. faeronsayn
    Member
    Posted 1 year ago #

    I'd first like to thank you for being so helpful. I've tried countless other overlay plugins and some of them work but none of their developers are giving any support.

    So I'd like to thank you for being so supportive and helping me out so much.

    On another note, I've added the dev4 version of the plugin. I've customized it a little bit, it looks great. But the problem presists. I think it could be something to do with what the fancybox does when you hit the close button. I've read somewhere that when the fancybox closes, there's a function for it, and you can tell it exactly what to do. Maybe this function is somehow clearing the iframe src.

    It's quite weird since it's working perfectly fine on your site. Additionally, everything else seems to be displaying fine even the iframe's height and width remain unchanged, just the iframe src is removed. I've tried the prettyPhoto plugin and it seems to work fine with not removing the iframe src. But it has its own problems.

  21. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hey, looking at your site now, the video shows the second time too... Did you clear your browser cache?

  22. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Oh, by the way: you need to give that chatandgo Falsh object a wmode="opaque" (or even "transparent" if you need to) otherwise it will give problems with z-index positioning in many browsers. Result is that it always goes over the fancybox layer.

  23. faeronsayn
    Member
    Posted 1 year ago #

    I'm actually trying to make it usable while the video is playing, so sometimes it's usable and other times it's not. So I can't figure that part out.

    That's quite weird how it's magically working again :D. Thanks for the help once again :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic