|
JavaScript - Zoom In/out Function On Jpgs?
Hi,
I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out. What exactly would be the code for that? Thanks Map can be viewed BY CLICKING HERE. Similar TutorialsHi i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this? $(document).ready(function() { var ctrlDown = false; var ctrlKey = 17, vKey = 189, cKey = 187; $(document).keydown(function(e) { if (e.keyCode == ctrlKey) ctrlDown = true; }).keyup(function(e) { if (e.keyCode == ctrlKey) ctrlDown = false; }); $(document).keydown(function(e) { //alert(ctrlDown); if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) return false; }); }); Please provide me do you have any other code to do this? Thanks, Jagadeesh. 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. 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 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. 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.
Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!
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. 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? 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 Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ 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();
}
}
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). 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! 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?
Does anyone have any idea how to imitate browser zoom with javascript? I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript? In firefox, when you press ctrl+, the whole page resizes appropriately, even background images. With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS. It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800). That's be neato!! Any ideas? Anyone know a script? I am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business. Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business. If you want to see the mapping code, I can post it. I wasn't sure what to do. This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon. THANKS! I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array. I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/ Code: <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Make an array of the LatLng's of the markers you want to show
var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:650px;height:550px;"></div>
</body>
</html>
I am no javascript coder so apologies for what may be a simple issue, I have a php page that pulls MySQL marker locations I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in) the page where you can see the end result is he http://www.peugeotcentral.co.uk/modu...tches&Region=1 I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there any help much appreciated, I do have the source code for the php if required I want to build functionality like that (see http://www.cymaxstores.com/Common/Pr....aspx?ID=26094) is it possible with only javascript , or ??? I dont have any clue plz help any help would be appreciated Thanks sknaht Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance |
|||||||