Large image issue

[onomiko]

I'm stumped. Here's the page I built of your demo (before putting in my own images, I wanted to make sure I could get it to work). As you can see, the appearance/positioning of the large image as the viewer moves isn't working as in the demo. Can't figure out why. Thoughts?

Live test page: http://dianejwright.com/test/

HTML:

<div id="zoom" class="az-wrap" style="width: auto;">
  <div class="small az-small">
    <img alt="small rushmore" src="http://dianejwright.com/images/demo/rushmore_small.jpg">
  </div>
  <div class="az-zoom">
    <div class="large az-large">
      <img alt="big rushmore" src="http://dianejwright.com/images/demo/rushmore.jpg">
    </div>
  </div>
</div>

CSS:

#zoom      { width: 500px; }
.small img { width: 225px; height: 150px; }
.large img { width: 500px; height: 333px; background: white; }

/* Overall */
.az-wrap, .az-small, .az-large {
  position: relative;
}
.az-wrap-inner {
  display: block;
}
/* This wraps the large image and hides it */
.az-zoom {
  background: #fff;
  border: #333 1px solid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* Default zoom window size */
  height: 100px;
  overflow: hidden;
  z-index: 100;
  display: none;
}
/* Class applied to az-mover when large image is windowed */
.az-windowed {
  overflow: hidden;
  position: absolute;
}
/* Class applied to az-mover when large image is fully shown */
.az-expanded {
  height: auto;
  width: auto;
  position: static;
  overflow: visible;
};

HEAD:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://dianejwright.com/wp-content/themes/Cranium/js/jquery.anythingzoomer.js"></script>
<script>
  $(function(){
    $("#zoom").anythingZoomer({
      smallArea   : 'small',    // class of small content area; the element with this class name must be inside of the wrapper
      largeArea   : 'large',    // class of large content area; this class must exist inside of the wrapper. When the clone option is true, it will add this automatically
      clone       : false,      // Make a clone of the small content area, use css to modify the style
      switchEvent : 'dblclick', // event that allows toggling between small and large elements - default is double click
      edge        : 30          // How far outside the wrapped edges the mouse can go; previously called "expansionSize"
    });
  });
</script>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>

[Mottie]

Hi Diane!

It looks like the HTML is in the older version format. It has since been simplified so all you'll need is the following.

<div id="zoom">
    <div class="small">
        <img alt="small rushmore" src="http://dianejwright.com/images/demo/rushmore_small.jpg">
    </div>

    <div class="large">
        <img alt="big rushmore" src="http://dianejwright.com/images/demo/rushmore.jpg">
    </div>
</div>

I apologize for not making that clearer. I think I'll start working on making some wiki documentation to make things more clear.

Interesting site by the way :)

Edit: Oh wait... I did make documentation! LOL... wow my memory is going, next thing I'll find is some ear hair... ACK!

[onomiko]

YES!! Thank you SO much. Sometimes, all you have to do is ask, right? Really appreciate it. It works now! djw

[onomiko]

Here's how I used it, if you're interested: http://dianejwright.com/credentials/

[Mottie]

Very nice! LOL all I've been doing for the last 2 hours is watching the TED videos on your site. I've always loved TED videos, but I haven't seen the ones you have there ;)

Oh, and the reason I'm replying. I love how you started from the tail end of the spinal cord and worked your way up... very clever ;). But, please consider removing the title from the image, I see the tooltip popup when I hover over it and it won't go away!

[onomiko]

Done. It doesn't show for me on Mac/Firefox so I didn't even think about it. Thanks for pointing it out. Glad you're enjoying the selections. :) djw