A jQuery-based focus chart plug-in similar to Apple styles, jquery focus

A jQuery-based focus chart plug-in similar to Apple styles, jquery focus

The jQuery focus chart we want to share this time is very special. It looks very simple, but quite atmospheric. The overall focus chart style is similar to the Apple style. Due to jQuery's use, you only need to click the thumbnail below the image to achieve the focus chart effect of the image switch, this jQuery focus graph plug-in is very suitable for use on the Production page.

Download Online Preview source code

Next we will share with you the process and source code for implementing this apple focus chart.

HTML code:

<div id="gallery">    <div id="slides" style="width: 3680px; margin-left: 0px;">    <div class="slide"></div>    <div class="slide"></div>    <div class="slide"></div>    <div class="slide"><a target="_blank" href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/"></a></div>    </div>    <div id="menu">    <ul>        <li class="fbar inact"> </li><li class="menuItem inact act"><a href=""></a></li><li class="menuItem inact"><a href=""></a></li><li class="menuItem inact"><a href=""></a></li><li class="menuItem inact"><a href=""></a></li>    </ul>    </div>  </div>

From the preceding HTML code, we can see that the whole focus chart consists of some div components to form an image container, and uses the ul li list to form the thumbnail below.

CSS code:

#gallery{    /* CSS3 Box Shadow */    -moz-box-shadow:0 0 3px #AAAAAA;    -webkit-box-shadow:0 0 3px #AAAAAA;    box-shadow:0 0 3px #AAAAAA;    /* CSS3 Rounded Corners */    -moz-border-radius-bottomleft:4px;    -webkit-border-bottom-left-radius:4px;    border-bottom-left-radius:4px;    -moz-border-radius-bottomright:4px;    -webkit-border-bottom-right-radius:4px;    border-bottom-right-radius:4px;    border:1px solid white;    background:url(img/panel.jpg) repeat-x bottom center #ffffff;    /* The width of the gallery */    width:920px;    overflow:hidden;}#slides{    /* This is the slide area */    height:400px;    /* jQuery changes the width later on to the sum of the widths of all the slides. */    width:920px;    overflow:hidden;}.slide{    float:left;}#menu{    /* This is the container for the thumbnails */    height:45px;}ul{    margin:0px;    padding:0px;}li{    /* Every thumbnail is a li element */    width:60px;    display:inline-block;    list-style:none;    height:45px;    overflow:hidden;}li.inact:hover{    /* The inactive state, highlighted on mouse over */    background:url(img/pic_bg.png) repeat;}li.act,li.act:hover{    /* The active state of the thumb */    background:url(img/active_bg.png) no-repeat;}li.act a{    cursor:default;}.fbar{    /* The left-most vertical bar, next to the first thumbnail */    width:2px;    background:url(img/divider.png) no-repeat right;}li a{    display:block;    background:url(img/divider.png) no-repeat right;    height:35px;    padding-top:10px;}a img{    border:none;}

CSS code is also very simple, but it is just some simple settings.

JQuery code:

$(document).ready(function(){    /* This code is executed after the DOM has been completely loaded */    var totWidth=0;    var positions = new Array();    $('#slides .slide').each(function(i){        /* Traverse through all the slides and store their accumulative widths in totWidth */        positions[i]= totWidth;        totWidth += $(this).width();        /* The positions array contains each slide's commulutative offset from the left part of the container */        if(!$(this).width())        {            alert("Please, fill in width & height for all your images!");            return false;        }    });    $('#slides').width(totWidth);    /* Change the cotnainer div's width to the exact width of all the slides combined */    $('#menu ul li a').click(function(e,keepScroll){            /* On a thumbnail click */            $('li.menuItem').removeClass('act').addClass('inact');            $(this).parent().addClass('act');            var pos = $(this).parent().prevAll('.menuItem').length;            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);            /* Start the sliding animation */            e.preventDefault();            /* Prevent the default action of the link */            // Stopping the auto-advance if an icon has been clicked:            if(!keepScroll) clearInterval(itvl);    });    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');    /* On page load, mark the first thumbnail as active */    /*****     *     *    Enabling auto-advance.     *     ****/    var current=1;    function autoAdvance()    {        if(current==-1) return false;        $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]);    // [true] will be passed as the keepScroll parameter of the click function on line 28        current++;    }    // The number of seconds that the slider will auto-advance in:    var changeEvery = 10;    var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);    /* End of customizations */});

This is the focus of the focus chart. After completing the animation logic of the image slider, click the thumbnail to switch the image.