Fancybox and JQuery Menu coexistence.

MNICEGUY

unread,

Oct 11, 2010, 12:03:50 AM10/11/10

to fancybox

I'm trying to build a site and I couldn't get the fancybox to open.
When the reference was clicked, rather then opening up the box on the
same page, it would just open a new tab/page and take my to the image.
The fancybox was not working.

So, I started deleting stuff from the site trying to find the problem,
and eventually I narrowed it down to my menubar, that also uses
jQuery. So reverted the site back, duplicated it and stripped it down
again so that the only two things were the menubar and the fancybox.

There is a section of code that calls a script for the menu bar. I've
figured out that when that script is removed, the fancybox works, when
it's there, the fancybox just opens a new page and shows me the image.

I've posted a link below to my site folder. Including all the html,
css and javascript files in order to view the stripped site. This is
pretty small and just has the menubar and the fancybox.

Please, I beg of you, download my stripped site and take a look at
"index.html" and see if you can identify why the two jQuery objects
won't coexist. I've appropriately labeled the parts of script that
work with the menubar and the parts of script that work with the
fancybox.

Thanks in avance!

Mr. NiceGuy

MNICEGUY

unread,

Oct 11, 2010, 12:19:26 AM10/11/10

to fancybox

Here's the site folder:

http://www.mediafire.com/?u85h6x2616s1bh1

JFK

unread,

Oct 11, 2010, 1:57:14 AM10/11/10

to fancybox

would be nicer to see it live
no time to download, install and debug
(I say to my kids every Halloween: don't get candies from
strangers ...... so I don't download files from strangers)

Mr. NoSoNice

MNICEGUY

unread,

Oct 11, 2010, 9:45:27 AM10/11/10

to fancybox

Fine. I don't have a domain name right now, so I'll just post the code
here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Flux User" />
<meta name="description" content="My Website" />
<meta name="keywords" content="Flux, Mac" />
<link href="main.css" rel="stylesheet" type="text/css" />
<title>The Nozzle - If Life Had A Source Code You'd Find It Here</
title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js" ></script>
<script type="text/javascript" src="./fancybox/
jquery.mousewheel-3.0.2.pack.js" ></script>
<script type="text/javascript" src="./fancybox/
jquery.fancybox-1.3.1.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="jquery.easing.1.3.js" ></script>



<script type="text/javascript" charset="utf-8" >
$(function () {
if ($.browser.msie && $.browser.version < 7) return;

$('#navigation li')
.removeClass('highlight')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity',
0);
$(this).hover(function () {
// on hover
$span.stop().fadeTo(500, 1);
}, function () {
// off hover
$span.stop().fadeTo(500, 0);
});
});

});
</script>
<script type="text/javascript" >
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
<script src="Libraries/jquery-1.4.2.min.js" type="text/javascript" ></
script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript" src="jquery.easing.1.3.js" ></script>


<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /
>
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen" />


<script type="text/javascript" >
$(document).ready(function() {
/*
* Examples - images
*/

$("a#example1").fancybox({
'titleShow' : false
});

$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example3").fancybox({
'titleShow' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("a#example4").fancybox();

$("a#example5").fancybox({
'titlePosition' : 'inside'
});

$("a#example6").fancybox({
'titlePosition' : 'over'
});

$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex,
currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex +
1) + ' / ' + currentArray.length + (title.length ? '   ' +
title : '') + '</span>';
}
});

/*
* Examples - various
*/

$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});

$("#various2").fancybox();

$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>



<style>
body {
font-family:Arial;
}

span.reference {
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}

span.reference a {
color:#AAAAAA;
text-transform:uppercase;
text-decoration:none;
text-shadow:rgb(0, 0, 0) 1px 1px 1px;
margin-right:30px;
}

span.reference a:hover {
color:#DDDDDD;
}

ul.sdt_menu {
margin-top:150px;
}

h1.title {
text-indent:-9000px;
background-image:url(title.png);
background-repeat-x:no-repeat;
background-repeat-y:no-repeat;
background-repeat:no-repeat;
background-attachment:initial;
background-position:0% 0%;
background-position-x:0%;
background-position-y:0%;
background-origin:initial;
background-clip:initial;
background-color:transparent;
width:633px;
height:69px;
}

</style>


<link rel="stylesheet" type="text/css" href="./fancybox/
jquery.fancybox-1.3.1.css" media="screen" />


</head>
<body>
<div style="margin-bottom:0; height:83px; width:100%; position:fixed;
background-color:rgba(0,0,0,0.324219); left:7px; top:132px; border:1px
solid #000000; " >
</div>

<div class="content" >

<ul id="sdt_menu" class="sdt_menu" style="height:5px; left:8px;
top:-56px; " >
<li style="background-color:rgba(0,0,0,0.449219); left:503px;
top:-18px; width:16.666%; " >
<a href="#" >
<img src="images/1.png" alt="" />
<span class="sdt_active" ></span>
<span class="sdt_wrap" >
<span class="sdt_link" >Games</span>
<span class="sdt_descr" >where pigs fly<br/><span class="Apple-
style-span" style="color:#000000; letter-spacing:normal; text-
transform:none; " ><span class="sdt_wrap" style="display:inline; " ></
span></span></span></span></a><a href="#" style="display:inline; " ></
a> <div class="sdt_box" >
<a href="#" >Portal 2</a>
<a href="#" >Civilization V</a>
<a href="#" >Prototype</a>
</div><a href="#" style="display:inline; " ></a>
</li>
<li style="background-color:rgba(0,0,0,0.449219); width:170px;
left:502px; top:-18px; " >
<a href="#" >
<img src="images/2.png" alt="" />
<span class="sdt_active" ></span>
<span class="sdt_wrap" >
<span class="sdt_link" >Apps</span>
<span class="sdt_descr" >Tools of the mind</span>
</span>
</a>
<div class="sdt_box" >
<a href="#" >CloudApp</a>
</div>
</li>

<li style="background-color:rgba(0,0,0,0.449219); left:501px;
top:-18px; width:16.666%; border-right:1px solid #000000; " >
<a href="#" >
<img src="images/5.png" alt="" />
<span class="sdt_active" ></span>
<span class="sdt_wrap" >
<span class="sdt_link" >projects</span>
<span class="sdt_descr" >free stuff!</span>
</span>
</a>
<div class="sdt_box" >
<a href="#" >The Real Big Project</a>
</div>
</li>
<li style="background-color:rgba(0,0,0,0.449219); left:500px;
top:-18px; width:16.666%; " >
<a href="#" >
<img src="images/6.png" alt="" />
<span class="sdt_active" ></span>
<span class="sdt_wrap" >
<span class="sdt_link" >The nozzle</span>
<span class="sdt_descr" >about us</span></span>
</a>
</li>
<span class="Apple-style-span" style="font-family:helvetica; font-
size:medium; " ></span></ul></div>
<div style="left:-3px; top:19px; " >
<span class="reference" > <a href="http://
www.flickr.com/photos/arcticpuppy/sets/72157622090180990/" ></a>
</span>
</div>


<a id="example2" href="./example/2_b.jpg" ><img alt="example2" src="./
example/2_s.jpg" style="position:relative; left:-379px; top:102px;" /
></a>


<div style="position:relative; float:none; margin-left:auto; margin-
right:auto; display:block; left:-382px; top:-217px; " id="logoglow" ></
div>

</body>
</html>

MNICEGUY

unread,

Oct 11, 2010, 8:32:55 PM10/11/10

to fancybox

Anyone, please help!!! :O

> <span class="reference" > <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157622090180990/" ></a>

JFK

unread,

Oct 11, 2010, 11:32:14 PM10/11/10

to fancybox

there are many possible reasons your script is not working but hard to
say if I don't see it live
just browsing your code I can see you are trying to load jquery three
times ... wonder why?

sorry, no time to debug further ....let me know if you manage to put
your site live

> ...
>
> read more »

MNICEGUY

unread,

Oct 12, 2010, 12:31:06 AM10/12/10

to fancybox

I'm calling it 3 times because I have multiple script that require it.
If I call it at different places the scripts wont work. Am i doing it
wrong?

> ...
>
> read more »

mygoggie

unread,

Oct 12, 2010, 1:51:50 AM10/12/10

to fanc...@googlegroups.com

Had a quick look at your code and one thing I see is that you are loading the JS files using relative paths. Firstly change all of that to absolute paths.



No virus found in this incoming message.
Checked by AVG - www.avg.com 
Version: 9.0.862 / Virus Database: 271.1.1/3191 - Release Date: 10/11/10 20:34:00

JFK

unread,

Oct 12, 2010, 4:18:40 AM10/12/10

to fancybox

if a passport is travel requirement and you are traveling to three
different countries, it doesn't mean that you need three passports...
a single call to jquery should be enough, just call it preferably
before than any other script that relies on it
..... an absolute path as suggested by mygoggie will help you to be
sure where you are calling the scrip from

> >> if ($.browser.msie&& $.browser.version< 7) return;

> ...
>
> read more »

Reply all

Reply to author

Forward