Fancy Box

[Graeme]

Hello All,

 

Hope it is OK to ask this question in this forum!

 

I have set up FancyBox, a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It is built using the jQuery library.

 

Everything is great except that I can't get the close, next and previous buttons to show. If I move the mouse over to where these buttons should be and click they work no problems, it's the just the actual button I can't get to be visible.

 

I tried the FancyBox forums but no one has replied.

 

test site at www.burnmoorcc.org.uk/2bfit

 

Thank you as always

Graeme

[mantis]

Hey,

 

try setting adjusting your config there it says closeBtn: false try true, same for arrows etc.

 

Regards

mantis

 

P.S. Personally I prefer colorbox you might give it a try

[Graeme]

Hello,

 

Thank you for your help. I've tried everything but still not getting there!

 

If I showed you the code (below) would you mind having a look?

 

<script type="text/javascript">

$(document).ready(function() {

/*

* Simple image gallery. Uses default settings

*/

 

$('.fancybox').fancybox();

 

/*

* Different effects

*/

 

// Change title type, overlay closing speed

$(".fancybox-effects-a").fancybox({

helpers: {

title : {

type : 'outside'

},

overlay : {

speedOut : 0

}

}

});

 

// Disable opening and closing animations, change title type

$(".fancybox-effects-b").fancybox({

openEffect : 'none',

closeEffect : 'none',

 

helpers : {

title : {

type : 'over'

}

}

});

 

// Set custom style, close if clicked, change title type and overlay color

$(".fancybox-effects-c").fancybox({

wrapCSS : 'fancybox-custom',

closeClick : true,

 

openEffect : 'none',

 

helpers : {

title : {

type : 'inside'

},

overlay : {

css : {

'background' : 'rgba(238,238,238,0.85)'

}

}

}

});

 

// Remove padding, set opening and closing animations, close if clicked and disable overlay

$(".fancybox-effects-d").fancybox({

padding: 0,

 

openEffect : 'elastic',

openSpeed : 150,

 

closeEffect : 'elastic',

closeSpeed : 150,

 

closeClick : true,

 

helpers : {

overlay : null

}

});

 

/*

* Button helper. Disable animations, hide close button, change title type and content

*/

 

$('.fancybox-buttons').fancybox({

openEffect : 'none',

closeEffect : 'none',

 

prevEffect : 'none',

nextEffect : 'none',

 

closeBtn : true,

 

helpers : {

title : {

type : 'inside'

},

buttons : {}

},

 

afterLoad : function() {

this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

}

});

 

 

/*

* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked

*/

 

$('.fancybox-thumbs').fancybox({

prevEffect : 'none',

nextEffect : 'none',

 

closeBtn : true,

arrows : false,

nextClick : true,

 

helpers : {

thumbs : {

width : 50,

height : 50

}

}

});

 

/*

* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.

*/

$('.fancybox-media')

.attr('rel', 'media-gallery')

.fancybox({

openEffect : 'none',

closeEffect : 'none',

prevEffect : 'none',

nextEffect : 'none',

 

arrows : false,

helpers : {

media : {},

buttons : {}

}

});

 

/*

* Open manually

*/

 

$("#fancybox-manual-a").click(function() {

$.fancybox.open('images/image_b.jpg');

});

 

$("#fancybox-manual-b").click(function() {

$.fancybox.open({

href : 'iframe.html',

type : 'iframe',

padding : 5

});

});

 

$("#fancybox-manual-c").click(function() {

$.fancybox.open([

{

href : 'images/image_b.jpg',

title : 'My title'

}, {

href : '2_b.jpg',

title : '2nd title'

}, {

href : '3_b.jpg'

}

], {

helpers : {

thumbs : {

width: 75,

height: 50

}

}

});

});

 

 

});

</script>

 

Thank you,

 

Best wishes

Graeme

[newseed]

You need to check your file paths for your images that are listed in your css or check to make sure the images are there because the Firebug tool tells me it's a broken link.

[Graeme]

Thank you,

 

Is it the file paths in the CSS or the jQuery?

 

I can see this piece of code .fancybox-effects-b").fancybox does need altering?

 

Appreciate it loads, thank you again

[kralcx]

In the <head> section of your code where you have your Fancybox code; the two links I have in bold are broken. Because of that your website is not displaying the css code necessary to display your images properly. Fix the links and it should work for you.

 

<!-- Add Button helper (this is optional) -->

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=1.0.5" />

<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=1.0.5"></script>

 

<!-- Add Thumbnail helper (this is optional) -->

<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=1.0.7" />

<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.7"></script>

[Graeme]

Aw man!

 

Thanks for that, I put the files in the correct directory and the link seems ok now but it still won't display the images, would you mind checking again?

 

Thank you so much

[kralcx]

Aw man!

 

Thanks for that, I put the files in the correct directory and the link seems ok now but it still won't display the images, would you mind checking again?

 

Thank you so much

I just checked, the two links are still not working. Both still returning 404 errors.

[Graeme]

Hello Again,

 

For the link to be broken does this mean that the jquery.fancybox-buttons.css?v=1.0.5 file would have to be in the css directory as in the code <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=1.0.5" />

 

Thank you again

 

Best wishes

Graeme

[kralcx]

Hello Again,

 

For the link to be broken does this mean that the jquery.fancybox-buttons.css?v=1.0.5 file would have to be in the css directory as in the code <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-buttons.css?v=1.0.5" />

 

Thank you again

 

Best wishes

Graeme

 

Place the css code titled jquery.fancybox-buttons.css?v=1.0.5 within the folder called css

[newseed]

It's definitely a path issue. Since we cannot see your folder structure we could be running you around circles if you don't see what we see. So my suggestion is to use a broken link checker that will provide you the full url of the broken link(s). You can then see where it's pointing to and check that against where it's really at on your site. Don't move files but instead change paths first until you get it working. Once you get it working but want to move the files to another location then move the entire Fancybox folder to your preferred location. My example of folder organization is like this:

 

root url/scripts/fancybox/ all fancybox files and folders here

 

Then my path would be like this:

 

<link rel="stylesheet" type="text/css" href="scripts/fancybox/css/jquery.fancybox-buttons.css?v=1.0.5" />

 

 

Since your url that you provide original is in a folder called /2bfit/ then you would need to adjust the link path above to this:

 

<link rel="stylesheet" type="text/css" href="../scripts/fancybox/css/jquery.fancybox-buttons.css?v=1.0.5" />

 

Same applies to the script links.

 

By doing this you should not have to adjust any paths within the css or script files.

 

Here's a broken link checker for you to use.

Edited September 16, 2013 by Eddie

[Graeme]

Hello Eddie,

 

Thanks so much for this.

 

I have in the 2bfit folder a folder called css and within this folder I have the files jquery.fancybox-buttons.css and jquery.fancybox-thumbs.css so I suppose it's like this 2bfit/css/jquery.fancybox-thumbs.css would that do?

 

Graeme

[kralcx]

Hello Eddie,

 

Thanks so much for this.

 

I have in the 2bfit folder a folder called css and within this folder I have the files jquery.fancybox-buttons.css and jquery.fancybox-thumbs.css so I suppose it's like this 2bfit/css/jquery.fancybox-thumbs.css would that do?

 

Graeme

you should also see your style.css file in that folder as well, and your other two files should be labeled

jquery.fancybox-buttons.css?v=1.0.5

 

jquery.fancybox-thumbs.css?v=1.0.7

 

include the entire title otherwise your html can't find the css code that it's looking for

[Graeme]

Hello Men,

 

I've put the two css files in the css directory as they were not weren't there! It's still not playing but I'm thinking the actual images might not be in the right folder, where should they be please?

 

Thanks again

 

Graeme

[Graeme]

I mean the images for the buttons!

[kralcx]

Hello Men,

 

I've put the two css files in the css directory as they were not weren't there! It's still not playing but I'm thinking the actual images might not be in the right folder, where should they be please?

 

Thanks again

 

Graeme

I just checked, the two links are still not working. Both still returning 404 errors.

[Graeme]

I forgot to upload the new css folder, my apologies

 

Graeme