Fancybox2, open hidden div and not an image

JavaScript
1

Hi,

I am adding fancybox2 to my site, and have used the simple code to open an image but what I need is to open a hidden div and also pass a paramiter to it through the url i think.

<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>

This is the link I have at the moment

<a class="fancybox" href="Cross.jpg">

But instead of the image I need it to open a div and pass some variables to it too

2

Just replace <a> with <div> with the same class

3

Ah its not as simple as that as i got a lot going on with that link, idealy I keep the ‘a’ there and I call a div hidden on the page to appear in the fancybox layer and also pass variable to it via the link.

<div class='obj'><a class="fancybox" href="Cross.jpg"><p class='text'>REQUEST REPORT</p><div class='item'><img src=http://www.checksafetyfirst.com<?php echo $nt['Foto1_Hot']?> alt='' width='360' height='239'><div class='item-overlay top'></div></div></a><p class='nameHotel'><?php echo $nt['Nom_Hot']?></p><p class='addressHotel'><?php echo $nt['Dir_Hot']?></p></div>
4

Tried this, but no luck

<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$('#login-form').submit(function(e) {
$.fancybox({
href: '#access-policy', 
modal: true
});
return false;
});
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>

<a class="fancybox" href="#">

<div style="display:none">
<div id="access-policy">
blah blah blah
</div>
</div>
5

This doesn’t work?

$('#login-form').fancybox({modal: true});
6

Just checking I have this right with you as it didnt work.

<a class="fancybox" href="#">

<script type="text/javascript">
$('#login-form').fancybox({modal: true});
</script>

<div style="display:none">
<div id="access-policy">
blah blah blah
</div>
</div>

I’d need to pass some variables to it too, so I suppose my link would be more like

<a class="fancybox" href="#?ID=12345">
7

Well, I typed wrong selector, it has to be #access-policy of course

$('#access-policy').fancybox({modal: true});
8

Ah yes sorry I should have spotted that myself.

It def popped up, but rather than showing the blah blah blah bit inside the div, it put a sort of system message up which I dont know where its coming from

The requested content cannot be loaded. Please try again later.

And you lose the fancybox functionality of clicking the outside to close

I just had a shuffle around of the code, and its stopped working all together now again, strange

9

OK I got it fixed now, changed the code a bit but here it is

<a href="#content-div" class="fancybox">

<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
$(".fancybox").fancybox();
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>

<div id="content-div" style="display: none">Some content here</div>
10

Ah, shouldnt have been so hasty in saying fixed, but this is I suppose a different matter.

On trying to pass an ID to the div the whole process failed, so Im guessing its because the text after the # has now changed and so doesnt relate to the name of the div its caling

<a href="#content-div?ID=<?php echo $nt['Id_Hot']?>"

<div style="display: none">
<?php if(!empty($_POST["ID"])){ $hid = $_POST["ID"]; } ?> 
<div id="content-div" style="width:400px;height:400px;overflow:auto;"><?php echo $hid; ?>Some content here</div>
</div>

So I’m guessing this might be a better way, but how do I collect it and pass it into the hidden div and use it

<a href="#content-div" data-HID="<?php echo $nt['Id_Hot']?>" class="fancybox">

Via

<script type="text/javascript">
$(".fancybox").fancybox();
</script>

To

<div style="display: none">
<div id="content-div">Some content here</div>
</div>
11

I have managed to take the id of the hotel and pass it using data to a script and it def works as can see the id of each click via an alert as below, so all not to bad, but I am attempting to get the hotel id to appear in the div area in fancybox but its not appearing.

<a href="#content-div" data-HID="<?php echo $tutorial_id?>" class="fancybox" id="fancyID">

<script>
$(document).ready(function(){
$(document).on('click','#fancyID',function(){
var $fancyid = this.dataset.hid;
alert ($fancyid);
var $jqValue = $('.jqValue');
$jqValue.html($fancyid.val());
});
});
</script>
<div id="content-div" style="display: none">Some content here <span class="jqValue"></span></div>
12

Ive got it if anyone needs to know

<script>
$(document).ready(function(){
$(document).on('click','#fancyID',function(){
var fancyid = this.dataset.hid;
document.getElementById("jqValue").innerHTML=fancyid;
});
});
</script>
<div id="content-div" style="display: none">Some content here <span id="jqValue"></span></div>
1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.