Image Map Grouping

[John]

Hello All,

I am a new user to fancybox and have a question regarding grouping.

I am having trouble getting grouping to work on an image map. I can
get single items to work without a problem but because area tag does
not take a rel attribute it isn't possible for me to do a group.

I made several attempts at altering the fancybox javscript so that it
would group based on the alt attribute but I was not successful.

Could someone with more javascript knowledge please help me to edit
fancybox to group based on alt attribute instead of rel?

I would greatly appreciate it.

[JFK]

it's possible to edit the fancybox script and change it to use 'alt'
instead of 'rel' but you have to be aware that the html element 'a'
doesn't support the 'alt' attribute and you won't be able to group
images with anchors (however, there is a bizarre workaround if you
want to group both, a and area tags if you are interested)

this workaround applies for fancybox v.1.2.1

1. edit the jquery.fancybox-1.2.1.js file (no pack version); be sure
you have a backup if you messed it up.

2. look around the line 62 and find this section:

if (!elem.rel || elem.rel == '') {
var item = {href: elem.href, title: elem.title};
if ($(elem).children("img:first").length) {
item.orig = $(elem).children("img:first");
}
opts.itemArray.push( item );
} else {
var subGroup = $(matchedGroup).filter("a[rel=" + elem.rel + "]");

.... etc.

3. if you see carefully, in this section there are 4 'rel' items;
change them for 'alt' so you get:

if (!elem.alt || elem.alt == '') {
var item = {href: elem.href, title: elem.title};
if ($(elem).children("img:first").length) {
item.orig = $(elem).children("img:first");
}
opts.itemArray.push( item );
} else {
var subGroup = $(matchedGroup).filter("a[alt=" + elem.alt + "]");

4. now, in the LAST line of this section, notice the 'a' tag before
the brackets;
change the 'a' tag for 'area' so you get:

if (!elem.alt || elem.alt == '') {
var item = {href: elem.href, title: elem.title};
if ($(elem).children("img:first").length) {
item.orig = $(elem).children("img:first");
}
opts.itemArray.push( item );
} else {
var subGroup = $(matchedGroup).filter("area[alt=" + elem.alt + "]");

5. save your js file and go to your html file

6. activate fancybox for your image map:

<script type="text/javascript">
$(document).ready(function() {
$("area.group").fancybox();
});
</script>

7. add the 'alt' attribute to your area tag

<map id="image" name="image1">
<area class="group" alt="group" shape=".... />
<area class="group" alt="group" shape=".... />
etc ....
</map>

so you have it!
didn't have time to test it in IE6 but I works in IE7

[skizzee]

I think I'm having a similar problem to the original post here.
Unfortunately I'm using fancybox-1.3.4 so the above suggestion doesn't appear to exist in this version, I have barely any idea of what I'm doing, and am stuck after hours and hours of research.
I'm using one background image, with multiple hotspots, to open up multiple images, all within a group.
Everything appears to work great in Firefox, but in IE and Chrome fancybox does not appear to load when I click images. I can see that the images are active links, but when I click nothing opens.

I hope it's something easy I'm just missing! ANY advice will help. Thank you. Here is the link to the page.
http://www.thefountainheadco.com/portfolio.html

[JFK]

it does nothing because the href in the <area> tag targets to "#"
<area href="#" coords="255,152,461,326" shape="rect">

if you are using an image map (<map> tag) then use <area> to define
the clickable area, not <a>
but if you are using <a> in order to have a gallery, maybe your
solution is to use different <a> absolutely positioned within a main
container with the big image as a background

[skizzee]

I was able to fix it, if you or anyone else is trying to do the same thing, feel free to view the page/code here:
http://www.thefountainheadco.com/portfolio.html

[RichardH]

I have this approach working, but your base image at 293k is far too large for my site. I use sliced images to keep the page size down. If I split one of the underlying images across more than one slice, I end up with more than one instance of the linked image being shown through next and prev navigation or the slide show. How do I eliminate the duplicate instances?

[Dan Kirkpatrick]

This page appears to have expired.  I am also using v1.3.4 and am looking for a solution to show images grouped together in a post as a gallery.  Do you or anyone else have the source code or knowledge to do this?

 

 

On Friday, July 13, 2012 6:48:20 PM UTC-4, skizzee wrote:

[JFK]

If you have something like this

<map name="Map" id="Map">
 <area class="fancybox" shape="rect" coords="0,0,0,0" href="{target}" />
 <area class="fancybox" shape="rect" coords="0,0,0,0" href="{target}" />
 ...etc.
</map>

then you just add to the <head> section of your page

<script type="text/javascript">

$(document).ready(function() {
  $('.fancybox').fancybox({
    // fancybox API options 
  }); // fancybox
}); //  ready

</scrip>

... this should work with v1.3.4