Introduction
Usually we have seen only static portfolio but it is very simple to create our
portfolio very effective and presentable. Even visitor will love to create it in
his own project, but without learning it he can never create it. In this Magical
Portfolio, when user will point his mouse on image then it will automatically
get raised and when dis-point the mouse it will automatically collapsed. See the
demo here:
http://www.itorian.com/photographs.aspx [I will recommend to open it
in Internet Explorer because our hosting server dose not support other]
Working Process
In Magical Portfolio Presentation, we have following thing
- A web page
- A JavaScript file named expando.js
- Some images
Web Page Content
<%@
Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
%>
<!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
runat="server">
<title>Magical
Portfolio Presentation</title>
<style
type="text/css">
img.expando{
border:
none;
vertical-align:
top;
}
</style>
<!--Here
we are calling the JS file-->
<script
type="text/javascript"
src="expando.js">
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div
style="width: 374px;
height: 129px; left: 296px; top: 352px;">
<img
class="expando"
border="0"
src="images/1.JPG"
width="100"
height="75"
/>
<img
class="expando"
border="0"
src="images/2.JPG"
width="100"
height="75"
/>
<br
/>
<img
class="expando"
border="0"
src="images/3.JPG"
width="100"
height="75"
/>
<img
class="expando"
border="0"
src="images/4.JPG"
width="100"
height="75"
/>
<br
/>
<!-- Add here more without any further
changes-->
<!-- Add here more without any further changes-->
<!-- Add here more without any further
changes-->
<!-- Add here more without any further
changes-->
<!-- Add here more without any further
changes-->
</div>
</div>
</form>
</body>
</html>
A JavaScript File
if
(document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor),
times = a? 20 : 40, speed = a? 40 : 20;
var expConIm =
function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] +
'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d
&& e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im)
break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer)
clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r =
new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover',
expConIm, false);
document.addEventListener('mouseout',
expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
Some images
Images would be in a folder named 'images'.
Guideline
You only have to consider the 'GREEN' lines to create dynamic portfolio.
Screenshot
Here are some of screenshots of my portfolio:
![image1.gif]()
![image2.gif]()
![image3.gif]()
![image4.gif]()
![image5.gif]()
HAVE A GOOD CODING!