StackBuck StackBuck -4 years ago 248
HTML Question

How to implement Fancybox to popup outside an iFrame

I have small script that include iframe.
In that i frame i have an image configure via Fancybox to popup outside the iframe.

When i try to implement that fancybox option on an image link like they did (see iframe page 2 at the right) to popup image outside of iframe and upload it to my server- it is working well.

See here: My site

However, when i try to make that work on standalone version (means, i want that feature to work on my html files that on my computer only) i get no response and nothing happens.

I tought i missed the js and css forwarding part but im pretty sure i'v added and forward all the js and css to the correct spots. I really dont know why it is not working.

What i need is the image to popup like that:

enter image description here

But again, nothing happens in a standalone script.

Here is the main page code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jose Francisco Diaz / picssel.com" />
<title>call fancybox from an iframe in the parent page</title>
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script>
<link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" />

<style type="text/css">
a {outline: 0 none;}
#wrap {
width: 978px;
height: 1000px;
margin: 20px auto;
}
#iframe01 {
width: 450px;
height: 300px;
float: left;
}
#iframe02 {
width: 450px;
height: 300px;
float: right;
}
.spacer {
clear: both;
height: 1px;
display: block;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script>
</head>
<body>
<div id="wrap">

<iframe id="iframe01" src="../pages/7.html"></iframe>
<iframe id="iframe02" src="iframedPage02_20apr12.html"></iframe>
<div class="spacer"></div>

</div><!--wrap-->
</body>
</html>


And here is the iframe page code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript" src="fancybox2.0.4/helpers/helper.js" id="zZwx_MainScript"></script>
<link rel="stylesheet" href="fancybox2.0.4/helpers/helper.css" type="text/css" media="all" />

<style type="text/css">
#wrap { width: 100%;}
a {outline: 0 none;}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
<script type="text/javascript" src="fancybox2.0.4/helpers/jquery.fancybox-buttons.js"></script>

<script>
/* <![CDATA[ */
$(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'img/ebay-home.jpg', title: '01'},
],{
// href: this.href,
helpers: {
overlay: {
opacity: 0.3
} // overlay
//, buttons: {}
} // helpers
}); // fancybox
}); // click
$('.video').click(function(e){
e.preventDefault();
parent.$.fancybox({
href: this.href,
width: 560,
height: 315,
type: 'iframe',
helpers: {
overlay: {
opacity: 0.3
} // overlay
} // helpers
}); // fancybox
}); // click
$(".pdf").click(function(){
parent.$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
},
helpers: {
overlay: {
opacity: 0.3
} // overlay
}
}); //fancybox
return false;
}); //click
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<p>Hello, I am the iframed page 02.</p>
<p>Open different type of content (imagen, video and/or pdf) in fancybox outside the iframe in the parent page.</p><br />
<a class="imagen" href="img/ebay-home.jpg">open image gallery</a><br />
<a class="video" href="http://www.youtube.com/embed/3l8MwU0IjMI?autoplay=1">open youtube video</a><br />
<a class="pdf" href="images/Fancybox.pdf">open pdf</a>
</div>
</body>
</html>


And again here is a live one: My site

Answer Source

All i need is working image popup outside an iframe.

I found something that solve that but in the other way:

PureCSS full tutorial

enter image description here

And here is a live link: Here

And here is a configured JSfiddle

Here is the html:

       <!-- Lightbox usage markup -->
<section id="gallery">
    <!-- thumbnail image wrapped in a link -->
    <section class="item">
        <a href="#img1">
          <img src="http://oi67.tinypic.com/23lblu8.jpg">
        </a>
    </section>

</section>

<!-- lightbox container hidden with CSS -->
<div class="lightbox" id="img1">
  <div class="box">
    <a class="close" href="#">X</a>
    <p class="title">Lorem ipsum dolor sit amet</p>
    <div class="content">
        <img class="imgbox" src="http://oi67.tinypic.com/23lblu8.jpg"> 
        <p class="desc">Lorem ipsum dolor sit amet desc fully</p>
    </div>

    <div class="clear"></div>
  </div>
</div> 

Here is the css:

#gallery {
    width:600px;
    }

#gallery a {
    text-decoration:none;
    }

#gallery .item {
    width: 350px; height: 300px; overflow:hidden;
    border: 4px solid #333;

    margin: 5px;
    margin-right: -20px;
    }


#gallery .item a { 
    overflow: hidden;
    }

#gallery .item a img {
    height: 100%; 
    align-self: center;
    }

.lightbox {
    /** Hide the lightbox */
    display: none;


    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 95%;
    height: 75%;
    top: 0;
    left: 0;
    color:#333333;
    }

.lightbox:target {
    /** Show lightbox when it is target */
    display: block;
    outline: none;
}

.lightbox .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    min-width:500px;
    margin: 0 auto;
    padding:10px 20px 10px 20px;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #777777; 
    }

.lightbox .title {
    margin:0;
    padding:0 0 10px 0px;
    border-bottom:1px #ccc solid;
    font-size:22px;
    }

.lightbox .content {
    display:block;
    position:relative;
    }

.imgbox {max-width: 830px; }


.lightbox .content .desc {
    z-index:99;
    bottom:0;
    position:absolute;
    padding:10px;
    margin:0 0 4px 0;
    background:rgba(0,0,0,0.8);

    color:#fff;
    font-size:17px;
    opacity:0;
    transition: opacity ease-in-out 0.5s;
    }   

.lightbox .content:hover .desc  {
    opacity:1;
}

.lightbox .next,
.lightbox .prev,
.lightbox .close {
    display:block;
    text-decoration:none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:22px;
    color:#858585;
    }

.prev {
    float:left;
    }

.next, .close {
    float:right;
    }

    .clear {
        display:block;
        clear:both;
        }

And now i can popup images outside an iframes.

No server side needed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download