JavaScript Photo Gallery Script

Simple JavaScript photo gallery, when you click on thumbnail it will pop up new window and a fixed size of the image.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">

<!--

function newWin(foto)
  {
  nImage = new Image();
  nImage.src = foto;
  width = screen.width;
  height = screen.height;
  i = nImage.width;
  j = nImage.height;
  k = 'no';
    if (i > screen.width)
      {
        i = screen.width - 80;
        j = nImage.height + 30;
        k = 'yes';
       }
     if (j > screen.height)
       {
         j = screen.height - 100;
         i = nImage.width + 40;
         k = 'yes';
       }
     if (width == 0 || height == 0)
       {
         i = 640;
         j = 480;
         k = 'yes';
       }
     else
       {
         i = i + 40
         j = j + 30
       }
  myWin= open("", "_blank",
  "width="+i+",height="+j+",status=no,toolbar=no,menubar=no,scrollbars="+k+",resizable="+k+"");
  myWin.document.open();
  myWin.document.write("<html><head><title>NEW WINDOW TITLE</title></head><body bgcolor='#C0C0C0' leftmargin='7'><p align='center' style='margin-left: 10; margin-top: 10'><img border='0' src='");
  myWin.document.write(foto);
  myWin.document.write("'></p></body></html>");
  myWin.document.close();}

//-->

</script>

Insert this code into <body> tags

<p align="center">
<a href="#" onClick="newWin('big02-2.gif')"><img border="0" src="thumbnail02-1.gif" width="137" height="38"></a>
<a href="#" onClick="newWin('big02-3.gif')"><img border="0" src="thumbnail02-1.gif" width="137" height="38"></a>
<a href="#" onClick="newWin('big02-4.gif')"><img border="0" src="thumbnail02-1.gif" width="137" height="38"></a>
</p>

Instruction:

Change the following text:

NEW WINDOW TITLE - title of the new image window.
thumbnail02-1.gif - Thumbnail URL channels.
big02-2.gif - Full-size image URL channels.

Webmaster » Web Programming » JavaScript » Image Effects » Photo Gallery Script

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links