Jump to content

Fancy Box


Graeme

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Eddie
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...