Problems with HTML within Fancybox
1,309 views
Skip to first unread message
Brian J. Cohen
Dec 21, 2010, 11:06:58 AM12/21/10
to fancybox
I want to put some <a> links within a DIV that's being displayed by
Fancybox. What appears to be happening is that #fancybox-left and
#fancybox-right and/or their children have high z-index values so that
you can click anywhere on the left and have it navigate to "previous",
or click anywhere on the right and navigate to "next". This is
preventing my <a>'s from being clickable, because when you try to
click on them, you're actually clicking #fancybox-left or #fancybox-
right. I've tried setting a z-index of 2000 or so on the links in
question, which should be higher than the ~1100 values used by
fancybox, but Firebug is showing that z-index as ultimately being
calculated out to 'auto' and it's still coming up underneath
Fancybox's navigation.
Any help would be greatly appreciated. Thanks!
Fancybox. What appears to be happening is that #fancybox-left and
#fancybox-right and/or their children have high z-index values so that
you can click anywhere on the left and have it navigate to "previous",
or click anywhere on the right and navigate to "next". This is
preventing my <a>'s from being clickable, because when you try to
click on them, you're actually clicking #fancybox-left or #fancybox-
right. I've tried setting a z-index of 2000 or so on the links in
question, which should be higher than the ~1100 values used by
fancybox, but Firebug is showing that z-index as ultimately being
calculated out to 'auto' and it's still coming up underneath
Fancybox's navigation.
Any help would be greatly appreciated. Thanks!
JFK
Dec 21, 2010, 12:43:07 PM12/21/10
to fancybox
you may want to try setting a fixed size for the navigation arrows and
display them permanently
in other words, arrows (and clickable navigation areas) will be just
as big as the size of the (arrow) icon and won't conflict with other
clickable areas inside the box
the reason to display them permanently is because otherwise visitors
won't know where to mouse hover to navigate the gallery
AFTER you linked the fancybox css file, add this css declaration in
your <head> section:
<style type="text/css">
#fancybox-left,
#fancybox-right {
width: 30px; height: 30px; top: 45%
}
#fancybox-left:hover span,
#fancybox-left-ico{
left: -10px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -10px;
left: auto;
}
</style>
you can play with the values to fit your needs
btw, leave the z-index values as they are
display them permanently
in other words, arrows (and clickable navigation areas) will be just
as big as the size of the (arrow) icon and won't conflict with other
clickable areas inside the box
the reason to display them permanently is because otherwise visitors
won't know where to mouse hover to navigate the gallery
AFTER you linked the fancybox css file, add this css declaration in
your <head> section:
<style type="text/css">
#fancybox-left,
#fancybox-right {
width: 30px; height: 30px; top: 45%
}
#fancybox-left:hover span,
#fancybox-left-ico{
left: -10px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -10px;
left: auto;
}
</style>
you can play with the values to fit your needs
btw, leave the z-index values as they are
Brian J. Cohen
Dec 21, 2010, 4:16:21 PM12/21/10
to fancybox
Perfect, that's what I needed. Thanks!
Arms
Aug 29, 2012, 4:10:05 PM8/29/12
to fanc...@googlegroups.com
I have a question on top of this. I am wanting to make my images clickable, so when you click on an image within the gallery - it open up a new window or tab and take you to the referenced link.
Is this possible?
<a id="test1" style="display:none;" rel="group1" href="large2.jpg">
<img alt="test1" src="large2.jpg" />
</a>
Have this drive somewhere.
Is this possible?
<a id="test1" style="display:none;" rel="group1" href="large2.jpg">
<img alt="test1" src="large2.jpg" />
</a>
Have this drive somewhere.
JFK
Aug 29, 2012, 9:22:08 PM8/29/12
to fanc...@googlegroups.com
it's possible but how depends on the version of fancybox
also I don't understand what is this code for
<a id="test1" style="display:none;" rel="group1" href="large2.jpg">
<img alt="test1" src="large2.jpg" />
</a>
<img alt="test1" src="large2.jpg" />
</a>
Reply all
Reply to author
Forward
0 new messages