0

I am trying to change the fancybox 2 functionality by placing the content inside a div(instead of floating it on the center of the screen) which at first will be hidden, and will expand to fit it's content. When the close button is hit then the div will shrink and hide again.

I am using iframe fancybox type for this and the content that will be loaded is html. I tried to use appendTo but had no success, any ideas on how to pull this out?

fancybox js file:

overlay:f('<div class="fancybox-overlay"></div>').appendTo(b.parent||"body")

if appendTo myDiv nothing changes(content still loads but in the middle of the body):

overlay:f('<div class="fancybox-overlay"></div>').appendTo("#myDiv")
Tasos
  • 1,622
  • 4
  • 28
  • 47

2 Answers2

2

You may not need fancybox for that but create your own customized script.

Just for fun, with an html like this

<a class="myfancy" href="http://jsfiddle.net/">show my content in div</a>
<div id="targetContent"> 
    <a id="myClose" href="javascript:;">X</a>
    <iframe id="targetIframe"></iframe>
</div>

use some CSS to hide the #targetContent like 

#targetContent {
    position: relative;
    display: none;
    width: 500px;
    height: 350px;
    overflow: visible;
    background-color: #fff;
}

and style your close button #myClose the way you need it.

Also set the basic CSS for the iframe like 

#targetIframe {
    width: 100%;
    height: 100%;
    border: 0 none;
}

Then use this code to bind all your selectors to their specific events and callbacks for smooth transitions

jQuery(function ($) {
    // cache elements
    var $targetDiv = $("#targetContent"),
        $iframe = $targetDiv.find("#targetIframe"),
        $close = $targetDiv.find("#myClose");
    // bind click events to first link and close button
    $(".myfancy").on("click", function (e) {
        e.preventDefault();
        $iframe.attr({
            "src": this.href // add the content to iframe before showing
        }).parent($targetDiv).slideDown(500, function () { //show div
            $close.fadeIn(200).on("click", function () { 
                $(this).fadeOut(100, function () { // fade out close button
                    $targetDiv.slideUp(500, function () { // hid div by sliding it up
                        $iframe.removeAttr("src"); // remove after closing the box
                    }); // slideUp
                }); // close fadeOut                
            }); // on click myClose
        }); // slideDown
    }); // on click link
}); // ready

See JSFIDDLE

NOTE: .on() requires jQuery v1.7

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Your example is great, but I wanted to use fancybox in order to be able to use the next/previous functionality for all my html pages and also the close button and title basically. Do you think adding the fancybox inside another iframe that will act like your example would be possible? Here's a site that shows the effect I am looking for, just click on one of the portfolio items: http://bybu.es/ – Tasos Sep 01 '13 at 20:56
  • 1
    @zefs : yes, it will. Check the demo of this post http://stackoverflow.com/a/8855410/1055987 and it will behave like the left iframe. – JFK Sep 01 '13 at 20:59
  • Thanks I will try that :) Marking your answer as accepted but will post again here if I get stuck in the process. – Tasos Sep 01 '13 at 21:02
  • So, I was thinking about this again and using 2 iframes for this is probably not the best method. Would it be too hard to implement next/previous buttons and "rel" functionality(like on fancybox) on your example? – Tasos Sep 02 '13 at 05:16
  • @zefs : as hard as customizing fancybox to open in a div (it would be like creating a new plugin). I guess it will take more time than I would normally spend answering questions in stackoverflow, sorry :/ – JFK Sep 02 '13 at 07:09
  • Yeah, I see. No worries though, could you tell me how to resize the iframe on your example dynamically to fit it's content? I found the code and made a new question here: http://stackoverflow.com/questions/18566941/jquery-animate-for-iframe-resize - The code works but it doesn't animate. – Tasos Sep 02 '13 at 07:11
  • @zefs : in my example, the iframe has 100%x100% size so it adjusts to the size of the parent container `
    ` so you just need to change the dimensions of such div, dynamically if you want using `.css()` or `.animate()`
     – JFK Sep 02 '13 at 07:14
  • Yes, but how do you tell it to dynamically fit it's content using animate? This gives me a fixed height on every content: `$("#targetContent").animate({ height:$("#targetIframe").height() },500);` Isn't contentWindow required for it to work? like on the other question I linked. – Tasos Sep 02 '13 at 07:21
  • well, you may need to set specific dimensions to each page (the html tag) and the use `.contents()` to find the size of each iframe and resize your div accordingly. Like in this example with fancybox http://stackoverflow.com/a/12192258/1055987 – JFK Sep 02 '13 at 07:30
  • Hmm, not exactly what I was looking for(adding the dimensions manually). We surely can't intergrate jquery's animate on this example? `$('iframe').load(function() { this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; });` – Tasos Sep 02 '13 at 07:36
  • 1
    @zefs : personally, I wouldn't count on that because can be really buggy (I did all kind of tests while answering that question) ... you can try though. – JFK Sep 02 '13 at 07:39
  • Alright, then if I just wanted to load my current fancybox inside the #targetIframe and keep the functionality of your script, how would I do that? – Tasos Sep 02 '13 at 07:45
  • @zefs : don't get me wrong but as in my previous comment, it would be a tricky and long customization process unless you open fancybox from the iframe itself as also previously suggested http://stackoverflow.com/a/8855410/1055987 – JFK Sep 02 '13 at 07:54
  • JFK, I think I found it! Although there is a small problem, sometimes a few pixels of the bottom of the content are lost after clicking on the links multiple times. Any ideas? `$('iframe').load(function() { $(this).animate({ height:( $(this).contents().find("body").height()) },500); });` – Tasos Sep 02 '13 at 09:25
  • Nvm, adding
    on the html files helped. There is another issue though some times it doesn't animate, I suppose it is the reason you mentioned "buggy". I suppose it's caused by the $iframe.removeAttr("src");     – Tasos Sep 02 '13 at 09:47
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36661/discussion-between-zefs-and-jfk) – Tasos Sep 02 '13 at 13:11
0

You can add an option parentEl to the fancybox options,

Just like parentEl: '.myDivClass'

Rafeeque
  • 845
  • 9
  • 13