Fancybox doesn't work!!! frustrated

5,034 views
Skip to first unread message

webdesgnr14

unread,
Jan 5, 2010, 3:50:59 PM1/5/10
to fancybox
I've been trying to make a gallery of my work, I have tried almost
everything from Lightbox 2 to prettyPhoto and now Fancybox. I just
cant seem to get it to work.
I set up everything the way it said to and still no luck. Whenever I
click on my thumbnails it doesnt seem to be like the javascript is
working. The thumbnail opens up the big photo in a new window. Can
someone help me please.

Jefgun

unread,
Jan 5, 2010, 4:00:26 PM1/5/10
to fancybox
Hi,
Check to see if your javascript "ID" tags are identical with your
image DIV tags:

In the head area of your document:

<script type="text/javascript">
$(document).ready(function() {
$("#col_wrap a").fancybox();
});
</script>

In your image tags:

<div align="center" id="col_wrap">


Notice the ("#col_wrap a")

I'm no javascript expert, but I've found that the Fancybox gallery
won't display and work as intended unless these tags match.
Good luck!!

webdesgnr14

unread,
Jan 5, 2010, 4:07:12 PM1/5/10
to fancybox
thanks for replying. I also don't know much about javascript. Take a
look at my source code and see if you can help. "sheriserogers.com" I
appreciate it!

Jefgun

unread,
Jan 5, 2010, 4:27:17 PM1/5/10
to fancybox
Looks like you might be missing a character in your image tags...

The javascript has to match each image tag for the group: <a
class="group" a rel="group" ....>

Notice the "a" missing before "class"? <a rel="group"
class="gallery"...>

Stick that in there and re-upload to see what happens...

sherise Rogers

unread,
Jan 5, 2010, 4:34:52 PM1/5/10
to fanc...@googlegroups.com

No luck. Again thanks for your time

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.



sherise Rogers

unread,
Jan 5, 2010, 4:36:45 PM1/5/10
to fanc...@googlegroups.com

How about my linked files what do you think?

On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote:

Jefgun

unread,
Jan 5, 2010, 4:39:16 PM1/5/10
to fancybox
What linked files? You mean your website?


On Jan 5, 1:36 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:
> How about my linked files what do you think?
>
> On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote:
>
> Looks like you might be missing a character in your image tags...
>
> The javascript has to match each image tag for the group: <a
> class="group" a rel="group" ....>
>
> Notice the "a" missing before "class"? <a rel="group"
> class="gallery"...>
>
> Stick that in there and re-upload to see what happens...
>
> --
> You received this message because you are subscribed to the Google Groups
> "fancybox" group.
> To post to this group, send email to fanc...@googlegroups.com.
> To unsubscribe from this group, send email to

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>

JFK

unread,
Jan 5, 2010, 4:41:28 PM1/5/10
to fancybox
you are loading jquery twice

On Jan 5, 1:36 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:

> How about my linked files what do you think?
>
> On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote:
>
> Looks like you might be missing a character in your image tags...
>
> The javascript has to match each image tag for the group:  <a
> class="group"  a rel="group" ....>
>
> Notice the "a" missing before "class"?  <a rel="group"
> class="gallery"...>
>
> Stick that in there and re-upload to see what happens...
>
> --
> You received this message because you are subscribed to the Google Groups
> "fancybox" group.
> To post to this group, send email to fanc...@googlegroups.com.
> To unsubscribe from this group, send email to

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>

sherise Rogers

unread,
Jan 5, 2010, 4:44:53 PM1/5/10
to fanc...@googlegroups.com

No the fancybox javascript files. I went along the usage page on the fancybox website. www.fancybox.net/howto

On Jan 5, 2010 4:39 PM, "Jefgun" <j...@guniondesign.com> wrote:

What linked files? You mean your website?

On Jan 5, 1:36 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > How about my linked files ...

> On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote: > > Looks like you might be missin...

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> .
> For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.

To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

sherise Rogers

unread,
Jan 5, 2010, 4:47:38 PM1/5/10
to fanc...@googlegroups.com

I don't have a jquery file it wasn't in the folder when I downloaded so I searched for it. The other files were included. Wait except for the jquery.easing.js

On Jan 5, 2010 4:39 PM, "Jefgun" <j...@guniondesign.com> wrote:

What linked files? You mean your website?

On Jan 5, 1:36 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > How about my linked files ...

> On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote: > > Looks like you might be missin...

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> .
> For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.

To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

sherise Rogers

unread,
Jan 5, 2010, 4:52:27 PM1/5/10
to fanc...@googlegroups.com
i guess i loaded twice because i'm also using a scrolling javascript code. I took one out but i still cant get fancybox to work.

To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

JFK

unread,
Jan 5, 2010, 5:56:04 PM1/5/10
to fancybox
you have syntax errors:

<a rel="group" a class="group" ......

you are duplicating the anchor tag <a>
you should have:

<a rel="group" class="group" ......

On Jan 5, 1:52 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:
> i guess i loaded twice because i'm also using a scrolling javascript code. I
> took one out but i still cant get fancybox to work.
>

> On Tue, Jan 5, 2010 at 4:41 PM, JFK <jfk.d...@gmail.com> wrote:
> > you are loading jquery twice
>
> > On Jan 5, 1:36 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:
> > > How about my linked files what do you think?
>
> > > On Jan 5, 2010 4:27 PM, "Jefgun" <j...@guniondesign.com> wrote:
>
> > > Looks like you might be missing a character in your image tags...
>
> > > The javascript has to match each image tag for the group:  <a
> > > class="group"  a rel="group" ....>
>
> > > Notice the "a" missing before "class"?  <a rel="group"
> > > class="gallery"...>
>
> > > Stick that in there and re-upload to see what happens...
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > > "fancybox" group.
> > > To post to this group, send email to fanc...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > > fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>

> > <fancybox%2Bunsu...@googlegroups.com<fancybox%252Buns...@googlegroups.com>

sherise Rogers

unread,
Jan 5, 2010, 5:59:22 PM1/5/10
to fanc...@googlegroups.com

I corrected the issue you stated but still no change

On Jan 5, 2010 5:56 PM, "JFK" <jfk....@gmail.com> wrote:

you have syntax errors:

<a rel="group" a class="group" ......

you are duplicating the anchor tag <a>
you should have:

<a rel="group" class="group" ......

On Jan 5, 1:52 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > i guess i loaded twice becaus...

> On Tue, Jan 5, 2010 at 4:41 PM, JFK <jfk.d...@gmail.com> wrote: > > you are loading jquery twice >...

> > <fancybox%2Bunsu...@googlegroups.com<fancybox%252Buns...@googlegroups.com>

> > > > . > > > For more options, visit this group athttp:// > > groups.google.com/group/fancybox?hl...

> > For more options, visit this group at > >http://groups.google.com/group/fancybox?hl=en.


--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.

To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

JFK

unread,
Jan 5, 2010, 7:37:56 PM1/5/10
to fancybox
well, you suppose to be loading jquery js script BEFORE the fancybox
js script

so this line
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"
type="text/javascript"></script>
goes BEFORE, FIRST, ABOVE of this line
<script type="text/javascript" src="http://sheriserogers.com/wp-
content/themes/Sherise_Theme/fancybox/fancybox.js"></script>

actually, you suppose to be loading jquery js script BEFORE than any
other script that relay on it


On Jan 5, 2:59 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:
> I corrected the issue you stated but still no change
>

> On Jan 5, 2010 5:56 PM, "JFK" <jfk.d...@gmail.com> wrote:
>
> you have syntax errors:
>
> <a rel="group" a class="group" ......
>
> you are duplicating the anchor tag <a>
> you should have:
>
> <a rel="group" class="group" ......
>
> On Jan 5, 1:52 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > i
> guess i loaded twice becaus...
>
> > On Tue, Jan 5, 2010 at 4:41 PM, JFK <jfk.d...@gmail.com> wrote: > > you
>
> are loading jquery twice >...> > <fancybox%2Bunsu...@googlegroups.com<fancybox%252Buns...@googlegroups.com>
>

> <fancybox%252Buns...@googlegroups.com<fancybox%25252Bun...@googlegroups.com>


>
>
>
> > > > > . > > > For more options, visit this group athttp:// > >
>
> groups.google.com/group/fancybox?hl...
>
> > > For more options, visit this group at > >
>
> http://groups.google.com/group/fancybox?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups
> "fancybox" group.
> To post to this group, send email to fanc...@googlegroups.com.
> To unsubscribe from this group, send email to

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> .
> For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

sherise Rogers

unread,
Jan 5, 2010, 7:41:08 PM1/5/10
to fanc...@googlegroups.com

Ok thanks ill try that tomorrow and let you know of that works

On Jan 5, 2010 7:38 PM, "JFK" <jfk....@gmail.com> wrote:

well, you suppose to be loading jquery js script BEFORE the fancybox
js script

so this line
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"
type="text/javascript"></script>
goes BEFORE, FIRST, ABOVE of this line
<script type="text/javascript" src="http://sheriserogers.com/wp-
content/themes/Sherise_Theme/fancybox/fancybox.js
"></script>

actually, you suppose to be loading jquery js script BEFORE than any
other script that relay on it

On Jan 5, 2:59 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > I corrected the issue you st...

> On Jan 5, 2010 5:56 PM, "JFK" <jfk.d...@gmail.com> wrote: > > you have syntax errors: > > <a rel="...

> <fancybox%252Buns...@googlegroups.com<fancybox%25252Bun...@googlegroups.com>

> > > > > > > > . > > > For more options, visit this group athttp:// > > > > groups.google.com/group...

> fancybox+u...@googlegroups.com<fancybox%2Bunsu...@googlegroups.com>
> .
> For more options, visit this group athttp://groups.google.com/group/fancybox?hl=en.

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.

To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.

webdesgnr14

unread,
Jan 6, 2010, 9:44:55 AM1/6/10
to fancybox
omg! it works! thank you guys soooooo much!

On Jan 5, 7:41 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote:
> Ok thanks ill try that tomorrow and let you know of that works
>

> On Jan 5, 2010 7:38 PM, "JFK" <jfk.d...@gmail.com> wrote:
>
> well, you suppose to be loading jquery js script BEFORE the fancybox
> js script
>
> so this line
> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"
> type="text/javascript"></script>
> goes BEFORE, FIRST, ABOVE of this line
> <script type="text/javascript" src="http://sheriserogers.com/wp-
> content/themes/Sherise_Theme/fancybox/fancybox.js"></script>
>
> actually, you suppose to be loading jquery js script BEFORE than any
> other script that relay on it
>
> On Jan 5, 2:59 pm, sherise Rogers <swagg3rs0fr...@gmail.com> wrote: > I
> corrected the issue you st...
>
> > On Jan 5, 2010 5:56 PM, "JFK" <jfk.d...@gmail.com> wrote: > > you have
>

> syntax errors: > > <a rel="...> <fancybox%252Buns...@googlegroups.com<fancybox%25252Bunsubscribe@googl egroups.com>
>
> <fancybox%25252Bun...@googlegroups.com<fancybox%2525252Bunsubscribe@g ooglegroups.com>


>
>
>
> > > > > > > > > . > > > For more options, visit this group athttp:// > > > >
>

> groups.google.com/group...> fancybox+u...@googlegroups.com<fancybox%2Bunsubscribe@googlegroups.c om>
>
> <fancybox%2Bunsu...@googlegroups.com<fancybox%252Bunsubscribe@googlegro ups.com>


>
> > .
> > For more options, visit this group athttp://
>

> groups.google.com/group/fancybox?hl=en.
>
> --
> You received this message because you are subscribed to the Google Groups
> "fancybox" group.
> To post to this group, send email to fanc...@googlegroups.com.
> To unsubscribe from this group, send email to

> fancybox+u...@googlegroups.com<fancybox%2Bunsubscribe@googlegroups.c om>

salens82

unread,
Aug 24, 2013, 3:35:54 PM8/24/13
to fanc...@googlegroups.com
Hi , Guys I have same problem...  in offline from my comp when i start page work perfect fancybox, but when i upload to server it doesn't work :(( pls can someone help me??

Jan Wilson

unread,
Aug 24, 2013, 5:18:36 PM8/24/13
to fanc...@googlegroups.com
It is very unlikely that anyone will be able to help you unless you can
give a link to the online page that is "not working".

--
Jan Wilson

salens82

unread,
Aug 25, 2013, 12:59:00 PM8/25/13
to fanc...@googlegroups.com
Ok this is the link  http://mmparis.rs/    at bottom of main page is small gallery of few pic and fancybox doesn't work when click on picture this is the code from main page, one more time fancybox work well when i start site from computer in off line mode.. thx you for trying to help me! 


CODE from start where importing js,css,jquery etc.:


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bio</title>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/touchTouch.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/kwicks-slider.css" type="text/css" media="screen">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>  
<script type="text/javascript" src="js/touchTouch.jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-events.js"></script>
<script type="text/javascript" src="js/jquery.mobile-events.min.js"></script>
<script type="text/javascript">if($(window).width()>1024){document.write("<"+"script src='js/jquery.preloader.js'></"+"script>");}</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script>
$(document).ready(function() {
$("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 ? ' &nbsp; ' + title : '') + '</span>';
}
});


});
</script>



CODE where is small gallery for fancybox:  


<h3>Latest photoshoots:</h3>
              <ul class="list-photo">
            <li><a rel="example_group" href="img/43.jpg" class="magnifier1" ><img src="img/page1-img6.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/42.jpg" class="magnifier1" ><img src="img/page1-img7.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/1.JPG" class="magnifier1" ><img src="img/page1-img8.jpg " alt="" /></a></li>
            <li class="last"><a rel="example_group" href="img/9.JPG" class="magnifier1" ><img src="img/page1-img9.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/12.JPG" class="magnifier1" ><img src="img/page1-img10.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/44.jpg" class="magnifier1" ><img src="img/page1-img11.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/16.jpg" class="magnifier1" ><img src="img/page1-img12.jpg " alt="" /></a></li>
            <li class="last"><a rel="example_group" href="img/15.jpg" class="magnifier1" ><img src="img/page1-img13.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/27.jpg" class="magnifier1" ><img src="img/page1-img14.jpg " alt="" /></a></li>
            <li><a rel="example_group" href="img/33.jpg" class="magnifier1" ><img src="img/page1-img15.jpg " alt="" /></a></li>
            <!-- <li><a href="img/image-blank.png" class="magnifier" ><img src="img/page1-img16.jpg " alt="" /></a></li>
            <li class="last"><a href="img/image-blank.png" class="magnifier" ><img src="img/page1-img17.jpg " alt="" /></a></li> -->
          </ul> 


Rout to Fancybox dir is in file attached to this post.. 

THX for your Reply
Untitled.png

Tony Alfrey

unread,
Aug 25, 2013, 1:26:58 PM8/25/13
to fanc...@googlegroups.com
Many of your links to the javascripts that call fancybox, jquery, etc
are dead. This is typical of what we see when someone says "fancybox
worked on my box but when I upload to my server, it doesn't".

Simply view the source, and start from the top and click on the links.
You'll hit many that give 404 errors.


salens82 wrote:
> Ok this is the link http://mmparis.rs/ at bottom of main page is small
> gallery of few pic and fancybox doesn't work when click on picture this is
> the code from main page, one more time fancybox work well when i start site
> from computer in off line mode.. thx you for trying to help me!
>

<snip tons of stuff>

salens82

unread,
Aug 25, 2013, 2:47:10 PM8/25/13
to fanc...@googlegroups.com
Yea I see from google inspect elements, Ok but how can I resolve that, files is there on server and route in code to the files is good ,why is shows that is "forbidden"!??

Thx once again for U time, I'm kind of new in web programming..  
Untitled1.png

Tony Alfrey

unread,
Aug 25, 2013, 3:04:39 PM8/25/13
to fanc...@googlegroups.com
My guess is that you haven't set the permissions properly for the
/entire/ file

http://mmparis.rs/fancybox

These files are OK

http://mmparis.rs/js
http://mmparis.rs/css

So you need to look at whatever ftp file transfer client you're using
and reset the permissions. Or you may have set the permissions
incorrectly when you made the file on your box to begin with. You have
permission to see the file on /your/ box, but as soon as you stick it on
the server, the server doesn't know you from any other user accessing
the file from the web. So fix the permissions on /your/ box to be
"group" may "view" and reload the file to the server.
--
Tony Alfrey
tonya...@earthlink.net
"I'd Rather Be Sailing"

Tony Alfrey

unread,
Aug 25, 2013, 3:08:26 PM8/25/13
to fanc...@googlegroups.com
and "group" may "execute"

salens82

unread,
Aug 25, 2013, 3:32:41 PM8/25/13
to fanc...@googlegroups.com
Ok, I done with css file, I set up as you told me to do on server I checked box for "GROUP" read and write for all these files, but only css is seems to work...
Untitled3.png

salens82

unread,
Aug 25, 2013, 3:34:06 PM8/25/13
to fanc...@googlegroups.com
Maybe bicouse they in fancybox folder and not in js folder?? 

salens82

unread,
Aug 25, 2013, 3:46:13 PM8/25/13
to fanc...@googlegroups.com
Ok I replace these two files in js folder and it finally work but not entirely :( it doesn show < > for mouse and down slider which show number for image...

Tony Alfrey

unread,
Aug 25, 2013, 3:49:07 PM8/25/13
to fanc...@googlegroups.com
No. The name of the folder has nothing to do with it. The permissions
for the files /within/ the folder may also be incorrect, but /I/ cannot
access the /entire/ file

http://mmparis.rs/fancybox

so no one can, except you from an ftp client with your password.

There is the possibility that you have stuck a "no access" file like

.htaccess

in there, but that is unlikely.

fancybox will look for a variety of graphics in a file named fancybox,
so you will need that file name. You /will/ eventually need to learn
how to set permissions on your files.

You may try setting the permissions on the file on your own box, and
then erasing and reloading the file on the server.

You don't want to let the group write files unless you'd like the world
to corrupt your website. You want the world to be able to "execute" and
"read" the files. And also "others" may "read" and "execute".

Tony Alfrey

unread,
Aug 25, 2013, 4:03:19 PM8/25/13
to fanc...@googlegroups.com
Sigh.
Now you have quite a mess.
If you'd like, you can put the /entire/ fancybox folder in /js but then
you must correct the links on your page. Currently, you have /no/ links
to the fancybox graphics at all.

You /must/ be able to prototype your page on your own box, and then
seamlessly transfer, in one step, to a server. If you cannot do that,
you will always have these sorts of problems.
Message has been deleted

salens82

unread,
Aug 25, 2013, 4:26:24 PM8/25/13
to fanc...@googlegroups.com


On Sunday, August 25, 2013 10:25:24 PM UTC+2, salens82 wrote:
TonyAlfrey thank you so much, I'll never be able to done it if you didn't help me, I finally done, in css for fancybox in url is only been 'file' .png bicouse originaly css is been stored in folder fancybox and
 
when I put him to CSS folder the routes in css stayed that was the problem, try now to see is it work.. :) 
Reply all
Reply to author
Forward
Message has been deleted
0 new messages