SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Image Slider

  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably this is where you are looking for

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No offense, but did you even look at the site as an example? It's not even close!

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">&nbsp;</td>
    <td id="k2">&nbsp;</td>
    <td id="k3">&nbsp;</td>
    <td id="k4">&nbsp;</td>
    </tr>
    </table>

    </body>

    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •