help with image map. HELP!

classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

help with image map. HELP!

followingbliss.com

I am trying to implement Shadowbox and having real problems. I Can't even get it to open with a standard href. I am also trying to use an image map. I have read this forum extensively and simply can't figure out. I am hoping someone out there can help me.

here is the code I am using:

<link rel="stylesheet" href="/js/shadowbox-build-3.0rc1/shadowbox.css" type="text/css">
<script type="text/javascript" src="/js/shadowbox-build-3.0rc1/shadowbox.js"></script><script type="text/javascript"> window.onload = function(){ Shadowbox.init(); Shadowbox.setup(document.getElementById('map').getElementsByTagName('area')); }; </script>
Note on the above: I originally linked by using the standard code on the website, for example:
<link rel="stylesheet" href="<b>src/shadowbox.css" type="text/css">
The difference being that href was pointing to "src/shadowbox.css" rather than the actual file in which it is in "/js/shadowbox-build-3.0rc1/shadowbox.css". Neither extensions have worked.

and in the body, here is my code:

<div>My Image</div>

<div align="center">
       
    <map id="map" name="map">
    <area shape="rect" coords="269,58,340,137" href="images/nepal-final--27.jpg" alt=""/>

Neither the standard href (the first one) nor the image map will open he shadow box. Instead, what happens is that it opens the image in another page.

you can see all this on my portfolio website in progress: www.followingbliss.com

Any advice would be most appreciated.

thanks
Jonathan
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

Wizzud
Move Shadowbox.init() out of the window.onload.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
Thanks for your help. I will try it tonight. just to be clear, is this what you mean:

<link rel="stylesheet" href="/js/shadowbox-build-3.0rc1/shadowbox.css" type="text/css">
<script type="text/javascript" src="/js/shadowbox-build-3.0rc1/shadowbox.js"></script><script type="text/javascript"> Shadowbox.init(); window.onload = function(){ Shadowbox.setup(document.getElementById('map').getElementsByTagName('area')); }; </script>
If that is not right, can you fix and re-post?

also....is this correct:

     <script type="text/javascript" src="/js/shadowbox-build-3.0rc1/shadowbox.js"></script>
or should it be as detailed in the forums:

     <script type="text/javascript" src="src/shadowbox.js"></script>
Thanks for helping!

jonathan
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

Wizzud
Yes.

Your page should look for the shadowbox js/css files wherever you have placed them on your site. They should be within the top level of folder you uploaded, but where that folder is, and what you chose (or didn't) to call it, is down to you.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
Thanks, Wizzud. You are scholar and a gentleman.

Another question...is it possible to use multiple galleries with a single image map? If so, how would I do this?

Thanks again
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

Wizzud
Yes.
getElementsByTagName() returns an array of elements. You can split that array down into smaller arrays, one per gallery. Then call Shadowbox.setup() once per smaller array, providing {gallery:'galleryName'} (different for each array!) as the second argument to init().
How you split down the large array into the galleries you want is down to you. Easiest to control is probably by className on the area elements.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
thank god for Wizzuds.

I am not totally clear on how classname interacts with the area tag and shadowbox.setup.

As an example, and to make sure I understand this correctly since I am a bit of a noob, can you edit this code to illustrate what you mean?

.gallery1 {?????;}
.gallery2 {?????;}

<script type="text/javascript"> window.onload = function(){ Shadowbox.init(); Shadowbox.setup(document.getElementById('map').getElementsByTagName('area'"){gallery:'gallery1','gallery2','gallery3'}); </script> 
and in the body, area code:

map id="map" name="map">
    <area class="gallery1" shape="rect" coords="269,58,340,137" href="images/nepal-final--27.jpg" alt=""/>
    <area class="gallery1" shape="rect" coords="300,20,340,100" href="images/nepal-final--28.jpg" alt=""/>
    <area class="gallery2" shape="rect" coords="58,100,300,137" href="images/nepal-final--29.jpg" alt=""/>
    <area class="gallery2" shape="rect" coords="100,80,310,300" href="images/nepal-final--30.jpg" alt=""/>

Another way I thought of doing this might be to define different maps within the image and separate it out that way...so a different map would be a different gallery. Would that make sense?

if you look at my source code on my website (www.followingbliss.com), you can see how I have it setup and what I am trying to do. Feel free to edit that code directly and paste here, if that is easier.

Thanks again for your help. I wish I could do more of this so I didn't have to ask so many questions...but I am learning!

Cheers,
Jonathan
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

Wizzud
This post was updated on .
Given (for example)...
<map id="map" name="map">
   <area class="gallery1" shape="rect" coords="269,58,340,137" href="images/nepal-final--27.jpg" alt=""/>
   <area class="gallery1" shape="rect" coords="300,20,340,100" href="images/nepal-final--28.jpg" alt=""/>
   <area shape="rect" coords="300,20,340,100" href="images/nepal-final--29.jpg" alt=""/>
   <area class="gallery2" shape="rect" coords="58,100,300,137" href="images/nepal-final--30.jpg" alt=""/>
   <area class="gallery2" shape="rect" coords="100,80,310,300" href="images/nepal-final--31.jpg" alt=""/>
   <area shape="rect" coords="300,20,340,100" href="images/nepal-final--32.jpg" alt=""/>
   <area class="gallery3" shape="rect" coords="300,20,340,100" href="images/nepal-final--33.jpg" alt=""/>
   <area class="gallery3" shape="rect" coords="300,20,340,100" href="images/nepal-final--34.jpg" alt=""/>
   ....
<script type="text/javascript">
Shadowbox.init(); // <= EDIT : moved out of window.onload!
window.onload = function(){
    var A = document.getElementById('map').getElementsByTagName('area')
      , B = {}
      , i = 0
      , j;
    for(; i < A.length; i++){
      j = A[i].className || '_';
      if(!B[j]){
        B[j] = [A[i]]; 
      }else{
        B[j].push(A[i]);
      }
    }
    for(j in B){ 
      Shadowbox.setup(B[j], {gallery:j == '_' ? null : j}); // <= EDIT : no gallery if no className!
    }
  };
</script>
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
Wizzud...this is both incredibly helpful and confusing. =) Given that this is way over my head, I must once again ask some slight clarification. I hope you are cool with me continuing to bug you about this.

First clarification: in a previous answer you told me to move Shadowbox init out of the onload function, but here it is back inside the function. is that correct?

second clarification: Will the code you wrote for breaking down the arrays be sufficient for as many galleries as I want to add (probably 6 to 7 galleries), or do I need to do anything more with that code? I really don't understand how it works, but I believe it is looking for a class name for each area tag and effectively removes the other area tags without that class name to show the gallery. is that correct?

third clarification: do I need to define the classname in the head tag as well, or is it sufficient to just use a class in the area tag?

Anything else I should know about this?

thanks for your continued help, Wizzud. I really appreciate it.

JI
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

Wizzud
1. So you spotted my deliberate mistake!!  Ummm ... sorry about that. That's what comes of copying then modifying someone else's code, instead of writing from scratch. I've edited my post.

2. yes, no, sort of
It groups same-classed elements into arrays together; it groups unclassed elements into another array; it then runs setup() for each array, with gallery name being the class of the elements within each relevant array (I've now edited the post slightly so that the array of unclassed elements does not get a gallery name!)

3. no, yes
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
your apologizing to me for a mistake? Nonsense! man, you have given me so much help....and I think a lot of other people who are trying to do the same hairbrained thing as I will gain from these posts as well.

I appreciate your help and will implement tonight when I get home.

thanks again!

J
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
This post was updated on .
In reply to this post by Wizzud
Thanks for that code, Wizzud. It worked beautifully. You da man.

I have yet another question, if you don't mind.

I want to include more images in the gallery than thumbnails/area tags I have designated for each gallery. I saw the following code for use with div tags:

A href='pic1' rel='shadowbox[gallery]'>

<div style='display:none;'>



</div>

my question is...how do I convert this for use with area tags? I see you created a div tag that wasn't displayed, but can you do the same with area tags?

thanks once again!
J


	
	
	
	
Reply | Threaded
Open this post in threaded view
|

Re: help with image map. HELP!

followingbliss.com
In reply to this post by Wizzud
wizzud..

can you help with this? any advice would be most appreciated:


I want to include more images in the gallery than thumbnails/area tags I have designated for each gallery. I saw the following code for use with div tags:

A href='pic1' rel='shadowbox[gallery]'>

<div style='display:none;'>
 a href='pic2' rel='shadowbox[XXX]'>
 a href='pic3' rel='shadowbox[XXX]'>
 a href='pic4' rel='shadowbox[XXX]'>
</div>

my question is...how do I convert this for use with area tags? I see you created a div tag that wasn't displayed, but can you do the same with area tags?