Album module large pic on thumbnail hover

[thomsonson]

hi,
I'm trying to set up the same kind of image enlargement as used on this site: http://www.raypettibon.com/main.html, using the Album module.

I have modified the default Album template and come up with the following: http://tinyurl.com/odhz2fv
- however this shows only the first image enlargement, and I have not been able to figure out how to show the others.

Has anyone managed anything similar with the Album module?

I'm using CMS 1.11.8 with Album v. 1.10.3. This is the current template code:

Code: Select all

{* same as Thickbox *}
{* Album List *}
{if !$album}

{else}

{* Photo List *}

<ul style="width:300px;margin:0;padding:0;list-style:none;">
{foreach from=$pictures item=picturesrow}
{foreach from=$picturesrow item=onepicture}
 <li style="float:left;width:50%;">
  <a href="" title="{$onepicture->name|escape:'html'}
{if ($onepicture->comment != "")} - {$onepicture->comment|escape:'html'}{/if}" class="thumbnail"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'}" title="{$onepicture->name|escape:'html'}"{$onepicture->autothumbnailsize} />

<span>
<img src="{$picture->picture}" alt="{$picture->name|escape:'html'}"  title="{$picture->name|escape:'html'}  - {$picture->comment|escape:'html'}" />
</span>

{/foreach}
{/foreach}
  </a>
 </li>

{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}

</ul>

{if $picturecount==0}No image{/if}
{/if}

[Dr.CSS]

This is driven by CSS, you may need to make changes to your album template, all calls for picture need to be onepicture, move the 2 foreach outside the </a></li>...

Call me and I can explain it much better...

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: white;
padding: 0px;
left: -1000px;
border: 0px;
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
color: white;
padding: 0px;
background-color:#FFFFFF;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
display:block;
visibility: visible;
top: 30px;
left: 315px; /*position where enlarged image should offset horizontally */

}