3 Fancybox Issues and Workarounds... Suitable or Not?

[Webzster]

It seems that fancybox needs a bit of overhaul in the help files and
usage examples. I've had a whole bunch of issues getting this to work
properly with one of my web pages.

I'm just wondering if several of my workarounds are "kosher" so to
speak.

- In the usage example on the fancybox website it shows: <a
id="single_image" href="image_big.jpg"><img src="image_small.jpg"
alt=""/></a> However, a webpage can ONLY HAVE ONE ID per page. So when
I used this code format for multiple images on the same page it only
worked for the first image. The second image id class was not
recognized. To fix this, I took the preliminary javascript and changed
it from

$("a#single_image").fancybox(); to $("a.single_image").fancybox();

Yeah, the exaples are definitely not so hot... this edit seems to work
ok, though I haven't tested it exhaustively.

- I had a background-attachment:fixed; on my body element in my css.
The body {height:100%;} in the fancybox css messed that up so I had to
remove that property. I tested it out on IE6, IE7, IE8, FF3.5 and all
still seemed to work fine. Not sure on older versions of FF.

- In IE8 I had a very annoying thick black border that temporarily
appeared around the popup when triggered. It showed as maybe 20-30px
in width. To remove this, I used the added this property to end of the
fancybox css file:

div#fancy_bg {display: none;}

This seemed to fix the problem without ill effects to the browsers
mentioned above.

Anyone know if these edits are ok? Are there better ways to do this?

[bobthebob01]

yes agreed, i just realised the same thing after using the ID tag on
many images with in the same page.

the problem, in a way, is that it does not bother FF at all. But IEs
bug with that.

changing from id to class fixed that issue.

I don't think there is better of doing this; it's only logical and
semantically correct to do so.

thanks for pointing it though.

On Jul 13, 1:35 pm, Webzster <javaci...@gmail.com> wrote:
> It seems that fancybox needs a bit of overhaul in the help files and
> usage examples. I've had a whole bunch of issues getting this to work
> properly with one of my web pages.
>
> I'm just wondering if several of my workarounds are "kosher" so to
> speak.
>
> - In the usage example on the fancybox website it shows: <a
> id="single_image" href="image_big.jpg"><img src="image_small.jpg"
> alt=""/></a> However, a webpage can ONLY HAVE ONE ID per page. So when
> I used this code format for multiple images on the same page it only
> worked for the first image. The second image id class was not
> recognized. To fix this, I took the preliminary javascript and changed
> it from
>
> $("a#single_image").fancybox(); to $("a.single_image").fancybox();
>
> Yeah, the exaples are definitely not so hot... this edit seems to work
> ok, though I haven't tested it exhaustively.
>
> - I had a background-attachment:fixed; on my body element in my css.
> The body {height:100%;} in the fancybox css messed that up so I had to

> remove that property. I tested it out onIE6, IE7, IE8, FF3.5 and all

[Dinofly]

I removed the body {height:100%;} from the CSS, too. I don't know if
it was useful to fancybox, but it certainly messed up my design.

[dervvan]

Webzster, see examples of fire code. Probably you need example 2.

Example 1: fire FancyBox for all linked images - like <a
href="image.jpg" alt="">(text | <img src="thumb.jpg" alt="" /> | etc.)
</a>
---------
(function($) {
$(document).ready(function() {
$('a[href]').filter(function() {
return /\.(jpe?g|gif|png|bmp)\s*$/i.test(this.href);
}).fancybox({
'centerOnScroll' : false
});
});
})(jQuery);

Example 2: fire FancyBox for all thumbnail-linked images - like <a
href="image.jpg" alt=""><img src="thumb.jpg" alt="" /></a>
---------
(function($) {
$(document).ready(function() {
$('a[href]:has(img)').filter(function() {
return /\.(jpe?g|gif|png|bmp)\s*$/i.test(this.href);
}).fancybox({
'centerOnScroll' : false
});
});
})(jQuery);

Example 3: fire FancyBox for all thumbnail-linked images, and assign
empty rel to group these images in gallery.
---------
(function($) {
$.fn.add_rel_fancybox = function() {
this.filter(':has(img)').not('[rel]').attr('rel', 'fancybox');
return this;
}
$(document).ready(function() {
$('a[href]:has(img)').filter(function() {
return /\.(jpe?g|gif|png|bmp)\s*$/i.test(this.href);
}).add_rel_fancybox().fancybox({
'centerOnScroll' : false
});
});
})(jQuery);