CODEWITHSUNDEEP
jqueryhtmliframefancybox-2
Tasos
Tasos

Reputation: 1642

Load fancybox content inside div?

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")

Upvotes: 0

Views: 2801

Answers (2)

Rafeeque
Rafeeque

Reputation: 933

You can add an option parentEl to the fancybox options,

Just like parentEl: '.myDivClass'

Upvotes: 0

JFK
JFK

Reputation: 41143

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

Upvotes: 2

Related Questions