The jquery focus map that we're going to share this time is very special, it's a very simple look, but it's quite atmospheric. The overall style of the focus map is imitation apple style, because of the use of jquery, we just click on the thumbnail below the picture to achieve the focus of the image switch tut effect, this jquery focus map plug-in is very suitable for the production of the page to display the use of the Web.
Next, we share the process and source code of the Apple focus map.
HTML code:
Copy Code code as follows:
<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= 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 above HTML code can be seen, the entire focus map by a number of Div to form a picture container, with the list of UL Li form the following thumbnail.
CSS code:
Copy Code code as follows:
#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 are the slide area * *
height:400px;
/* JQuery Changes the width later on to the sum of the widths of the slides. */
width:920px;
Overflow:hidden;
}
. slide{
Float:left;
}
#menu {
/* This are 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 in 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 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, are a few simple settings.
jquery Code:
Copy Code code as follows:
$ (document). Ready (function () {
/* This code was executed after the DOM has been completely loaded * *
var totwidth=0;
var positions = new Array ();
$ (' #slides. Slide '). Each (function (i) {
/* Traverse through 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 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 "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] would be passed as the Keepscroll parameter of the ' click Function on ' line 28
current++;
}
The number of seconds that the slider would auto-advance in:
var changeevery = 10;
var ITVL = setinterval (function () {autoadvance ()},changeevery*1000);
/* End of customizations * *
});
This is the focus of the focus diagram, complete the picture slider animation logic, click on the thumbnail can switch pictures.
