Menu
View this in html format and you’ll understand what i’m talkin about:
<html>
<head>
<title> </title>
<script type=”text/javascript”>
function ImageExpander(oThumb, sImgSrc)
{
this.oThumb = oThumb;
this.oThumb.expander = this;
this.oThumb.onclick = function() { this.expander.expand(); }
this.smallWidth = oThumb.offsetWidth;
this.smallHeight = oThumb.offsetHeight;
this.bExpand = true;
this.bTicks = false;
if ( !window.aImageExpanders )
window.aImageExpanders = new Array();
window.aImageExpanders.push(this);
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 again on image to close.”;
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”;
}
}
ImageExpander.prototype.toggle = function()
{
this.bExpand = !this.bExpand;
if ( this.bExpand )
{
for ( var i in window.aImageExpanders )
if ( window.aImageExpanders[i] !== this )
window.aImageExpanders[i].reduce();
}
}
ImageExpander.prototype.expand = function()
{
this.bExpand = true;
for ( var i in window.aImageExpanders )
if ( window.aImageExpanders[i] !== this )
window.aImageExpanders[i].reduce();
if ( !this.oDiv ) return;
this.oThumb.style.visibility = “hidden”;
this.x = this.oThumb.offsetLeft;
this.y = this.oThumb.offsetTop;
this.w = this.oThumb.clientWidth;
this.h = this.oThumb.clientHeight;
this.oDiv.style.left = this.x + “px”;
this.oDiv.style.top = this.y + “px”;
this.oImg.style.width = this.w + “px”;
this.oImg.style.height = this.h + “px”;
this.oDiv.style.visibility = “visible”;
this.oImg.style.visibility = “visible”;
if ( !this.bTicks )
{
this.bTicks = true;
var pThis = this;
window.setTimeout(function(){pThis.tick();},25);
}
}
ImageExpander.prototype.reduce = function()
{
this.bExpand = false;
}
ImageExpander.prototype.tick = function()
{
var cw = document.body.clientWidth;
var ch = document.body.clientHeight;
var cx = document.body.scrollLeft + cw / 2;
var cy = document.body.scrollTop + ch / 2;
var tw,th,tx,ty;
if ( this.bExpand )
{
tw = this.bigWidth;
th = this.bigHeight;
if ( tw > cw )
{
th *= cw / tw;
tw = cw;
}
if ( th > ch )
{
tw
th = ch;
}
tx = cx – tw / 2;
ty = cy – th / 2;
}
else
{
tw = this.smallWidth;
th = this.smallHeight;
tx = this.oThumb.offsetLeft;
ty = this.oThumb.offsetTop;
}
var nHit = 0;
var fMove = function(n,tn)
{
var dn = tn – n;
if ( Math.abs(dn) < 3 )
{
nHit++;
return tn;
}
else
{
return n + dn / 10;
}
}
this.x = fMove(this.x, tx);
this.y = fMove(this.y, ty);
this.w = fMove(this.w, tw);
this.h = fMove(this.h, th);
this.oDiv.style.left = this.x + “px”;
this.oDiv.style.top = this.y + “px”;
this.oImg.style.width = this.w + “px”;
this.oImg.style.height = this.h + “px”;
if ( !this.bExpand && (nHit == 4) )
{
this.oImg.style.visibility = “hidden”;
this.oDiv.style.visibility = “hidden”;
this.oThumb.style.visibility = “visible”;
this.bTicks = false;
}
if ( this.bTicks )
{
var pThis = this;
window.setTimeout(function(){pThis.tick();},25);
}
}
</script>
<style type=”text/css”>
div.img
{
margin: 1px;
border: 0px;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 5px;
border: 0px;
}
div.img a:hover img{border: 2px solid #ff0000;}
div.desc
{
text align: center;
font-weight: normal;
width: 110px;
margin: 2px;
}
</style>
</head>
<body>
<div id=”Marquee”
<table>
<tr>
<td>
<div class=”img”>
<a href=”DSC_4958.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_4958.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_4958.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_3828.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_3828.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_3828.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5424.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5424.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5424.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5843.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5843.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5843.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5381.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5381.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5381.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5541.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5541.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5541.jpg’);”></a>
<div class=”img”>
</td>
<td>
<div class=”img”>
<a href=”DSC_5742.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5742.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5742.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5784.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5784.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5784.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5687.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5687.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5687.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5718.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5718.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5718.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5397.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5397.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5397.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5870.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5870.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5870.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5734.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5734.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5734.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5850.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5850.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5850.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5939.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5939.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5939.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5999.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5999.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5999.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_6003.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_6003.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_6003.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5758.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5758.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5758.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5793.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5793.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5793.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_3834.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_3834.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_3834.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5680.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5680.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5680.jpg’);”></a>
</div>
</td>
<td>
<div class=”img”>
<a href=”DSC_5953.jpg” onclick=”this.href = ‘javascript:void(0);’;”><img src=”thDSC_5953.jpg” style=”float:right;” onclick=”new ImageExpander(this, ‘DSC_5953.jpg’);”></a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Problem No1.: This page is to be put inside an iFrame of dimensions width=”950″ and height=”157″. Either side of the iFrame, I have a button which on mouseover scrolls this page inside the iFrame either left or right. How would I get the main page to control the scrolling of the page within the iFrame?:
Problem No2.: The CSS image gallery works spot on when by itself and still does even in the iFrame. BUT expands to the dimensions of the iFrame 950*157. HOW would I bring the expanded image outside of the iFrame and so that it takes the full screen size?