JavaScript - Enable Zoom In To High Res Pics

Im currently working on a project for class and have been directed to use Javascript for what im looking to do.

Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do.

At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another.

I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance

I am developing a web page which contains a java script file. Java script file is created using excel tool. My problem is that the execution time of a java script function is very high,mainly in chrome browser. what will be solution to overcome this?

Qatrix is a new kind of JavaScript library for easily building up high performance web application with less code. And now is released today.

The features of Qatrix a

Hardware Accelerated Animation
Qatrix will use the native CSS3 transition to process the animation as possible. And this kind of native basic process operation will enable hardware acceleration by browser. The animation of Qatrix will be more faster and more smoother.

High performance code
Qatrix is using more native code and special design to increase the performance. Web application will run much more faster and more efficient.

Easy-to-learn
The name of functions on Qatrix is familiar with the most popular JavaScript jQuery. It will be much more easy to use without re-learn other new concept and knowledge.

Cache system
Qatrix included a simple cache system to storage and fetch data with high speed.

Incredible size
Only 6KB compressed and gzipped file size with 60+ functions. Load script instantly without expectation.

Read more and download: http://qatrix.com

Hello,

I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work..

Can someone please tell me what is wrong with it?

What did i do wrong?

Here is the script i wrote:

Code:

<script type="text/javascript" >
        var img1 = "img1.jpg";

        function zoomin()
        {
            document.getElementById('img1').style.height = 220;
            document.getElementById('img1').style.width = 200;
        }
        function zoomout()
        {
            document.getElementById('img1').style.height = 60;
            document.getElementById('img1').style.width = 50;
        }
    </script>

<img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/>

Please help..

Thank you in advance.

The problem is I am drawing vml shapes on my webpage, at 100%
everything is fine, click events works fine, mouseover also works
fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up.
Click works, but away, like if there are 2 shapes together and I click
on one, the other one will show the data. same with mouseover, I take
the mouse over the shape, but before reaching the shape, it starts
showing the effects of that mouseover.
I tried to tackle this on window resize event. But it dont work.

I wonder, If anyone has encountered this type of problem before & have
a solution.

I think this is done by Javascript.

I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good.
Could anyone tell me where I can get a script to do this or how else if there is some free software that could do it?
The webpage is: http://www.next.co.uk/shopping/homew...roomdecor/17/4

On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image.

All help will is much appreciated

Thanks in advance for any help. I am not very experienced at web design. I have spent a ton of time making a webpage with text in graphics (yes, I know, bad idea). The person I am making it for decided "on my bigger laptop, the text is too small. Can you fix that" So to save myself a ton of work, I'd like to set an automatic css zoom based on the browsers screen resolution.

e.g.

If 1024, then zoom: 100.
if 1440, then zoom 120.
If 1600, then zoom 150

or somethings like that. I can do some basic stuff in CSS, but seems like maybe javascript is required to pull this off. Help!

Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.

I'm searching for a crossbrowser script to zoom in/out the full website content (not text only). Who can provide me a link to that kind of script?

on http://d11882157.a148.awebforyou.com...14_1422_p.html

I use a javascript zoom but it disables the users from clicking on the link above the zoom

is there any solution for this?

I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example:
http://www.intelsystech.com/ab/SampleOverlay.html
That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div.

Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for.

Thanks!


Script follows:

Code:

function Position(x, y)
{
  this.X = x;
  this.Y = y;
  
  this.Add = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X += val.X;
      if(!isNaN(val.Y))
        newPos.Y += val.Y
    }
    return newPos;
  }
  
  this.Subtract = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X -= val.X;
      if(!isNaN(val.Y))
        newPos.Y -= val.Y
    }
    return newPos;
  }
  
  this.Min = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X > val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y > val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }
  
  this.Max = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X < val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y < val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }  
  
  this.Bound = function(lower, upper)
  {
    var newPos = this.Max(lower);
    return newPos.Min(upper);
  }
  
  this.Check = function()
  {
    var newPos = new Position(this.X, this.Y);
    if(isNaN(newPos.X))
      newPos.X = 0;
    if(isNaN(newPos.Y))
      newPos.Y = 0;
    return newPos;
  }
  
  this.Apply = function(element)
  {
    if(typeof(element) == "string")
      element = document.getElementById(element);
    if(element == null)
      return;
    if(!isNaN(this.X))
      element.style.left = this.X + 'px';
    if(!isNaN(this.Y))
      element.style.top = this.Y + 'px';  
  }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function getMousePos(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  var pos;
  if(isNaN(eventObj.layerX))
    pos = new Position(eventObj.offsetX, eventObj.offsetY);
  else
    pos = new Position(eventObj.layerX, eventObj.layerY);
  return correctOffset(pos, pointerOffset, true);
}

function getEventTarget(e)
{
  e = e ? e : window.event;
  return e.target ? e.target : e.srcElement;
}

function absoluteCursorPostion(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  
  if(isNaN(window.scrollX))
    return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 
      eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop);
  else
    return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY);
}

function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
      return;

  var cursorStartPos = null;
  var elementStartPos = null;
  var dragging = false;
  var listening = false;
  var disposed = false;

  function dragStart(eventObj)
  {
    if(dragging || !listening || disposed) return;
    dragging = true;

    if(startCallback != null)
      startCallback(eventObj, element);

    cursorStartPos = absoluteCursorPostion(eventObj);

    elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));

    elementStartPos = elementStartPos.Check();

    hookEvent(document, "mousemove", dragGo);
    hookEvent(document, "mouseup", dragStopHook);

    return cancelEvent(eventObj);
  }

  function dragGo(eventObj)
  {
    if(!dragging || disposed) return;

    var newPos = absoluteCursorPostion(eventObj);
    newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
    newPos = newPos.Bound(lowerBound, upperBound)
    newPos.Apply(element);
    if(moveCallback != null)
      moveCallback(newPos, element);

    return cancelEvent(eventObj);
  }

  function dragStopHook(eventObj)
  {
    dragStop();
    return cancelEvent(eventObj);
  }

  function dragStop()
  {
    if(!dragging || disposed) return;
    unhookEvent(document, "mousemove", dragGo);
    unhookEvent(document, "mouseup", dragStopHook);
    cursorStartPos = null;
    elementStartPos = null;
    if(endCallback != null)
      endCallback(element);
    dragging = false;
  }

  this.Dispose = function()
  {
    if(disposed) return;
    this.StopListening(true);
    element = null;
    attachElement = null
    lowerBound = null;
    upperBound = null;
    startCallback = null;
    moveCallback = null
    endCallback = null;
    disposed = true;
  }
  
  this.GetLowerBound = function()
  { return lowerBound; }
  
  this.GetUpperBound = function()
  { return upperBound; }

  this.StartListening = function()
  {
    if(listening || disposed) return;
    listening = true;
    hookEvent(attachElement, "mousedown", dragStart);
  }

  this.StopListening = function(stopCurrentDragging)
  {
    if(!listening || disposed) return;
    unhookEvent(attachElement, "mousedown", dragStart);
    listening = false;

    if(stopCurrentDragging && dragging)
      dragStop();
  }

  this.IsDragging = function(){ return dragging; }
  this.IsListening = function() { return listening; }
  this.IsDisposed = function() { return disposed; }

  if(typeof(attachElement) == "string")
    attachElement = document.getElementById(attachElement);
  if(attachElement == null)
    attachElement = element;

  if(!attachLater)
    this.StartListening();
}

function ResizeableContainer(contentID, parent)
{
  var MINSIZE = 38;
  var EDGE_THICKNESS = 7;
  var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3;
  var EDGEDIFFPOS = EDGE_THICKNESS + 1;
  var TEXTDIFF = EDGE_THICKNESS + 2;
  
  var _width = 38;
  var _height = 38;
  
  var _maxWidth = 900;
  var _maxHeight = 600;
  
  var _minWidth = MINSIZE;
  var _minHeight = MINSIZE;

  var _container = document.createElement('DIV');
  _container.className = 'reContainer';
  
  var _content = document.getElementById(contentID);
  _content.ResizeableContainer = this;
  _content.className = 'reContent';
  
  var _rightEdge = document.createElement('DIV');
  _rightEdge.className = 'reRightEdge';
  
  var _bottomEdge = document.createElement('DIV');
  _bottomEdge.className = 'reBottomEdge';
 
  var _cornerHandle = document.createElement('DIV');
  _cornerHandle.className = 'reCorner';
  
  var _leftCornerHandle = document.createElement('DIV');
  _leftCornerHandle.className = 'reLeftCorner';
  
  var _topCornerHandle = document.createElement('DIV');
  _topCornerHandle.className = 'reTopCorner';
  
  var _rightHandle = document.createElement('DIV');
  _rightHandle.className = 'reRightHandle';

  var _bottomHandle = document.createElement('DIV');
  _bottomHandle.className = 'reBottomHandle';
  
  var _topRightImageHandle = document.createElement('DIV');
  _topRightImageHandle.className = 'reTopRightImage';
  
  var _bottomLeftImageHandle = document.createElement('DIV');
  _bottomLeftImageHandle.className = 'reBottomLeftImage';
  
  var _leftEdge = document.createElement('DIV');
  _leftEdge.className = 'reLeftEdge';
  
  var _topEdge = document.createElement('DIV');
  _topEdge.className = 'reTopEdge';
  
  _cornerHandle.appendChild(_leftCornerHandle);
  _cornerHandle.appendChild(_topCornerHandle);
  
  _rightEdge.appendChild(_topRightImageHandle);
  _rightEdge.appendChild(_rightHandle);
  
  _bottomEdge.appendChild(_bottomHandle);
  _bottomEdge.appendChild(_bottomLeftImageHandle);

  _container.appendChild(_topEdge);
  _container.appendChild(_leftEdge);    
  _container.appendChild(_rightEdge);
  _container.appendChild(_bottomEdge);
  _container.appendChild(_cornerHandle);
  _container.appendChild(_content);
    
  var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true);
  var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true);
  var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true);
  
  UpdateBounds();
  UpdatePositions();
  AddToDocument();
  
  function moveStart(eventObj, element)
  {
    if(element == _cornerHandle)
      document.body.style.cursor = 'se-resize';
    else if(element == _bottomEdge)
      document.body.style.cursor = 's-resize';
    else if(element == _rightEdge)
      document.body.style.cursor = 'e-resize';
  }
  
  function moveEnd(element)
  {
    UpdatePositions();
    document.body.style.cursor = 'auto'; 
  }

  function rightHandleMove(newPos, element)
  {   
    _width = newPos.X + EDGE_THICKNESS;
    UpdatePositions();
  }
  
  function bottomHandleMove(newPos, element)
  {
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function cornerHandleMove(newPos, element)
  {
    _width = newPos.X + EDGE_THICKNESS;
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function UpdateBounds()
  {
    _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
  }
  
  function UpdatePositions()
  {
    if(_width < _minWidth)
      _width = _minWidth;
    if(_width > _maxWidth)
      _width = _maxWidth;
    
    if(_height < _minHeight)
      _height = _minHeight;
    if(_height > _maxHeight)
      _height = _maxHeight;
    
    _container.style.width = _width + 'px';  
    _container.style.height = _height + 'px';
    
    _content.style.width = (_width - TEXTDIFF) + 'px';
    _content.style.height = (_height - TEXTDIFF) + 'px';
    _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px';
    _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px';
    _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px';
    _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px';
    _cornerHandle.style.left = _rightEdge.style.left;
    _cornerHandle.style.top = _bottomEdge.style.top;
    _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px';
    _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px';
    
    
    _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px';
    _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px';
  }
  
  function Listen(yes)
  {
    if(yes)
    {
      _rightHandleDrag.StartListening();
      _bottomHandleDrag.StartListening();
      _cornerHandleDrag.StartListening();
    }
    else
    {
      _rightHandleDrag.StopListening();
      _bottomHandleDrag.StopListening();
      _cornerHandleDrag.StopListening();
    }
  }
  
  function AddToDocument()
  {
    if(typeof(parent) == "string")
      parent = document.getElementById(parent);
    
    if(parent == null || parent.appendChild == null)
    {
      var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647);
      while(document.getElementById(id) != null)
        id += Math.round(Math.random()*2147483647);
        
      document.write('<span id="'+ id + '"></span>');
      element = document.getElementById(id);
      element.parentNode.replaceChild(_container, element);
    }
    else
    {
      parent.appendChild(_container);
    }
    
    Listen(true); 
  }
  
  this.StartListening = function()
  { Listen(true); }
  
  this.StopListening = function()
  { Listen(false); }
  
  this.GetContainer = function()
  { return _container; }
  
  this.GetContentElement = function()
  { return _content; }
  
  this.GetMinWidth = function()
  { return _minWidth; }
  
  this.GetMaxWidth = function()
  { return _maxWidth; }
  
  this.GetCurrentWidth = function()
  { return _width; }
  
  this.GetMinHeight = function()
  { return _minHeight; }
  
  this.GetMaxHeight = function()
  { return _maxHeight; }
  
  this.GetCurrentHeight = function()
  { return _height; }
  
  this.SetMinWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _width = value;
    
    UpdatePositions();
  }
  
  this.SetMinHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _height = value;
    
    UpdatePositions();
  }
}

Hello folks, I'm new here.
This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images.

It is probably best I explain this by using drawings.
As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later)


(Figure 1)

Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position.


(Figure 2)

The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example!

Is there any way to do this or script I can use? My javascripting skills aren't brilliant!

Cheers.

Hello all.

This script is working fine in IE7 but FF is complaining about undeclared variables.

Can anybody assist to get this working in FF or do I need a new script?

Any and all advice is welcome.


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ZOOM</title>

<script type="text/javascript">

//Image zoom in/out script- by javascriptkit.com
//Visit JavaScript Kit (http://www.javascriptkit.com) for script
//Credit must stay intact for use

var zoomfactor=0.05 //Enter factor (0.05=5%)

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW+"px"
whatcache.style.height=originalH+"px"
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}

</script>
</head>

<body>
<!-- CHANGE 99 to your image width, 100 to image height, and "office_map" to your image's name-->

<a href="#" onmouseover="zoom(100,63,'office_map_6','in')" onmouseout="clearzoom()">Zoom In</a> | 

<a href="#" onmouseover="zoom(100,63,'office_map_6','restore')">Normal</a> | 

<a href="#" onmouseover="zoom(120,60,'office_map_6','out')" onmouseout="clearzoom()">Zoom Out</a>

<div style="position:relative;width:420;height:300">
	<div style="position:absolute"><img name="office_map_6" src="images/office_map_6.gif" width="100" height="63">
	</div>
</div>
</body>
</html>

low tech

I've seen a bunch of these around but most of them take over the screen, etc. We found the perfect one and wondered if anyone knows of any scripts that are like this one:

http://www.panic.com/transmit/

(See "Screenshots" towards the bottom for the zoom lightbox effect).