Announcement

Collapse
No announcement yet.

How do I automatically resize my pop-up windows to fit the image in it?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How do I automatically resize my pop-up windows to fit the image in it?

    The code below can be used for an 'extended information' page layout. It works by creating a pop-up window that will automatically resize to the dimensions of the image that is within the pop-up window.

    To use this code, go to 'Design | Library | Layouts' and expand the 'Extended Info Layout' group. Right-click on any existing layout in that group and select 'New Layout'. Give your new layout a name of 'Auto-Resizing Layout' and click 'OK'.

    Once your new layout is created in the library, double-click on it to open it and replace all the code within it with the HTML below...
    <html>
    <head>
    <Actinic:WINDOW width="<Actinic:Variable Name="ExtendedInfoImageWidth"/>" height="<Actinic:Variable Name="ExtendedInfoImageHeight"/>"/>
    <title><actinic:variable name="PageTitle" /></title>
    <actinic:variable name="BaseHref" />
    <script language='javascript'>
    var arrTemp=self.location.href.split("?");
    var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
    var NS = (navigator.appName=="Netscape")?true:false;
    function FitPic(){
    iWidth = (NS)?window.innerWidth:document.body.clientWidth;
    iHeight = (NS)?window.innerHeight:document.body.clientHeight;
    iWidth = document.images[0].width - iWidth;
    iHeight = document.images[0].height - iHeight;
    window.resizeBy(iWidth, iHeight); self.focus(); };
    </script>
    </head>
    <body bgcolor="#000000" onload='FitPic();' topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
    <script language='javascript'>
    document.write( "<a href=\"javascript:window.close();\"><img src=\"<Actinic:Variable Name="ExtendedInfoImage"/>\" width=\"<Actinic:Variable Name="ExtendedInfoImageWidth"/>\" height=\"<Actinic:Variable Name="ExtendedInfoImageHeight"/>\" border=\"0\"></a>" );
    </script>
    </body>
    </html>

    Click 'OK' to save your changes when done.

    Your new layout will be available to select within the 'Extended Information' tab of 'Site Options' or within your products/sections.

    Disclaimer: This code was provided by an SellerDeck user via the SellerDeck Community (http://community.sellerdeck.com/) and so can't be supported by the SellerDeck Technical Support team.
Working...
X