All anchor tags trigger fancybox

285 views
Skip to first unread message

ant

unread,
Apr 27, 2009, 11:56:09 AM4/27/09
to fancybox
I downloaded and incorporated fancybox and when I click any link on
the page it grays out the entire screen and and links with an '#'
bring up the image box with a 'null' in it. I thought it was just my
code, but if I take the provided example and add another link to the
page it does it within the example as well. Help?

JFK

unread,
Apr 28, 2009, 6:40:54 AM4/28/09
to fancybox
don't apply fancy box to "a" - it will try to open ANY anchor in
fancybox
use an id or class instead for each element you want to open in a
fancybox

example
$("a#item1").fancybox(); will open in fancy box any anchor with
id="item1"
<a id="item1" href="...">

or

$("a.item2").fancybox(); will open in fancybox any anchor with
class="item2"
<a class="item2" href="...">

13

unread,
Apr 28, 2009, 4:46:44 PM4/28/09
to fancybox


I'm not very advanced in php or jquery at all, but I
did manage to get fancybox operating :).
However now I'm having this same problem.

Could you clarify how you implement the id and
and where i need to stick in the:
$("a#item1").fancybox();
id="item1"

thanks

JFK

unread,
Apr 28, 2009, 8:13:01 PM4/28/09
to fancybox
actually is not jQuery or php ... it's a little bit more of html, css
and javascript

id and class are css selectors, you can read more here:
http://www.w3schools.com/css/default.asp

how to implement fancybox is explained here:
http://fancy.klade.lv/howto

to see a basic examples I made up go to:
http://jquery.diaz-cornen.com/fancybox/index_basicexample.html
- please feel free to see the source code and copy and paste what you
need and adapt it to your needs

or you can always hire me ;)
I could make you a pretty good code and implementation

watermanFFM

unread,
Apr 28, 2009, 9:16:25 PM4/28/09
to fancybox
Hi,

I am newbie in FancyBox but it is okay and I have implemented it in
the right way, I hop so.

Now my problem is kind the same like the editors befor me.

I have the following code on my site to publish pics to open in the
fancybox:

QUOTE:
<a rel="group" title="Zwergenstube 1" href="img/start/zwergenstube-
bild-1.jpg"><img class="border" src="img/start/zwergenstube-bild-1-
s.jpg" /></a>
<a rel="group" title="Zwergenstube 2" href="img/start/zwergenstube-
bild-2.jpg"><img class="border"src="img/start/zwergenstube-bild-2-
s.jpg" /></a>
<a rel="group" href="img/start/zwergenstube-bild-3.jpg"><img
class="border" src="img/start/zwergenstube-bild-3-s.jpg" /></a>

If I post this id-tag to solve the problem with all anchors and
fancybox I only see the first picture in the fancybox and all the
others are not in it.

What can I do to have a good working group of pictures with an id-tag
of the pic-anchors?

Sorry for my english, it is not my native language!

watermanFFM
> > > > page it does it within the example as well. Help?- Zitierten Text ausblenden -
>
> - Zitierten Text anzeigen -

JFK

unread,
Apr 29, 2009, 2:30:42 AM4/29/09
to fancybox
watermanFFM:

add the same "class" and "rel" to the anchor "a" ......if your
fancybox script is (e.g.)
$(document).ready(function() {
$("a.group").fancybox();
});

your html must be:
<a class="group" rel="group" title="Zwergenstube 1" href="img/start/
zwergenstube-
bild-1.jpg"><img class="border" src="img/start/zwergenstube-bild-1-
s.jpg" /></a>
<a class="group" rel="group" title="Zwergenstube 2" href="img/start/
zwergenstube-
bild-2.jpg"><img class="border"src="img/start/zwergenstube-bild-2-
s.jpg" /></a>
etc.............

don't use the ID css selector (#) unless is for a single element
(a#single)
use class (.) instead for more than one element (a.group)

and same recommendation: learn more about css selectors and your life
will be easier ;)

13

unread,
Apr 29, 2009, 6:00:44 PM4/29/09
to fancybox
Thanks for the tips; it's now working perfectly!
It wasn't hard at all once I understood how it worked.

Irvis Feliz

unread,
May 3, 2009, 6:47:24 PM5/3/09
to fanc...@googlegroups.com
hey, im pretty new at this fancybox thing. i changed the anchor tags from "rel" to "class" and "id" i followed JFKs examples and i got it to work some what,, but now it doesnt go from on image to the next, intstead they can only be opened one at a time.. the only way that they do open as a group is if i keep the "rel" tag. i have various links and they are all being affected by "fancybox" any suggestions? or ideas? Thank you.

JFK

unread,
May 5, 2009, 7:09:40 AM5/5/09
to fancybox
Irvis

I never said to change from rel= to class= (sorry if I was not clear
enough); actually you should have both, and both with the same value
lke this

<a class="group" rel="group" href="image01.jpg"></a>
<a class="group" rel="group" href="image02.jpg"></a>
<a class="group" rel="group" href="image03.jpg"></a>

so all this images will display as a gallery with navigation buttons

just in case, the fancybox script should be something like this:
<script type="text/javascript">
$(document).ready(function() {
$("a.group").fancybox({'hideOnContentClick': false});
});
</script>


On May 3, 3:47 pm, Irvis Feliz <irvisfe...@gmail.com> wrote:
> hey, im pretty new at this fancybox thing. i changed the anchor tags from
> "rel" to "class" and "id" i followed JFKs examples and i got it to work some
> what,, but now it doesnt go from on image to the next, intstead they can
> only be opened one at a time.. the only way that they do open as a group is
> if i keep the "rel" tag. i have various links and they are all being
> affected by "fancybox" any suggestions? or ideas? Thank you.
>

Irvis

unread,
May 5, 2009, 11:32:50 AM5/5/09
to fanc...@googlegroups.com
Hey JFK. Thanks a lot it works great
Thanks you saved my life lol

Irvis Feliz
Reply all
Reply to author
Forward
0 new messages