FancyBox code problem - Cannot read property "hide" of undefined

[Stuart]

Hello everyone

I am having some trouble getting FancyBox to work on my site.

To begin with I had a load of errors because I hadn't set up the file paths correctly, made syntax errors or just straight out typos but I've sorted them all out (as far as I can tell) and the only error I still get is

"Uncaught TypeError: Cannot read property 'hide' of undefined". This error only occurs when I click on the image that I want to open a FancyBox, nothing happens to the image.

Looking through the error I am directed to a piece of code in the file "jquery.fancybox-1.3.4.js". The line is "loading.hide();" which is part of "function($)"

I assume that this indicates that "loading" is undefined and by extension "hide" of "loading" is missing, does anyone know what might cause that?

I have not found where "loading" is defined in "jquery.fancybox-1.3.4.js", is it defined in a separate file somewhere?

Thank you for any assistance, it is appreciated.

Stuart

[JFK]

I don't think that is the root cause of your issue, but a collateral error
however it's hard to guess without looking at your actual code
got a link?

[Stuart]

Hello JFK

Thanks for the response, unfortunately I've installed Fancybox on our test site so I could try and work out any problems before I put it on our live site. The test site is not accessible from public internet.

I'll install it on our live site on a test page and post a link.

Also...

Feel free to shop around the site :)

[Stuart stuartwl13]

Hello JFK

I've done a bit of a rushed installation of Fancybox, the only error I get on the live site is the same as the test site.

The link to the site is:

http://www.hoopersstores.com/test

Hopefully I haven't messed up the installation any worse than the original because I was rushing.

Is there any other information you would need?

Thanks for your help

--
You received this message because you are subscribed to a topic in the Google Groups "FancyBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fancybox/s87VGyU97sY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fancybox+u...@googlegroups.com.
To post to this group, send email to fanc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/fancybox/6d939730-4cab-4d99-a4a0-d0b18c644fc8%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Stuart stuartwl13]

Hello JFK

Looking through this a bit more closely the error has changed slightly on the live site.

It is still an "Uncaught Type Error: Undefined is not a function" but now it is referencing "_show" (line 324), "_process_image" (line 316) and "imgPreloader.onload" (line 212).

For this error to change I must have done something different with the installation but I don't know what that was.

Thanks

[Stuart stuartwl13]

Hello again!

I figured out what I did differently in the install, I completely missed adding the file references into the header.

With these now added the error has gone back to

"Uncaught TypeError: Cannot read property 'hide' of undefined"

Thanks

[Stuart stuartwl13]

Hello

Does anyone have any ideas about what might be wrong with my setup?

It's quite frustrating that I can't get this to work.

Thanks

Stuart

[JFK]

you either load
jquery.fancybox-1.3.4.js
or
jquery.fancybox-1.3.4.pack.js

but not both

[Stuart stuartwl13]

Hello JFK

Thanks for the help, removing jquery.fancybox-1.3.4.js has resulted in a different error:

Uncaught TypeError: undefined is not a function

(anonymous function)

n

o.firewith

e.extend.ready

c.addEventListener.C

Most of these have come from the file "jquery-1.7.min.js" line 2.

I think that I read somewhere that fancybox v1.3.4 is not compatible with jquery 1.7 so I've tried removing that as well.

This results in errors from other sections that need jquery 1.7 but not from when the fancybox loads.

After clicking on the fancybox it now appears!...

At the end of the page as if it were a normal section of HTML, it also throws up an error of:

Uncaught TypeError: undefined is not a function

Q - Line 25 of jquery.fancybox-1.3.4.pack.js

v.onload - Line 22 of jquery.fancybox-1.3.4.pack.js

I understand that Fancybox v2 is compatible with jquery 1.7, to avoid issues with other scripts I think that it might be easier to switch to Fancybox v2 and try to get that to work. Do you know where I can download Fancybox v2? I can't see it on the Magento site which is where I found Fancybox 1.3.4

Thank you for your help

Stuart

--
You received this message because you are subscribed to a topic in the Google Groups "FancyBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fancybox/s87VGyU97sY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fancybox+u...@googlegroups.com.
To post to this group, send email to fanc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/fancybox/4389f2e1-ce9b-47d8-ba07-8966be52a1bf%40googlegroups.com.

[JFK]

Fancybox v1.3.4 works perfectly fine with jQuery v1.7

Here is a demo working actually with jQuery v1.6.4
http://jsfiddle.net/5SLy4/

The problem I see on your demo page
http://www.hoopersstores.com/test

is that you are actually loading two different versions of jQuery (v1.4.4 and v1.7)
http://www.hoopersstores.com/js/lightboxes/fancybox/jquery.code.js
http://www.hoopersstores.com/js/jquery/jquery-1.7.min.js

I guess you need to get rid of v1.4.4 (same as fancybox, you only need a single version)

On Tuesday, July 22, 2014 2:26:00 AM UTC-7, Stuart wrote:

Hello JFK

Thanks for the help, removing jquery.fancybox-1.3.4.js has resulted in a different error:

Uncaught TypeError: undefined is not a function

(anonymous function)

n

o.firewith

e.extend.ready

c.addEventListener.C

Most of these have come from the file "jquery-1.7.min.js" line 2.

I think that I read somewhere that fancybox v1.3.4 is not compatible with jquery 1.7 so I've tried removing that as well.

This results in errors from other sections that need jquery 1.7 but not from when the fancybox loads.

After clicking on the fancybox it now appears!...

At the end of the page as if it were a normal section of HTML, it also throws up an error of:

Uncaught TypeError: undefined is not a function

Q - Line 25 of jquery.fancybox-1.3.4.pack.js

v.onload - Line 22 of jquery.fancybox-1.3.4.pack.js

I understand that Fancybox v2 is compatible with jquery 1.7, to avoid issues with other scripts I think that it might be easier to switch to Fancybox v2 and try to get that to work. Do you know where I can download Fancybox v2? I can't see it on the Magento site which is where I found Fancybox 1.3.4

Thank you for your help

Stuart

On Tue, Jul 22, 2014 at 1:38 AM, JFKwrote:

[Stuart stuartwl13]

Hello JFK

Thanks for your continued help, it is really appreciated.

I have removed the jquery.code.js file and left the 1.7 file.

This resulted in 3 Uncaught Reference errors and 1 uncaught type error. Looking through my code I figured that the uncaught reference errors were because of the order that I was loading things. By moving them to after jquery-1.7 was loaded they stopped occurring (including the uncaught type error).

With the Fancy box files loading after jquery-1.7 the page loads without error, however when I click on the link to the Fancybox an Uncaught type error is detected for:

Q - jquery.fancybox-1.3.4.pack.js - Line 25

v.onload - jquery.fancybox-1.3.4.pack.js - Line 22

Many thanks

Stuart

--
You received this message because you are subscribed to a topic in the Google Groups "FancyBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fancybox/s87VGyU97sY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fancybox+u...@googlegroups.com.
To post to this group, send email to fanc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/fancybox/add4f664-d789-49f2-889e-c82a75551ee0%40googlegroups.com.

[JFK]

That is a typical error that happens in fancybox v1.3.4 when the fancybox css file is not loaded or is missing

The issue has been reported (long time ago) on this post :
http://stackoverflow.com/q/4468348

Now you will say :
"I swear I am loading the fancybox css file. If you inspect the source code, you will see it's there"

Well, yes it's there but the issue is that you are loading the file like :
<link rel="stylesheet" type="text/css" href="...path/jquery.fancybox-1.3.4.css" media="print" />

Notice the media="print" attribute, which means that the file will be loaded if (and if only) you are outputting the document to a printer device.

So you either change it to
media="screen"
or
media="all"

On Wednesday, July 23, 2014 2:02:26 AM UTC-7, Stuart wrote:

Hello JFK

[Stuart stuartwl13]

Hello JFK

I have changed the "print" to "all" and the Fancybox is working just as advertised.

Thank you very much for your help, I never would have noticed the media"print" problem.

I'm going to have a bit of a play around with this to try and get some different effects and things, hopefully I won't break it! (I'll make a backup first)

The time and effort that you have spent on this is really appreciated.

Thank you

Stuart

--
You received this message because you are subscribed to a topic in the Google Groups "FancyBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fancybox/s87VGyU97sY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fancybox+u...@googlegroups.com.
To post to this group, send email to fanc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/fancybox/df6f96ff-73ac-4762-b297-2d1660b9f9c9%40googlegroups.com.

[Максим Нигадяев]

Hello, Stuart!

May it's a little bit later after two years, but.. :) In my case that was strange thing happened: someone added the 

<div id="fancybox-tmp"></div><div id="fancybox-loading"><div></div></div><div id="fancybox-overlay"></div><div id="fancybox-wrap"><div id="fancybox-outer"><div class="fancy-bg" id="fancy-bg-n"></div><div class="fancy-bg" id="fancy-bg-ne"></div><div class="fancy-bg" id="fancy-bg-e"></div><div class="fancy-bg" id="fancy-bg-se"></div><div class="fancy-bg" id="fancy-bg-s"></div><div class="fancy-bg" id="fancy-bg-sw"></div><div class="fancy-bg" id="fancy-bg-w"></div><div class="fancy-bg" id="fancy-bg-nw"></div><div id="fancybox-inner"></div><a id="fancybox-close"></a><a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a><a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a></div></div

code into the bottom of the html-page. Removing it solves the problem; I think error appears because script is trying to modify DOM-tree, but after that modifying two fancybox wrappers in the DOM in it's not clear for script what to hide.

In any case just try to resintall completely whole bundle of fancybox files. If it will not help, then write html from scratch or check it very accurate. The script works 100% (even regardless to it's unsupported version).

четверг, 24 июля 2014 г., 15:21:33 UTC+6 пользователь Stuart написал: