help with adding YAHOO.widget.Tooltip

Hi

I'm nearly done with my custom theme and would like to add this code from the ItemEditCaptions.tpl file to show the resized image in the thumbnail view when you hover the mouse over it.

<script type="text/javascript">
  //<![CDATA[
  {foreach from=$form.children item=child}
  {if isset($child.resize)}
  {* force and alt/longdesc parameter here so that we avoid issues with single quotes in the title/description *}
  new YAHOO.widget.Tooltip("gTooltip", {ldelim}
      context: "thumb_{$child.id}", text: '{g->image item=$child image=$child.resize class="giThumbnail" maxSize=640 alt="" longdesc="" }',
      showDelay: 250 {rdelim});
  {elseif isset($child.thumbnail)}
  new YAHOO.widget.Tooltip("gTooltip", {ldelim}
      context: "thumb_{$child.id}", text: '{g->image item=$child image=$child.thumbnail class="giThumbnail" alt="" longdesc=""}',
      showDelay: 250 {rdelim});
  {/if}
  {/foreach}
  //]]>
</script>

What I want to do is to display the resized image when you hover over a thumbnail the same way its done in ItemEditCaptions.tpl

There are two problems that I came across,
One: how can I add these files
$template->javascript('lib/yui/yahoo-min.js');
$template->javascript('lib/yui/dom-min.js');
$template->javascript('lib/yui/event-min.js');
$template->javascript('lib/yui/container-min.js');
so that they only get loaded when the album.tpl is called?

Two: Just for testing I added these file into the modules/search/Preloads.inc which is called from my theme.inc file. (This does not really work because I have the search in my header and will get called twice when it is called by another template.) But for testing it worked the only thing was that it loaded the thumbnails rather then the resized images.

Or is there an easier way to do this with css?

Cheers
hamba

Thanks I have added the files into showAlbumPage() function.

Now for the second problem. This is the code I'm using to show the thumbnails taken from the siriux theme.

      {foreach from=$theme.children item=child}
        {if !$child.canContainChildren}
          {if $firstItem}
            <div class="gallery-items">
            <div class="gallery-items-all">
            {assign var="firstItem" value=false}
          {/if}
              <div class="gallery-item-thumb">
                {if isset($child.thumbnail)}{strip}
                <a id="thumb_{$child.id}" href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
                  {g->image item=$child image=$child.thumbnail class="giThumbnail"}</a>
                {/strip}{/if}
                {if !isset($child.thumbnail)}
                <a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
                  {g->text text="no thumbnail"}</a>
                {/if}
              {g->block type="core.ItemLinks" item=$child links=$child.itemLinks}
              </div>
        {/if}
      {/foreach}
      <script type="text/javascript">
        //<![CDATA[
        {foreach from=$theme.children item=child}
        {if isset($child.resize)}
        {* force and alt/longdesc parameter here so that we avoid issues with single quotes in the title/description *}
        new YAHOO.widget.Tooltip("gTooltip", {ldelim}
            context: "thumb_{$child.id}", text: '{g->image item=$child image=$child.resize class="giThumbnail" maxSize=640 alt="" longdesc="" }',
            showDelay: 250 {rdelim});
        {elseif isset($child.thumbnail)}
        new YAHOO.widget.Tooltip("gTooltip", {ldelim}
            context: "thumb_{$child.id}", text: '{g->image item=$child image=$child.thumbnail class="giThumbnail" alt="" longdesc=""}',
            showDelay: 250 {rdelim});
        {/if}
        {/foreach}
        //]]>
      </script>

This does work but it shows the thumbnail instead of the resized image.

willfei, why do you want to show the resized image on the album page. Are you using the thumbnails for something else? If not just increase the size of the thumbnails.

I am thinking that if the resized photo would be shown as a on mouse effect in ablum page, it would be very convenient for users. Would you mind to help me ?