Magical Portfolio Presentation in ASP.NET
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.
Working
Process
In Magical Portfolio Presentation, we have following thing
(i) A web page
(ii) A JavaScript file named expando.js
(iii) 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
All the images should be placed inside a folder named 'images'.
All the images should be placed inside a folder named 'images'.
Guideline
You only have to consider the 'GREEN' lines to create dynamic portfolio.
You only have to consider the 'GREEN' lines to create dynamic portfolio.
Screenshot
Here are some of screenshots of my
portfolio:
Comments
Post a Comment