Today, we will share a picture slider plugin that is based on jquery to enlarge the preview. This jquery focus map plugin is characterized by the ability to slide the picture sideways, and click on the image to enlarge the preview, the only flaw is that the focus map does not cycle switch, if you have a good JavaScript skills, you can modify the code to achieve this function. As follows:
Online preview Source Download
The implemented code.
HTML code:
<DivID= "Slider"> <Divclass=> <imgsrc= "Images/01.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> <Divclass=> <imgsrc= "Images/02.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> <Divclass=> <imgsrc= "Images/03.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> <Divclass=> <imgsrc= "Images/04.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> <Divclass=> <imgsrc= "Images/05.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> <Divclass=> <imgsrc= "Images/06.jpg" /> <ahref= "Http://www.w2bc.com">Samsung I9300</a> </Div> </Div>
CSS code:
@charset "Utf-8";/*CSS Document*/H1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;Border:0;}Ul,ol,li{List-style:None;}Input,button{margin:0;font-size:12px;vertical-align:Middle;}Body{font-size:12px;font-family:Arial, Helvetica, Sans-serif;Color:#333; }Table{Border-collapse:collapse;border-spacing:0;}a{Color:#333;text-decoration:None;}P,p a{font-size:12px;Color:#666;}Body{background:#333;}/*Image-slider*/. Image-slider{width:802px;Height:195px;margin:0 Auto;background:URL (.. /images/bg.png) No-repeat;padding:14px 16px 0px 16px;position:relative;}. Image-slider-back,. Image-slider-forward{float: Left;width:23px;Height:98px;Color: White;position:relative;Top:32px;cursor:Pointer;}. Image-slider-back{Background-image:URL (.. /images/arrow-left.png);background-repeat:no-repeat;background-position: Left;}. Image-slider-forward{Background-image:URL (.. /images/arrow-right.png);background-repeat:no-repeat;background-position: Right;}. Image-slider-contents{width:755px;Height:164px;float: Left;position:relative;Overflow:Hidden;}. image-slider-contents. Contents-wrapper{position:Absolute;Padding-top:18px; Left:0;}. image-slider-contents. Outer{Background-color:#fff;float: Left;width:156px;Height:186px;margin:0px 15px;cursor:Pointer;position:relative;}. Spic{width:156px;Height:186px;text-align:Center;Color:#333;float: Left;}. image-slider-contents img{width:120px;Height:120px;margin:0 Auto;}. Spic a{Display:Block;text-align:Center;}. Hidden{Display:None;}. Visible{Display:Block;}. Thumbnail-active{Filter:Alpha (opacity=100);Opacity:1.0;cursor:Pointer;}. Thumbnail-inactive{Filter:Alpha (OPACITY=20);Opacity:0.2;cursor:Pointer;}. Preview{position:Absolute;width:450px;Height:450px;Background-color: White;padding:2px;Border:Solid 1px Black;}. Preview. Img-large{width:330px;Z-index: +;margin:0 Auto;}. Preview. Img-large. Left{position:Absolute; Left:8px;Top:200px;width:16px;Height:24px;Z-index: +;background:URL (.. /images/arrow-left.png);cursor:Pointer;}. Preview. Img-large. Right{position:Absolute; Left:428px;Top:200px;Z-index: +;width:16px;Height:24px;background:URL (.. /images/arrow-right.png);cursor:Pointer;}. Preview. Close{position:Absolute; Left:434px;Top:-16px;width:32px;Height:34px;background:URL (.. /images/close.png);float: Right;cursor:Pointer;Z-index: -;}. Preview. Img-large img{width:330px;Height:330px;}. Preview. Label{width:434px;Line-height:30px;float: Left;position:Absolute;Top:316px; Left:0;padding:8px;Background-color: White;text-align: Left;Font-weight:Bold;font-size:13px;text-align:Center;}. Outer{Border:Solid 1px Black;}
via:http://www.w2bc.com/article/11122
A picture slider plug-in that can magnify previews based on jquery