Here the two codes this works fine...
My domain:
www.germanmobilphone.com
use this for example:
http://www.germanmobilephone.com/Mobile ... ::155.html
i have in this moment use only the highslide-caption in the proct info and works fine
the highslide-overlay controlbar works but not witht the product info.
You can see it here:
http://www.germanmobilephone.com/Mobile ... :3_15.html
works but only with one picture (is not your problem)
The product info with highslide-caption (now installed)
<div style="float:left;">{if $PRODUCTS_IMAGE != ''}<a href="{$PRODUCTS_POPUP_IMAGE}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE}" alt="Highslide JS" title="Click to enlarge" /></a><br /></div>
{/if}{if $PRODUCTS_SHORT_DESC !=''}<h2>{$PRODUCTS_SHORT_DESC}</h2>{/if}
{if $PRODUCTS_IMAGE_1 != ''}
<div style="display:none">
<a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_2 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_3 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="Click to enlarge" /></a> {/if}
{if $PRODUCTS_IMAGE_4 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_4}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_4}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_5 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_5}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_5}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
</div>
<div class='highslide-caption' id='the-caption'>
<a href="#" onclick="return hs.previous(this)" class="control" style="float:left; display: block">
Previous
<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small>
</a>
<a href="#" onclick="return hs.next(this)" class="control"
style="float:left; display: block; text-align: right; margin-left: 50px">
Next
<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small>
</a>
<a href="#" onclick="return hs.close(this)" class="control">Close</a>
<a href="#" onclick="return false" class="highslide-move control">Move</a>
<br /><br />
<img src="{$PRODUCTS_IMAGE}" alt="Highslide JS" title="{$PRODUCTS_NAME}" />
{if $PRODUCTS_IMAGE_1 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_2 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_3 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_4 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_4}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_4}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_5 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_5}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_5}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
<h1>{$PRODUCTS_NAME}</h1>
<div style="clear:both"></div></div>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
But if i change the code with the highslide overlay Controlbar than i can not see the controlbar - the pictures works... but i will see the controlbar...
I am sure, that the path to the controlbar pictures is 100% ok!
{if $PRODUCTS_IMAGE != ''}<a href="{$PRODUCTS_POPUP_IMAGE}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE}" alt="Highslide JS" title="Click to enlarge" /></a><br /></div>
{/if}{if $PRODUCTS_SHORT_DESC !=''}<h2>{$PRODUCTS_SHORT_DESC}</h2>{/if}
{if $PRODUCTS_IMAGE_1 != ''}
<div style="display:none">
<a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_2 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_3 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="Click to enlarge" /></a> {/if}
{if $PRODUCTS_IMAGE_4 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_4}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_4}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
{if $PRODUCTS_IMAGE_5 != ''}
<a href="{$PRODUCTS_POPUP_IMAGE_5}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_5}" alt="Highslide JS" title="Click to enlarge" /></a>
{/if}
</div>
<div id="controlbar" class="highslide-overlay controlbar">
<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
<a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</div>
</div>
<br /><br />
<img src="{$PRODUCTS_IMAGE}" alt="Highslide JS" title="{$PRODUCTS_NAME}" />
{if $PRODUCTS_IMAGE_1 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_1}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_1}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_2 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_2}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_2}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_3 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_3}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_3}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_4 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_4}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_4}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
{if $PRODUCTS_IMAGE_5 != ''}<a href="{$PRODUCTS_POPUP_IMAGE_5}" class="highslide" onclick="return hs.expand(this, {literal}{captionId: 'the-caption'}{/literal})"><img src="{$PRODUCTS_IMAGE_5}" alt="Highslide JS" title="{$PRODUCTS_NAME}" /></a>{/if}
<h1>{$PRODUCTS_NAME}</h1>
---------------------------------------------------------------------------
--------------------------------------------------------------------------
I hope you can help me, please... I have work to long, and i have no idea
regards from germany
Ernie