Fancybox - Almost There!

N

nickmcgraw

New Member
Can anyone make sense of why the nav left/right arrows won't show up? Or why the close button won't show up either?

http://fancybox.net/api

I have followed every step they've listed and it doesn't seem to work. Everything is written properly. Masonry works, fancybox itself works when you click on images. Even the title of each image is there.

Just the arrows and close button won't work:mad:

Should I post the script here?
 
conor

conor

New Member
Post the script, or if you can make a demo that would be even better http://jsfiddle.net/

Do you have all the images saved for fancybox and are they linked properly (ie left/right arrows and close button images )?
 
N

nickmcgraw

New Member
$(document).ready(function() {

$(".grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'showCloseButton' : true,
'titleShow' : true,
'showNavArrows' : true



});

});

Fade works properly, as does transition and speed. Why don't the navArrows and closeButton?
 
benjamin.morgan

benjamin.morgan

New Member
Are they showing up? If not they may not be in your image folder. I had that problem before and had to redownload the package after it updated. I am starting to use Fancybox 2 now. It is about the exact same but it seems faster and less buggy.
 
N

nickmcgraw

New Member
benjamin.morgan said:
Are they showing up? If not they may not be in your image folder. I had that problem before and had to redownload the package after it updated. I am starting to use Fancybox 2 now. It is about the exact same but it seems faster and less buggy.
Click to expand...

Do they have to be in my image folder? Currently, they're in the js folder, which I thought was fine seeing as how dreamweaver is linking all the js script. Its funny how fancybox will do everything else its told to do, but it wont link these 3-4 things
 
conor

conor

New Member
If you use firebug or something similar you can inspect the place where the images should be appearing. It should show where the image is pointing to, so from that you can determine where to put your images.

If you dont want to move the images then you could just open up your stylesheet and make sure all the paths are pointing to where your images actually are.
 
N

nickmcgraw

New Member
So Conor, are you saying I'm going to have style the png's fancybox comes with?

like, fancynavleft.png and fancyclose.png....I'll have to style these?

I didn't have to do that the last time i used Lightbox. I have a feeling the images are right there, but underneath, hidden from view. Because if i hover over the Left arrow, my cursor becomes a hand to click something
 
N

nickmcgraw

New Member
Ya, I don't know what's wrong with me, but I just don't get it.


I have this:
<link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


And fancybox works to display my images.

This is what my root looks likes:
stage>index.html
>about.html
>js
>images
>styles.css

But there's another folder:
>jquery.fancybox-1.3.4
>fancybox
>all of the images I need to display

Why there's another folder called jquery is beyond me. Should I just put all those fancybox images into my images folder?

I'm sorry for not understanding how this path works
 
conor

conor

New Member
Ok, so are you saying that your folder structure is like this:

Code: 
>root
   > other folder
      > fancybox

If so then i can see the problem. Fancybox assumes that most of the images are in the same directory as the style sheet. It seems that there is a bit of an inconsistency in their css code, which could be the cause of this problem. It's nothing major though - if you can figure out how to change the paths then it should fix it. The inconsistency is that it uses whats called a relative path for some of its images as well, which assumes that you have this folder structure:

Code: 
> root
   > fancybox

If this is the case, and your folder structure like the first example above then theres one quick fix to change the paths. You need to open up the fancybox css file and do a search and replace. Search for the following:

Code: 
/fancybox/

and replace it with the following ( insert the name of the other folder ):

Code: 
/OTHERFOLDER/fancybox/

hopefully this works for you
 
N

nickmcgraw

New Member
Wow. I just got it, Conor.

All I had to do was select all the images in 'fancybox' folder...and simply place them in the same js folder that the fancybox.css file was in.

Nobody told me that the images had to be in the same folder as the CSS file.


Sometimes I hate this web design stuff.

Thanks for all your help champ! I'll link my site in this thread for you to look at in a few hrs

Thanks again,

Nick
 
You must log in or register to reply here.
Top