[SOLVED] Image Viewer

[IceDragon]

i want the code so when u click on the small img on the website- a bigger one appears.

 

<a href="oldpic_attack.jpg" onclick="this.href = 'javascript:void(0);';">

   <img src="oldpic_attack_small.jpg" title="click to expand." style="float:center;"

         onclick="new ImageExpander(this, 'oldpic_attack.jpg');">

</a>

 

i tried this but it doesnt work..

when i click on the small img nothing happens.

[i have the imgs on the server so it must be something wrong with the linking to them]

whats wrong?

[IceDragon]

nvm the above.. i forgot to add the script..

 

now that the script is added i have a new problem..

<a href="oldpic_attack.jpg" onclick="this.href = 'javascript:void(0);';">

   <img src="oldpic_attack_small.jpg" title="click to expand." style="float:center;"

         onclick="new ImageExpander(this, 'oldpic_attack.jpg');">

<script>
function ImageExpander(oThumb, sImgSrc)

{

   // store thumbnail image and overwrite its onclick handler.

   this.oThumb = oThumb;

   this.oThumb.expander = this;

   this.oThumb.onclick = function() { this.expander.expand(); }

  

   // record original size

   this.smallWidth = oThumb.offsetWidth;

   this.smallHeight = oThumb.offsetHeight;    



   // initial settings

   this.bExpand = true;

   this.bTicks = false;

  

   // insert into self organized list

   if ( !window.aImageExpanders )

      window.aImageExpanders = new Array();

   window.aImageExpanders.push(this);



   // create the full sized image and automatically expand when loaded

   this.oImg = new Image();

   this.oImg.expander = this;

   this.oImg.onload = function(){this.expander.onload();}

   this.oImg.src = sImgSrc;

}

ImageExpander.prototype.onload = function()

{

   this.oDiv = document.createElement("div");

   document.body.appendChild(this.oDiv);

   this.oDiv.appendChild(this.oImg);

   this.oDiv.style.position = "absolute";

   this.oDiv.expander = this;

   this.oDiv.onclick = function(){this.expander.toggle();};

   this.oImg.title = "Click to reduce.";

   this.bigWidth = this.oImg.width;

   this.bigHeight = this.oImg.height;

  

   if ( this.bExpand )

   {

      this.expand();

   }

   else

   {

      this.oDiv.style.visibility = "hidden";

      this.oImg.style.visibility = "hidden";

   }

}
</script>
</a>

 

the img expands as expected but the big image appears on the left side of the page. what do i need to change to make it appear on center.

Also how do i set the big img size without having to resize it with Picture Manager.

[IceDragon]

NVM 

 

i got it all working.. IT LOOKS GREAT!!