want to render alt text for individual fancybox instances
218 views
Skip to first unread message
Lori Brown
May 23, 2012, 3:01:42 PM5/23/12
to fanc...@googlegroups.com
I am trying to use fancybox to produce a nicely styled popup of a larger version of individual images.
Simple, simple, simple. Works as desired right out of the box EXCEPT that the popped up fancybox image doesn't have an alt attribute, which makes it inaccessible. I know it can have a title below, and that's nice, but I really need a label to be rendered into the alt attribute for the popped up image. How do I do this? Please advise!
I have dug around the documentation and already searched this forum, and found no discussion relevant to single instance popups, only galleries. Thanks in advance.
Simple, simple, simple. Works as desired right out of the box EXCEPT that the popped up fancybox image doesn't have an alt attribute, which makes it inaccessible. I know it can have a title below, and that's nice, but I really need a label to be rendered into the alt attribute for the popped up image. How do I do this? Please advise!
I have dug around the documentation and already searched this forum, and found no discussion relevant to single instance popups, only galleries. Thanks in advance.
JFK
May 23, 2012, 3:21:27 PM5/23/12
to fancybox
what version of fancybox?
Lori K. Brown
May 23, 2012, 3:29:43 PM5/23/12
to fanc...@googlegroups.com
2.0.6, just downloaded it and installed it. Thanks for the fast response!
LKB
--
===========================
Lori Brown
web developer & troublemaker
Nil significat, nisi oscillat.
"It don't mean a thing if it ain't got that swing."
LKB
what version of fancybox?
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.
--
===========================
Lori Brown
web developer & troublemaker
Nil significat, nisi oscillat.
"It don't mean a thing if it ain't got that swing."
Lori K. Brown
May 23, 2012, 3:33:15 PM5/23/12
to fanc...@googlegroups.com
If I could figure out how to pass the alt text from the clicked image to the popup, that could work. The text I want to use is the alt for the image being clicked to get the popup. I'm just not expert at modifying jquery tools.
Thanks again.
Lori
Thanks again.
Lori
Ximbalo
May 23, 2012, 3:35:34 PM5/23/12
to fancybox
Lori, JFK,
I notice in the FancyBox jQuery there is this code:
// HTML templates
tpl: {
wrap : '<div class="fancybox-wrap"><div class="fancybox-
skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></
div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : ... [ ETC... ]
},
If, when you process the thumbnail image click that beings the entire
process... you were to also capture the value of the alt attribute on
the thumbnail,
and pass it in here... so that the code above was changed to:
image : '<img class="fancybox-image" src="{href}" alt="{alt}" />',
Then it would solve this problem.
Essentially... any "alt" attribute the user puts on the thumbnail
<img> should get passed onto the full-size image that is opened.
Your thoughts?
Regards...
I notice in the FancyBox jQuery there is this code:
// HTML templates
tpl: {
wrap : '<div class="fancybox-wrap"><div class="fancybox-
skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></
div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : ... [ ETC... ]
},
If, when you process the thumbnail image click that beings the entire
process... you were to also capture the value of the alt attribute on
the thumbnail,
and pass it in here... so that the code above was changed to:
image : '<img class="fancybox-image" src="{href}" alt="{alt}" />',
Then it would solve this problem.
Essentially... any "alt" attribute the user puts on the thumbnail
<img> should get passed onto the full-size image that is opened.
Your thoughts?
Regards...
Francisco de Azevedo
May 23, 2012, 3:36:35 PM5/23/12
to fanc...@googlegroups.com
Hi Lori,
@Lori: I experienced this issue too but in my case it was not a pb since I didn't really need the alt value.
@JFK: I can confirm that if an alt attribute is set in the image its value gets overridden after loading fancybox. I think the best fix here would be to update the plugin so it preserves the alt value.
Marventus
@Lori: I experienced this issue too but in my case it was not a pb since I didn't really need the alt value.
@JFK: I can confirm that if an alt attribute is set in the image its value gets overridden after loading fancybox. I think the best fix here would be to update the plugin so it preserves the alt value.
Marventus
Lori K. Brown
May 23, 2012, 3:45:10 PM5/23/12
to fanc...@googlegroups.com
@Ximbalo, I agree, that is exactly how it should work.
I tried what you suggested, and it did not seem to work, although I may have made a mistake. I didn't think the file would be so easy to edit.
@jfk, if we can get this to work, I would suggest it as a candidate for inclusion in future revisions, because accessibility is important, and because us govvies need things to have alt tags.
Thanks all!
Lori
I tried what you suggested, and it did not seem to work, although I may have made a mistake. I didn't think the file would be so easy to edit.
@jfk, if we can get this to work, I would suggest it as a candidate for inclusion in future revisions, because accessibility is important, and because us govvies need things to have alt tags.
Thanks all!
Lori
Francisco de Azevedo
May 23, 2012, 3:50:50 PM5/23/12
to fanc...@googlegroups.com
The problem is generated by the default value set for the tpl object, more particularly the image value:
image:'<img class="fancybox-image" src="{href}" alt="" />
The alt value should be dynamic and set the same way the href value is.
Cheers!
image:'<img class="fancybox-image" src="{href}" alt="" />
Cheers!
Lori K. Brown
May 23, 2012, 3:59:24 PM5/23/12
to fanc...@googlegroups.com
That doesn't work, I just tried it.
I changed line 92 of jquery.fancybox.js to:
image: '<img class="fancybox-image" src="{href}" alt="{alt}" />',
And nothin.
When I view the source of popup, I noticed that the image tag output by fancy box isn't coded in the same order it is in line 92 of the template quoted above.
<img class="fancybox-image" alt="" src="images/MSU_AMSU_SSU_global_trend.gif" />
Is this peculiar?
Lori
I changed line 92 of jquery.fancybox.js to:
image: '<img class="fancybox-image" src="{href}" alt="{alt}" />',
And nothin.
When I view the source of popup, I noticed that the image tag output by fancy box isn't coded in the same order it is in line 92 of the template quoted above.
<img class="fancybox-image" alt="" src="images/MSU_AMSU_SSU_global_trend.gif" />
Is this peculiar?
Lori
Francisco de Azevedo
May 23, 2012, 4:08:39 PM5/23/12
to fanc...@googlegroups.com
@Lori: Yeah, that would never work, because basically the {href} string gets replaced by the actual href value further down the code.
The same thing should be done with the img alt, but since the Fancybox has many different functions and parameters, I think it would be better to wait and see if @JFK can make the necessary adjustments.
@JFK: hope you don't me pitching in: I thought it could be helpful to narrow down the problem a little further.
Cheers!
The same thing should be done with the img alt, but since the Fancybox has many different functions and parameters, I think it would be better to wait and see if @JFK can make the necessary adjustments.
@JFK: hope you don't me pitching in: I thought it could be helpful to narrow down the problem a little further.
Cheers!
Lori K. Brown
May 23, 2012, 4:14:19 PM5/23/12
to fanc...@googlegroups.com
It looks like FancyBox doesn't capture the alt attribute of the calling element at all. I could put the alt I want into the <a> tag, but it would certainly make more sense to be able to get it from the image being clicked that is wrapped in the <a> tag.
Make sense?
Lori
Make sense?
Lori
Ximbalo
May 23, 2012, 6:07:17 PM5/23/12
to fancybox
Everyone,
I think that this is a good idea... so I've been poking around in the
code for a few hours trying to figure it out too!
Personally I believe that the quickest and easy way to do this for now
would be along these I have been trying to work something like this:
$(".fancybox").fancybox({
afterLoad: function( links, index ){
var self = $(links[index]);
var alt = self.attr('alt');
$('fancybox-image').attr('alt',alt);
}
});
BUT... I am still trying to figure out:
1. what is the actual list of arguments actually passed to the
afterLoad callback
( I don't seem to be able to find any documentation on these
callbacks, other than their names...? )
2. what is the proper way to access the Group / List of Links w/
Thumbnails
3. what is the proper way to access the index of the current link
Given that info... I could make this logic work.
Essentially the logic is:
ON Callback "afterLoad" DO
{
Current Image [ ie $('.fancy-image') ] --> attribute(alt) GETS
VALUE OF Currently Indexed Link --> image --> attribute (alt)
}
Anybody can help with the 3 questions above... I'm sure we'd have this
solved!
:D
James
lines:
On May 23, 1:14 pm, "Lori K. Brown" <lori...@brownphotos.com> wrote:
> It looks like FancyBox doesn't capture the alt attribute of the calling
> element at all. I could put the alt I want into the <a> tag, but it would
> certainly make more sense to be able to get it from the image being clicked
> that is wrapped in the <a> tag.
>
> Make sense?
>
> Lori
>
> On Wed, May 23, 2012 at 4:08 PM, Francisco de Azevedo <
>
>
>
>
>
>
>
>
>
> frandeazev...@gmail.com> wrote:
> > *@Lori: *Yeah, that would never work, because basically the {href} string
>
> > *@JFK: *hope you don't me pitching in: I thought it could be helpful to
>
> >>>> Hi Lori,
>
> >>>> *@Lori:* I experienced this issue too but in my case it was not a pb
> >>>>> *Nil significat, nisi oscillat.*
I think that this is a good idea... so I've been poking around in the
code for a few hours trying to figure it out too!
Personally I believe that the quickest and easy way to do this for now
would be along these I have been trying to work something like this:
$(".fancybox").fancybox({
afterLoad: function( links, index ){
var self = $(links[index]);
var alt = self.attr('alt');
$('fancybox-image').attr('alt',alt);
}
});
BUT... I am still trying to figure out:
1. what is the actual list of arguments actually passed to the
afterLoad callback
( I don't seem to be able to find any documentation on these
callbacks, other than their names...? )
2. what is the proper way to access the Group / List of Links w/
Thumbnails
3. what is the proper way to access the index of the current link
Given that info... I could make this logic work.
Essentially the logic is:
ON Callback "afterLoad" DO
{
Current Image [ ie $('.fancy-image') ] --> attribute(alt) GETS
VALUE OF Currently Indexed Link --> image --> attribute (alt)
}
Anybody can help with the 3 questions above... I'm sure we'd have this
solved!
:D
James
lines:
On May 23, 1:14 pm, "Lori K. Brown" <lori...@brownphotos.com> wrote:
> It looks like FancyBox doesn't capture the alt attribute of the calling
> element at all. I could put the alt I want into the <a> tag, but it would
> certainly make more sense to be able to get it from the image being clicked
> that is wrapped in the <a> tag.
>
> Make sense?
>
> Lori
>
> On Wed, May 23, 2012 at 4:08 PM, Francisco de Azevedo <
>
>
>
>
>
>
>
>
>
> > *@Lori: *Yeah, that would never work, because basically the {href} string
> > gets replaced by the actual href value further down the code.
> > The same thing should be done with the img alt, but since the Fancybox has
> > many different functions and parameters, I think it would be better to wait
> > and see if *@JFK* can make the necessary adjustments.
> > The same thing should be done with the img alt, but since the Fancybox has
> > many different functions and parameters, I think it would be better to wait
>
> > *@JFK: *hope you don't me pitching in: I thought it could be helpful to
> > narrow down the problem a little further.
>
> > Cheers!
>
>
> > Cheers!
>
> > On Wed, May 23, 2012 at 4:59 PM, Lori K. Brown <lori...@brownphotos.com>wrote:
>
> >> That doesn't work, I just tried it.
>
> >> I changed line 92 of jquery.fancybox.js to:
>
> >> image: '<img class="fancybox-image" src="{href}" alt="{alt}" />',
>
> >> And nothin.
>
> >> When I view the source of popup, I noticed that the image tag output by
> >> fancy box isn't coded in the same order it is in line 92 of the template
> >> quoted above.
>
> >> <img class="fancybox-image" alt=""
> >> src="images/MSU_AMSU_SSU_global_trend.gif" />
>
> >> Is this peculiar?
>
> >> Lori
>
> >> On Wed, May 23, 2012 at 3:50 PM, Francisco de Azevedo <
> >> frandeazev...@gmail.com> wrote:
>
> >>> The problem is generated by the default value set for the tpl object,
> >>> more particularly the image value:
>
> >>> image:'<img class="fancybox-image" src="{href}"* alt=""* />
>
> >> That doesn't work, I just tried it.
>
> >> I changed line 92 of jquery.fancybox.js to:
>
> >> image: '<img class="fancybox-image" src="{href}" alt="{alt}" />',
>
> >> And nothin.
>
> >> When I view the source of popup, I noticed that the image tag output by
> >> fancy box isn't coded in the same order it is in line 92 of the template
> >> quoted above.
>
> >> <img class="fancybox-image" alt=""
> >> src="images/MSU_AMSU_SSU_global_trend.gif" />
>
> >> Is this peculiar?
>
> >> Lori
>
> >> On Wed, May 23, 2012 at 3:50 PM, Francisco de Azevedo <
> >> frandeazev...@gmail.com> wrote:
>
> >>> The problem is generated by the default value set for the tpl object,
> >>> more particularly the image value:
>
> >>> The alt value should be dynamic and set the same way the href value is.
> >>> Cheers!
>
> >>> On Wed, May 23, 2012 at 4:36 PM, Francisco de Azevedo <
> >>> frandeazev...@gmail.com> wrote:
> >>> Cheers!
>
> >>> On Wed, May 23, 2012 at 4:36 PM, Francisco de Azevedo <
>
> >>>> Hi Lori,
>
> >>>> *@Lori:* I experienced this issue too but in my case it was not a pb
> >>>> since I didn't really need the alt value.
> >>>> *@JFK:* I can confirm that if an alt attribute is set in the image its
> >>>> value gets overridden after loading fancybox. I think the best fix here
> >>>> would be to update the plugin so it preserves the alt value.
>
> >>>> Marventus
>
> >>>> On Wed, May 23, 2012 at 4:29 PM, Lori K. Brown <lori...@brownphotos.com
> >>>> would be to update the plugin so it preserves the alt value.
>
> >>>> Marventus
>
> >>>> > wrote:
>
> >>>>> 2.0.6, just downloaded it and installed it. Thanks for the fast
> >>>>> response!
>
> >>>>> LKB
>
>
> >>>>> 2.0.6, just downloaded it and installed it. Thanks for the fast
> >>>>> response!
>
> >>>>> LKB
>
> >>>>> "It don't mean a thing if it ain't got that swing."
>
> >>>>> --
> >>>>> You received this message because you are subscribed to the Google
> >>>>> Groups "fancybox" group.
> >>>>> To post to this group, send email to fanc...@googlegroups.com.
> >>>>> To unsubscribe from this group, send email to
> >>>>> fancybox+u...@googlegroups.com.
> >>>>> For more options, visit this group at
> >>>>>http://groups.google.com/group/fancybox?hl=en.
>
> >>> --
> >>> You received this message because you are subscribed to the Google
> >>> Groups "fancybox" group.
> >>> To post to this group, send email to fanc...@googlegroups.com.
> >>> To unsubscribe from this group, send email to
> >>> fancybox+u...@googlegroups.com.
> >>> For more options, visit this group at
> >>>http://groups.google.com/group/fancybox?hl=en.
>
> >> --
> >> ===========================
> >> Lori Brown
> >> web developer & troublemaker
>
> >> *Nil significat, nisi oscillat.*
>
> >>>>> --
> >>>>> You received this message because you are subscribed to the Google
> >>>>> Groups "fancybox" group.
> >>>>> To post to this group, send email to fanc...@googlegroups.com.
> >>>>> To unsubscribe from this group, send email to
> >>>>> fancybox+u...@googlegroups.com.
> >>>>> For more options, visit this group at
> >>>>>http://groups.google.com/group/fancybox?hl=en.
>
> >>> --
> >>> You received this message because you are subscribed to the Google
> >>> Groups "fancybox" group.
> >>> To post to this group, send email to fanc...@googlegroups.com.
> >>> To unsubscribe from this group, send email to
> >>> fancybox+u...@googlegroups.com.
> >>> For more options, visit this group at
> >>>http://groups.google.com/group/fancybox?hl=en.
>
> >> --
> >> ===========================
> >> Lori Brown
> >> web developer & troublemaker
>
> >> "It don't mean a thing if it ain't got that swing."
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "fancybox" group.
> >> To post to this group, send email to fanc...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> fancybox+u...@googlegroups.com.
> >> For more options, visit this group at
> >>http://groups.google.com/group/fancybox?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "fancybox" group.
> > To post to this group, send email to fanc...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > fancybox+u...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/fancybox?hl=en.
>
> --
> ===========================
> Lori Brown
> web developer & troublemaker
>
> *Nil significat, nisi oscillat.*
>
> >> --
> >> You received this message because you are subscribed to the Google Groups
> >> "fancybox" group.
> >> To post to this group, send email to fanc...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> fancybox+u...@googlegroups.com.
> >> For more options, visit this group at
> >>http://groups.google.com/group/fancybox?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "fancybox" group.
> > To post to this group, send email to fanc...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > fancybox+u...@googlegroups.com.
> > For more options, visit this group at
> >http://groups.google.com/group/fancybox?hl=en.
>
> --
> ===========================
> Lori Brown
> web developer & troublemaker
>
Ximbalo
May 23, 2012, 7:20:43 PM5/23/12
to fancybox
I believe that the following should achieve the desired result.
afterLoad : function()
{
var i = this.index;
var aThumbs = $(".fancybox");
var iLink = aThumbs.eq(i);
var iThumb = iLink.children(':first-child');
var iAlt = iThumb.attr("alt");
$(".fancybox-image").attr("alt", iAlt );
}
However... oddly enough... as I check the value of each "var" above...
they are correct!
But the final line, to add the Thumbnail alt tag to the currently open
image... has no effect.
Not sure why... but if anybody can solve this last 1 line of code...
You should have transferable alt tags from thumbnail to full size
image.
Can't work on this any more today... so anybody who can tell me why
this does not work
newAlt = $(".fancybox").eq(this.index).children(':first-
child').attr('alt');
$(".fancybox-image").attr("alt", newAlt);
wins: ;-)
afterLoad : function()
{
var i = this.index;
var aThumbs = $(".fancybox");
var iLink = aThumbs.eq(i);
var iThumb = iLink.children(':first-child');
var iAlt = iThumb.attr("alt");
$(".fancybox-image").attr("alt", iAlt );
}
However... oddly enough... as I check the value of each "var" above...
they are correct!
But the final line, to add the Thumbnail alt tag to the currently open
image... has no effect.
Not sure why... but if anybody can solve this last 1 line of code...
You should have transferable alt tags from thumbnail to full size
image.
Can't work on this any more today... so anybody who can tell me why
this does not work
newAlt = $(".fancybox").eq(this.index).children(':first-
child').attr('alt');
$(".fancybox-image").attr("alt", newAlt);
wins: ;-)
JFK
May 23, 2012, 7:34:26 PM5/23/12
to fancybox
Hold tight ....
JFK
May 23, 2012, 7:57:30 PM5/23/12
to fancybox
First, bear in mind that you bind fancybox to a link <a> tag, which
doesn't have an ALT attribute (is supported but not valid though)
Second, the href is passed as the argument to tell what will be the
content inside fancybox but anything else. We could capture the "alt"
attribute from the thumbnail (if any) that is wrapped by the anchor,
however we may want to link to an image with a simple text (not
thumbnail) and still needing an alt attribute in the image inside
fancybox ... this is why getting the value of the alt attribute is not
implemented. Remember that the thumbnail and the image inside of
fancybox may not be the same.
Anyways, here there are different workarounds :
1) get the alt from the thumbnail and pass it to the image inside
fancybox
html
<a class="fancybox" href="image01.jpg"><img src="thumb01.jpg" alt="alt
for image 01" /></a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).find('img').attr('alt');
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
2) passing the alt via "data-" attribute (requires HTML5 DOCTYPE) ...
useful when there is not thumbnail
html
<a class="fancybox" href="image02.jpg" data-alt="alt for image
02">open image 02</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
3) hardcoding the alt attribute ... if preferred
html
<a class="fancybox" href="image03.jpg" >open image 03</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = "alt for image 02";
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
My preferred would be the number 1 or 2 depending on whether your are
using thumbnails or not.
So this is the answer for the original post: how to set the alt
attribute in the image inside fancybox?
Other questions should be treated in different posts
doesn't have an ALT attribute (is supported but not valid though)
Second, the href is passed as the argument to tell what will be the
content inside fancybox but anything else. We could capture the "alt"
attribute from the thumbnail (if any) that is wrapped by the anchor,
however we may want to link to an image with a simple text (not
thumbnail) and still needing an alt attribute in the image inside
fancybox ... this is why getting the value of the alt attribute is not
implemented. Remember that the thumbnail and the image inside of
fancybox may not be the same.
Anyways, here there are different workarounds :
1) get the alt from the thumbnail and pass it to the image inside
fancybox
html
<a class="fancybox" href="image01.jpg"><img src="thumb01.jpg" alt="alt
for image 01" /></a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).find('img').attr('alt');
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
2) passing the alt via "data-" attribute (requires HTML5 DOCTYPE) ...
useful when there is not thumbnail
html
<a class="fancybox" href="image02.jpg" data-alt="alt for image
02">open image 02</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
3) hardcoding the alt attribute ... if preferred
html
<a class="fancybox" href="image03.jpg" >open image 03</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = "alt for image 02";
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
My preferred would be the number 1 or 2 depending on whether your are
using thumbnails or not.
So this is the answer for the original post: how to set the alt
attribute in the image inside fancybox?
Other questions should be treated in different posts
Francisco de Azevedo
May 23, 2012, 9:26:59 PM5/23/12
to fanc...@googlegroups.com
Hi @JFK. I can confirm option 1 works and, IMHO, is the best solution in this case.
I tried to do something very similar to what @Ximbalo was trying, but getting the "alt" value on beforeLoad and applying it on afterLoad and it didn't work.
Do you see there is any possibility of adding alt support in the plugin itself?
Thanks for all your hard work.
Cheers!
Marventus
I tried to do something very similar to what @Ximbalo was trying, but getting the "alt" value on beforeLoad and applying it on afterLoad and it didn't work.
Do you see there is any possibility of adding alt support in the plugin itself?
Thanks for all your hard work.
Cheers!
Marventus
Ximbalo
May 23, 2012, 10:22:17 PM5/23/12
to fancybox
JFK, thanks, most excellent!
Yes, actually... as with Lori who began this thread, I am usually
using
FancyBox primary for the sake of a simple image gallery of thumbnails.
I can see instances where a client will want me to show the <title>
information
displayed below the image, but different info when you hover over the
image.
SO... being able to transfer both pieces of info:
1. The <a> title attribute -- and
2. The child img tag's attribute
Will come in handy...
A good example:
The <title> displayed beneath the photo may be a "story line" about my
client's work ...
<a title="This was an unexpected double-image surprise I feel
perfectly captures the busy nightlife downtown. Rolleiflex 2.8F, 80mm
Schneider-Kreuznach lens." >
The <alt> ( inherited from the thumbnail ) will provide incidental
hover-only info:
<img alt="Downtown Austin, TX at Night"
http://www.dennisjackson.com/HTML5/work.php <-- site rebuild in
progress that will now use this technique...
Thanks and regards...
XIMBALO
> ...
>
> read more »
Yes, actually... as with Lori who began this thread, I am usually
using
FancyBox primary for the sake of a simple image gallery of thumbnails.
I can see instances where a client will want me to show the <title>
information
displayed below the image, but different info when you hover over the
image.
SO... being able to transfer both pieces of info:
1. The <a> title attribute -- and
2. The child img tag's attribute
Will come in handy...
A good example:
The <title> displayed beneath the photo may be a "story line" about my
client's work ...
<a title="This was an unexpected double-image surprise I feel
perfectly captures the busy nightlife downtown. Rolleiflex 2.8F, 80mm
Schneider-Kreuznach lens." >
The <alt> ( inherited from the thumbnail ) will provide incidental
hover-only info:
<img alt="Downtown Austin, TX at Night"
http://www.dennisjackson.com/HTML5/work.php <-- site rebuild in
progress that will now use this technique...
Thanks and regards...
XIMBALO
>
> read more »
JFK
May 24, 2012, 3:02:01 AM5/24/12
to fancybox
@Francisco:
I am not fancybox developer so I am not able to answer whether or not
this feature will be implemented in future releases.
@Ximbalo:
If you set a title in the <a> tag (wrapping a thumbnail (<img> tag)
with alt attribute), the title attribute will show up on mouse hover
(tooltip) as well as the caption for fancybox. In other words, the alt
from the thumbnail will only show up on mouse hover (tooltip) IF there
is not title attribute AND in IE only.
If you want a different tooltip than the fancybox title, then check
http://stackoverflow.com/a/8425900/1055987 or http://stackoverflow.com/a/10609780/1055987
> ...
>
> read more »
I am not fancybox developer so I am not able to answer whether or not
this feature will be implemented in future releases.
@Ximbalo:
If you set a title in the <a> tag (wrapping a thumbnail (<img> tag)
with alt attribute), the title attribute will show up on mouse hover
(tooltip) as well as the caption for fancybox. In other words, the alt
from the thumbnail will only show up on mouse hover (tooltip) IF there
is not title attribute AND in IE only.
If you want a different tooltip than the fancybox title, then check
http://stackoverflow.com/a/8425900/1055987 or http://stackoverflow.com/a/10609780/1055987
>
> read more »
Jime Ximbalo
May 24, 2012, 3:31:17 AM5/24/12
to fanc...@googlegroups.com
Ah... interesting.
Did not know that.
Will check those ref-articles.
Thanks
Ximbalo
> ...
>
> read more »
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.
JFK
May 24, 2012, 3:47:42 AM5/24/12
to fancybox
you can also check this
http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fca8335aa4/
and
http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88af2393cc/
although they were written for v1.3.x, still gives you an idea how
title and alt attributes work with fancybox
> ...
>
> read more »
http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fca8335aa4/
and
http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88af2393cc/
although they were written for v1.3.x, still gives you an idea how
title and alt attributes work with fancybox
>
> read more »
Francisco de Azevedo
May 24, 2012, 6:51:08 AM5/24/12
to fanc...@googlegroups.com
@JFK: Thanks for clarifying. I assumed you were the author since you seem to be practically the only person actually replying to people's questions on the group. That is really nice of you to help people like that!
Keep up the good work!
Cheers!
Marv
Keep up the good work!
Cheers!
Marv
> ...
>
> read more »
Lori Brown
May 24, 2012, 12:14:25 PM5/24/12
to fanc...@googlegroups.com
This is nice, JFK, but I'm not trying to get something FROM an alt attribute, I want to get text put INTO the alt attribute of the popped up image.
Here is my page:
http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
And here is the relevant snip of code (line 89 of source):
I want the text that is the alt text of the image (or if I have to put the alt on the link I will, doesn't matter) to be rendered into the alt attribute of the image that pops up. And I don't understand how to make that happen. ????
Any suggestions?
I see this suggestion above:
$(".fancybox").fancybox({
afterLoad: function( links, index ){
var self = $(links[index]);
var alt = self.attr('alt');
$('
Here is my page:
http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
And here is the relevant snip of code (line 89 of source):
<a class="fancybox" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" href="images/MSU_AMSU_SSU_global_trend.gif"><img src="images/MSU_AMSU_SSU_global_trend_sm.gif"
style="float: right; margin: 0px 0px 12px 12px" alt="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends"></a>
I want the text that is the alt text of the image (or if I have to put the alt on the link I will, doesn't matter) to be rendered into the alt attribute of the image that pops up. And I don't understand how to make that happen. ????
Any suggestions?
I see this suggestion above:
$(".fancybox").fancybox({
afterLoad: function( links, index ){
var self = $(links[index]);
var alt = self.attr('alt');
$('
fancybox-image').attr('alt',alt);
}
});
}
});
but I don't understand which parts of this suggestion are real code and which parts are dummy labels.
Francisco de Azevedo
May 24, 2012, 12:22:54 PM5/24/12
to fanc...@googlegroups.com
@Lori:
The code shared by JFK in option 1 will do exactly that:
1. Store each of your images' alt values before the slideshow loads;
2. Add each of the original images' alt values and assign it to the new version of the image shown in the slideshow.
As long as your original images have an alt value specified, the alt value will migrate to the slideshow as well.
Cheers!
Marventus
The code shared by JFK in option 1 will do exactly that:
1. Store each of your images' alt values before the slideshow loads;
2. Add each of the original images' alt values and assign it to the new version of the image shown in the slideshow.
As long as your original images have an alt value specified, the alt value will migrate to the slideshow as well.
Cheers!
Marventus
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To view this discussion on the web visit https://groups.google.com/d/msg/fancybox/-/0-0iUd7aUzoJ.
Lori K. Brown
May 24, 2012, 12:31:02 PM5/24/12
to fanc...@googlegroups.com
Ok, I had to re-read the thread 3x to find that -- I thought I'd read everything. ???
When I use that code, fancybox breaks, and I get the javascript error:
Timestamp: 5/24/2012 12:29:28 PM
Error: function statement requires a name
Source File: http://localhost/smcd/emb/mscat/
Line: 43, Column: 23
Source Code:
beforeShow: function(){
I'm sorry, I just don't understand what I'm doing wrong.
I've implemented it in the head of my document like this:
When I use that code, fancybox breaks, and I get the javascript error:
Timestamp: 5/24/2012 12:29:28 PM
Error: function statement requires a name
Source File: http://localhost/smcd/emb/mscat/
Line: 43, Column: 23
Source Code:
beforeShow: function(){
I'm sorry, I just don't understand what I'm doing wrong.
I've implemented it in the head of my document like this:
<script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox();
beforeShow: function(){
var fancyAlt = $(this.element).find('img').attr('alt');
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
</script>
I'm sure I'm missing something basic, but I' just don't understand.
???
Lori
--
===========================
Lori Brown
web developer & troublemaker
Nil significat, nisi oscillat.===========================
Lori Brown
web developer & troublemaker
JFK
May 24, 2012, 12:49:49 PM5/24/12
to fancybox
@Lori
Our bad ... we posted so many things here that made this post
difficult to follow up.
I understand that you are not trying to get something FROM an alt
attribute, however, in order to put INTO the alt attribute of the
popped up image, you first need to get that content from somewhere
else ... in this case, the alt in the thumbnail.
The "beforeShow" option goes inside the fancybox script like
<script type="text/javascript">
$(document).ready(function() {
}); // close ready
</script>
you placed it after closing fancybox .... it was a simple syntax error
try copy and past from above
(and everybody please refrain from commenting until Lori solves here
issue, thanks)
On May 24, 9:31 am, "Lori K. Brown" <lori...@brownphotos.com> wrote:
> Ok, I had to re-read the thread 3x to find that -- I thought I'd read
> everything. ???
>
> When I use that code, fancybox breaks, and I get the javascript error:
>
> Timestamp: 5/24/2012 12:29:28 PM
> Error: function statement requires a name
> Source File:http://localhost/smcd/emb/mscat/
> Line: 43, Column: 23
> Source Code:
> beforeShow: function(){
>
> I'm sorry, I just don't understand what I'm doing wrong.
>
> I've implemented it in the head of my document like this:
>
> <script type="text/javascript"> $(document).ready(function()
> { $(".fancybox").fancybox(); beforeShow: function(){ var
> fancyAlt = $(this.element).find('img').attr('alt');
> $(".fancybox-inner").find("img").attr("alt",fancyAlt);
>
> } });</script>
>
> I'm sure I'm missing something basic, but I' just don't understand.
> ???
>
> Lori
>
> On Thu, May 24, 2012 at 12:22 PM, Francisco de Azevedo <
>
>
>
>
>
>
>
> frandeazev...@gmail.com> wrote:
> > *@Lori:*
> > *2. *Add each of the original images' alt values and assign it to the new
> >>> thread/7f2777fca8335aa4/<http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fc...>
> >>> and
> >>>http://groups.google.com/**group/fancybox/browse_thread/**
> >>> thread/3da14d88af2393cc/<http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88...>
> >>> > >http://stackoverflow.com/a/**10609780/1055987<http://stackoverflow.com/a/10609780/1055987>
> >>> > > >http://www.dennisjackson.com/**HTML5/work.php<http://www.dennisjackson.com/HTML5/work.php> <--
> >>> > > > > var fancyAlt = $(this.element).find('img').**attr('alt');
> >>> > > > > $(".fancybox-inner").find("**img").attr("alt",fancyAlt);
>
> read more »
Our bad ... we posted so many things here that made this post
difficult to follow up.
I understand that you are not trying to get something FROM an alt
attribute, however, in order to put INTO the alt attribute of the
popped up image, you first need to get that content from somewhere
else ... in this case, the alt in the thumbnail.
The "beforeShow" option goes inside the fancybox script like
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
}); // close fancybox
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
}); // close ready
</script>
you placed it after closing fancybox .... it was a simple syntax error
try copy and past from above
(and everybody please refrain from commenting until Lori solves here
issue, thanks)
On May 24, 9:31 am, "Lori K. Brown" <lori...@brownphotos.com> wrote:
> Ok, I had to re-read the thread 3x to find that -- I thought I'd read
> everything. ???
>
> When I use that code, fancybox breaks, and I get the javascript error:
>
> Timestamp: 5/24/2012 12:29:28 PM
> Error: function statement requires a name
> Source File:http://localhost/smcd/emb/mscat/
> Line: 43, Column: 23
> Source Code:
> beforeShow: function(){
>
> I'm sorry, I just don't understand what I'm doing wrong.
>
> I've implemented it in the head of my document like this:
>
> <script type="text/javascript"> $(document).ready(function()
> { $(".fancybox").fancybox(); beforeShow: function(){ var
> fancyAlt = $(this.element).find('img').attr('alt');
> $(".fancybox-inner").find("img").attr("alt",fancyAlt);
>
> } });</script>
>
> I'm sure I'm missing something basic, but I' just don't understand.
> ???
>
> Lori
>
> On Thu, May 24, 2012 at 12:22 PM, Francisco de Azevedo <
>
>
>
>
>
>
>
> > *@Lori:*
> > The code shared by JFK in option 1 will do exactly that:
> > *1. *Store each of your images' alt values before the slideshow loads;
> > *2. *Add each of the original images' alt values and assign it to the new
> > version of the image shown in the slideshow.
> > As long as your original images have an alt value specified, the alt value
> > will migrate to the slideshow as well.
> > Cheers!
>
> > Marventus
>
> > As long as your original images have an alt value specified, the alt value
> > will migrate to the slideshow as well.
> > Cheers!
>
> > Marventus
>
> > On Thu, May 24, 2012 at 1:14 PM, Lori Brown <lorik...@gmail.com> wrote:
>
> >> This is nice, JFK, but I'm not trying to get something FROM an alt
> >> attribute, I want to get text put INTO the alt attribute of the popped up
> >> image.
>
> >> Here is my page:
> >>http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
>
> >> And here is the relevant snip of code (line 89 of source):
>
> >> <a class="fancybox" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" href="images/MSU_AMSU_SSU_global_trend.gif"><img src="images/MSU_AMSU_SSU_global_trend_sm.gif"
> >> style="float: right; margin: 0px 0px 12px 12px" alt="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends"></a>
>
> >> I want the text that is the alt text of the image (or if I have to put
> >> the alt on the link I will, doesn't matter) to be rendered into the alt
> >> attribute of the image that pops up. And I don't understand how to make
> >> that happen. ????
>
> >> Any suggestions?
>
> >> I see this suggestion above:
>
> >> $(".fancybox").fancybox({
> >> afterLoad: function( links, index ){
> >> var self = $(links[index]);
> >> var alt = self.attr('alt');
> >> $('
> >> **fancybox-image').attr('alt',**alt);
>
> >> This is nice, JFK, but I'm not trying to get something FROM an alt
> >> attribute, I want to get text put INTO the alt attribute of the popped up
> >> image.
>
> >> Here is my page:
> >>http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
>
> >> And here is the relevant snip of code (line 89 of source):
>
> >> <a class="fancybox" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" href="images/MSU_AMSU_SSU_global_trend.gif"><img src="images/MSU_AMSU_SSU_global_trend_sm.gif"
> >> style="float: right; margin: 0px 0px 12px 12px" alt="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends" title="NOAA/NESDIS/STAR MSU/AMSU-A/SSU global atmospheric temperature trends"></a>
>
> >> I want the text that is the alt text of the image (or if I have to put
> >> the alt on the link I will, doesn't matter) to be rendered into the alt
> >> attribute of the image that pops up. And I don't understand how to make
> >> that happen. ????
>
> >> Any suggestions?
>
> >> I see this suggestion above:
>
> >> $(".fancybox").fancybox({
> >> afterLoad: function( links, index ){
> >> var self = $(links[index]);
> >> var alt = self.attr('alt');
> >> $('
> >> }
> >> });
>
> >> but I don't understand which parts of this suggestion are real code and
> >> which parts are dummy labels.
>
> >> On Thursday, May 24, 2012 3:47:42 AM UTC-4, JFK wrote:
>
> >>> you can also check this
> >>>http://groups.google.com/**group/fancybox/browse_thread/**
> >> });
>
> >> but I don't understand which parts of this suggestion are real code and
> >> which parts are dummy labels.
>
> >> On Thursday, May 24, 2012 3:47:42 AM UTC-4, JFK wrote:
>
> >>> you can also check this
> >>> thread/7f2777fca8335aa4/<http://groups.google.com/group/fancybox/browse_thread/thread/7f2777fc...>
> >>> and
> >>>http://groups.google.com/**group/fancybox/browse_thread/**
> >>> thread/3da14d88af2393cc/<http://groups.google.com/group/fancybox/browse_thread/thread/3da14d88...>
>
> >>> although they were written for v1.3.x, still gives you an idea how
> >>> title and alt attributes work with fancybox
>
> >>> On May 24, 12:31 am, Jime Ximbalo <ximb...@gmail.com> wrote:
> >>> > Ah... interesting.
> >>> > Did not know that.
>
> >>> > Will check those ref-articles.
> >>> > Thanks
>
> >>> > Ximbalo
>
> >>> > On Thu, May 24, 2012 at 12:02 AM, JFK <jfk.d...@gmail.com> wrote:
> >>> > > @Francisco:
> >>> > > I am not fancybox developer so I am not able to answer whether or
> >>> not
> >>> > > this feature will be implemented in future releases.
>
> >>> > > @Ximbalo:
> >>> > > If you set a title in the <a> tag (wrapping a thumbnail (<img> tag)
> >>> > > with alt attribute), the title attribute will show up on mouse hover
> >>> > > (tooltip) as well as the caption for fancybox. In other words, the
> >>> alt
> >>> > > from the thumbnail will only show up on mouse hover (tooltip) IF
> >>> there
> >>> > > is not title attribute AND in IE only.
>
> >>> > > If you want a different tooltip than the fancybox title, then check
> >>> > >http://stackoverflow.com/a/**8425900/1055987or<http://stackoverflow.com/a/8425900/1055987or>
> >>> although they were written for v1.3.x, still gives you an idea how
> >>> title and alt attributes work with fancybox
>
> >>> On May 24, 12:31 am, Jime Ximbalo <ximb...@gmail.com> wrote:
> >>> > Ah... interesting.
> >>> > Did not know that.
>
> >>> > Will check those ref-articles.
> >>> > Thanks
>
> >>> > Ximbalo
>
> >>> > On Thu, May 24, 2012 at 12:02 AM, JFK <jfk.d...@gmail.com> wrote:
> >>> > > @Francisco:
> >>> > > I am not fancybox developer so I am not able to answer whether or
> >>> not
> >>> > > this feature will be implemented in future releases.
>
> >>> > > @Ximbalo:
> >>> > > If you set a title in the <a> tag (wrapping a thumbnail (<img> tag)
> >>> > > with alt attribute), the title attribute will show up on mouse hover
> >>> > > (tooltip) as well as the caption for fancybox. In other words, the
> >>> alt
> >>> > > from the thumbnail will only show up on mouse hover (tooltip) IF
> >>> there
> >>> > > is not title attribute AND in IE only.
>
> >>> > > If you want a different tooltip than the fancybox title, then check
> >>> > >http://stackoverflow.com/a/**10609780/1055987<http://stackoverflow.com/a/10609780/1055987>
> >>> > > > > $(".fancybox-inner").find("**img").attr("alt",fancyAlt);
> >>> > > > > }
>
> >>> > > > > });
>
> >>> > > > > 2) passing the alt via "data-" attribute (requires HTML5
> >>> DOCTYPE) ...
> >>> > > > > useful when there is not thumbnail
> >>> > > > > html
> >>> > > > > <a class="fancybox" href="image02.jpg" data-alt="alt for image
> >>> > > > > 02">open image 02</a>
> >>> > > > > script
> >>> > > > > $(".fancybox").fancybox({
> >>> > > > > beforeShow: function(){
> >>> > > > > var fancyAlt = $(this.element).data("alt");
> >>> > > > > $(".fancybox-inner").find("**img").attr("alt",fancyAlt);
>
> >>> > > > > });
>
> >>> > > > > 2) passing the alt via "data-" attribute (requires HTML5
> >>> DOCTYPE) ...
> >>> > > > > useful when there is not thumbnail
> >>> > > > > html
> >>> > > > > <a class="fancybox" href="image02.jpg" data-alt="alt for image
> >>> > > > > 02">open image 02</a>
> >>> > > > > script
> >>> > > > > $(".fancybox").fancybox({
> >>> > > > > beforeShow: function(){
> >>> > > > > var fancyAlt = $(this.element).data("alt");
> >>> > > > > }
>
> >>> > > > > });
>
> >>> > > > > 3) hardcoding the alt attribute ... if preferred
> >>> > > > > html
> >>> > > > > <a class="fancybox" href="image03.jpg" >open image 03</a>
> >>> > > > > script
> >>> > > > > $(".fancybox").fancybox({
> >>> > > > > beforeShow: function(){
> >>> > > > > var fancyAlt = "alt for image 02";
> >>> > > > > $(".fancybox-inner").find("**img").attr("alt",fancyAlt);
>
> >>> > > > > });
>
> >>> > > > > 3) hardcoding the alt attribute ... if preferred
> >>> > > > > html
> >>> > > > > <a class="fancybox" href="image03.jpg" >open image 03</a>
> >>> > > > > script
> >>> > > > > $(".fancybox").fancybox({
> >>> > > > > beforeShow: function(){
> >>> > > > > var fancyAlt = "alt for image 02";
> >>> > > > > }
>
> >>> > > > > });
>
> >>> > > > > My preferred would be the number 1 or 2 depending on whether
> >>> your are
> >>> > > > > using thumbnails or not.
>
> >>> > > > > So this is the answer for the original post: how to set the alt
> >>> > > > > attribute in the image inside fancybox?
> >>> > > > > Other questions should be treated in different posts
>
> >>> > > > > On May 23, 4:20 pm, Ximbalo <ximb...@gmail.com> wrote:
>
> >>> > > > > > I believe that the following should achieve the desired
> >>> result.
>
> >>> > > > > > afterLoad : function()
> >>> > > > > > {
> >>> > > > > > var i = this.index;
> >>> > > > > > var aThumbs = $(".fancybox");
> >>> > > > > > var iLink = aThumbs.eq(i);
> >>> > > > > > var iThumb =
> >>> iLink.children(':first-child')**;
>
> >>> > > > > });
>
> >>> > > > > My preferred would be the number 1 or 2 depending on whether
> >>> your are
> >>> > > > > using thumbnails or not.
>
> >>> > > > > So this is the answer for the original post: how to set the alt
> >>> > > > > attribute in the image inside fancybox?
> >>> > > > > Other questions should be treated in different posts
>
> >>> > > > > On May 23, 4:20 pm, Ximbalo <ximb...@gmail.com> wrote:
>
> >>> > > > > > I believe that the following should achieve the desired
> >>> result.
>
> >>> > > > > > afterLoad : function()
> >>> > > > > > {
> >>> > > > > > var i = this.index;
> >>> > > > > > var aThumbs = $(".fancybox");
> >>> > > > > > var iLink = aThumbs.eq(i);
> >>> > > > > > var iThumb =
> >>> > > > > > var iAlt = iThumb.attr("alt");
> >>> > > > > > $(".fancybox-image").attr("**alt",
> >>> iAlt );
> >>> > > > > > }
>
> >>> > > > > > However... oddly enough... as I check the value of each "var"
> >>> > > above...
> >>> > > > > > they are correct!
> >>> > > > > > But the final line, to add the Thumbnail alt tag to the
> >>> currently
> >>> > > open
> >>> > > > > > image... has no effect.
> >>> > > > > > Not sure why... but if anybody can
>
> ...
> >>> > > > > > }
>
> >>> > > > > > However... oddly enough... as I check the value of each "var"
> >>> > > above...
> >>> > > > > > they are correct!
> >>> > > > > > But the final line, to add the Thumbnail alt tag to the
> >>> currently
> >>> > > open
> >>> > > > > > image... has no effect.
> >>> > > > > > Not sure why... but if anybody can
>
>
> read more »
Lori K. Brown
May 24, 2012, 12:59:36 PM5/24/12
to fanc...@googlegroups.com
JFK, thanks for your attention and patience.
I am not getting a syntax error, but I'm also not getting any alt text.
http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
First image on the page.
I really think I copied your code and placed it correctly. ???
Lori
I am not getting a syntax error, but I'm also not getting any alt text.
http://www.star.nesdis.noaa.gov/smcd/emb/mscat/index.php
First image on the page.
I really think I copied your code and placed it correctly. ???
Lori
> ...
>
> read more »
--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.
JFK
May 24, 2012, 1:04:59 PM5/24/12
to fancybox
My bad, got the wrong script ... this the correct one
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).find('img').attr('alt');
</script>
> *Nil significat, nisi oscillat.*
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
beforeShow: function(){
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
});
}
});
</script>
JFK
May 24, 2012, 1:12:49 PM5/24/12
to fancybox
I saw you did it now, good job.
> ...
>
> read more »
>
> read more »
Lori K. Brown
May 24, 2012, 1:13:16 PM5/24/12
to fanc...@googlegroups.com
Dear JFK --
Thank you! Works! This is very valuable to me, because it makes this tool able to be used on my thousands of govt. webpages.
I guess I see that since the linked item for a fancy box trigger isn't necessarily an image, capturing the alt text of the linked item isn't a given. But government accessibility rules make a strict requirement that all images must have alt attributes supplied, so that users who access the web via screen reader get information about image content consistently.
Trying to learn from your script, I can see that you declare a variable that is the desired alt attribute, and then use a jquery statement to give the alt attribute of the popped up image the value captured in line 1.
It would be lovely if there were an option in the configuration of the program to do this. I'll be using this a LOT.
Thanks again.
Lori
Nil significat, nisi oscillat.
Thank you! Works! This is very valuable to me, because it makes this tool able to be used on my thousands of govt. webpages.
I guess I see that since the linked item for a fancy box trigger isn't necessarily an image, capturing the alt text of the linked item isn't a given. But government accessibility rules make a strict requirement that all images must have alt attributes supplied, so that users who access the web via screen reader get information about image content consistently.
Trying to learn from your script, I can see that you declare a variable that is the desired alt attribute, and then use a jquery statement to give the alt attribute of the popped up image the value captured in line 1.
It would be lovely if there were an option in the configuration of the program to do this. I'll be using this a LOT.
Thanks again.
Lori
JFK
May 24, 2012, 3:16:43 PM5/24/12
to fancybox
I guess your best bet is to use the format of the option 2 that wll
work with any scenario (just make sure you always have a "data-alt"
attribute in your <a> tag)
just check the syntax of both the html and the script
2) passing the alt via "data-" attribute (requires HTML5 DOCTYPE) ...
useful when there is not thumbnail
html
<a class="fancybox" href="image02.jpg" data-alt="alt for image
02">open image 02</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
since I am not the developer
> ...
>
> read more »
work with any scenario (just make sure you always have a "data-alt"
attribute in your <a> tag)
just check the syntax of both the html and the script
2) passing the alt via "data-" attribute (requires HTML5 DOCTYPE) ...
useful when there is not thumbnail
html
<a class="fancybox" href="image02.jpg" data-alt="alt for image
02">open image 02</a>
script
$(".fancybox").fancybox({
beforeShow: function(){
var fancyAlt = $(this.element).data("alt");
$(".fancybox-inner").find("img").attr("alt",fancyAlt);
}
});
I cannot tell if there will be an option for this within the program
}
});
since I am not the developer
>
> read more »
Reply all
Reply to author
Forward
0 new messages