4images Forum & Community

4images Issues / Ausgaben => Discussion & Troubleshooting => Topic started by: Lucifix on June 09, 2003, 10:55:00 AM

Title: Auto Resizable Pop Up
Post by: Lucifix on June 09, 2003, 10:55:00 AM
I am using this code in /templates/(your template)/media/jpg.html

Quote
<!-- Template file for JPG Files -->
<a href="{media_src}" target="_blank">{thumb}</a>


Only thumbnail shows with this code. And if you click on thumb, new window opens with original size of the photo.

But I would like to use Java script, so it won't open new IE with all bars in it, but just new window, with auto-resize function.

I have found this code, but have littel problems with inserting in it. Can anyone please help me?

Thanks.

Here is the code:
Code: [Select]

<!-- TWO STEPS TO INSTALL AUTO-RESIZABLE-POP-UP:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function CaricaFoto(img){
  foto1= new Image();
  foto1.src=(img);
  Controlla(img);
}
function Controlla(img){
  if((foto1.width!=0)&&(foto1.height!=0)){
    viewFoto(img);
  }
  else{
    funzione="Controlla('"+img+"')";
    intervallo=setTimeout(funzione,20);
  }
}
function viewFoto(img){
  largh=foto1.width+20;
  altez=foto1.height+20;
  stringa="width="+largh+",height="+altez;
  finestra=window.open(img,"",stringa);
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<div align="center">
<TABLE BORDER="1" cellspacing=3>
  <TR>
  <TD align=left>
  <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-1.gif')" BORDER="0">
  <IMG SRC="/img/auto-resizable-pop-up/1.gif" BORDER="0"></A>
  </TD>
  <TD align=center>
  <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-2.gif')" BORDER="0">
  <IMG SRC="/img/auto-resizable-pop-up/2.gif" BORDER="0"></A>
  </TD>
  <TD align=right>
  <A HREF="javascript:CaricaFoto('/img/auto-resizable-pop-up/lg-4.gif')" BORDER="0">
  <IMG SRC="/img/auto-resizable-pop-up/4.gif" BORDER="0"></A>
  </TD>
  </TR><TR>
  <TD colspan=3>
  <DIV ALIGN="CENTER">Click for zooming the image at it's real dimensions...</DIV>
  </TD>
  </TR>
</TABLE>
</div>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.97 KB -->
Title: Auto Resizable Pop Up
Post by: Lucifix on June 09, 2003, 11:24:46 AM
I found easier code...
Code: [Select]
<!-- Template file for JPG Files -->
<a href="#"

onClick="NewWindow=window.open('{media_src}','NewWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollb

ars=yes,resizable=yes,width=auto,height=auto,top=,left=');">{thumb}</a>


But still have some problems with inserting Title of window and margin.

Code: [Select]
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0> <- that one doesn't work