Forums / Setup & design / HOWTO: click to enlarge

HOWTO: click to enlarge

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

Björn X

Thursday 04 August 2005 6:01:22 pm

some small javascript trick to view a larger image with out loading again

        <div class="attribute-image">
{run-once}
{literal}
<script language="Javascript" type="text/javascript">
<!--
function enlargeImage( imsrc, ww, wh ) {
    w1=window.open('','ImageEnlarged','width='+ww+',height='+wh+',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no,dependent=yes,innerHeight='+wh+',innerWidth='+ww+'');
    w1.document.open();
    w1.document.write("<html><head><\/head>");
    w1.document.write("<body style=\"margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;\">");
    w1.document.write("<a href=\"javascript:window.close()\" style=\"margin: 0px 0px 0px 0px;border: none;padding: 0px 0px 0px 0px;\"><img name=theimg style=\"margin: 0px 0px 0px 0px;border: none;padding: 0px 0px 0px 0px;\" src=\"" + imsrc + "\" /></a>");
    w1.document.write("<\/body><\/html>");
    w1.document.focus();
};
//-->
</script>
{/literal}
{/run-once}
            <p>
            <a href="javascript:;" onClick="return enlargeImage('/{$node.data_map.image.content.original.full_path|ezurl(no}',{$node.data_map.image.content.original.width},{$node.data_map.image.content.original.height});" title="Click to Enlarge">
            {attribute_view_gui attribute=$node.object.data_map.image image_class=imagelarge}
            </a>
            </p>
        </div>

Xavier Dutoit

Thursday 04 August 2005 11:49:31 pm

Nice trick, thanks for sharing.

X+

http://www.sydesy.com

Georg Franz

Friday 05 August 2005 8:16:07 am

Hi Björn,

well done + tx for sharing!! :-)

Best wishes,
Georg.

--
http://www.schicksal.com Horoskop website which uses eZ Publish since 2004

Softriva .com

Friday 09 February 2007 10:19:14 am

Björn,
I tried to use your JS but I think it has some error. Do you have an updated version?