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. 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

  1. A web page
  2. A JavaScript file named expando.js
  3. 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!


Similar Articles