Image Slider

Does anyone know how to reproduce this effect in something like JQuery? Specifically I’m looking at the hover effects at the top of the page:

http://donq.com/about/

It looks like a custom JS file from their end, but I’d like to find something a little more mainstream that looks and acts very similarly, especially with the easing in and out of images.

Help!

Probably this is where you are looking for

No offense, but did you even look at the site as an example? It’s not even close!

No offense from my side either but what you showed is a Moo tools effect look a bit further to the examples I suggest and use your imagination :slight_smile:

This script duplicates the Moo Tools slider, but uses a table to hold the background images instead of a CSS controlled <li> list. Yes, I know tables are a no-no for positioning on a page, but in this case it gives a far more stable result.

You will need to create 4 images 205px wide x 100px high for this to work.

I have used javascript here, not JQuery.

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Image Slider</title>
<script type=“text/javascript”>
<!–
var currentObj1=null, currentObj2=null, count1=null, count2=null; // global
// ======= change settings here =======
var pauseIt=10, stepIt=5; // <<<< global msec pause & step
// ====================================
// expand boxes
var exp=function ()
{ currentObj1=this;
// counters is property of each td
count1=this.counters;
setTimeout(“process1()”,pauseIt);
}
// ----- end exp()------
function process1()
{// check if limit exceeded
// width range from 125 to 205px
if(count1+stepIt<205)
{ count1=count1+stepIt;
// increment this obj counter
currentObj1.counters=count1;
// increase box width
currentObj1.style.width=count1+“px”;
// cycle again after pause
setTimeout(“process1()”,pauseIt);
}
}
// ========== end process1 =============================================
// contract boxes
var cont=function()
{ currentObj2=this;
// counters is property of each td
count2=this.counters;
setTimeout(“process2()”,pauseIt);
}
// ------- end cont ------------
function process2()
{ // check if limit exceeded
// width range from 205 to 125px
if(count2-stepIt>125)
{ count2=count2-stepIt;
// decrement this obj counter
currentObj2.counters=count2;
currentObj2.style.width=count2+“px”;
setTimeout(“process2()”,pauseIt);
}
}
// ============= end process2 ===================

// apply mouseover/ mouseout to all tds
// add counters property to all tds
function init()
{ var allTDs=document.getElementsByTagName(“td”);
for(var i=0;i<allTDs.length; i++)
{allTDs[i].onmouseover=exp;
allTDs[i].onmouseout=cont;
allTDs[i].counters=125;
}
}
//–>
</script>
<style type=“text/css”>
<!–
table td { width:125px; height:100px; cursor: pointer; }
#k1 { background-image: url(‘img1.gif’); }
#k2 { background-image: url(‘img2.gif’); }
#k3 { background-image: url(‘img3.gif’); }
#k4 { background-image: url(‘img4.gif’); }
–>
</style>
</head>

<body onload=“init()”>

<table border=“0” cellpadding=“0” cellspacing=“0” style=“border-collapse: collapse”>
<tr>
<td id=“k1”> </td>
<td id=“k2”> </td>
<td id=“k3”> </td>
<td id=“k4”> </td>
</tr>
</table>

</body>

</html>