jquery implementation Thumbnail Preview Slider instance

This example describes the thumbnail preview slider for jquery implementations. Share to everyone for your reference. Specifically as follows:

The effect is as shown in the following illustration:

The main code is as follows:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

(function ($) {$.fn.thumbnailslider = function (options) {var opts = $.extend ({}, $.fn.thumbnailslider.defaults, Options) ; Return This.each (function () {var $this = $ (this), o = $.meta? $.extend ({}, OPTs, $pxs _container.data ()): opts; var $ts _ Container= $this. Children ('. Ts_container '), $ts _thumbnails= $ts _container.children ('. Ts_thumbnails '), $nav _elems= $ Ts_container.children (' Li '). Not ($ts _thumbnails), total_elems= $nav _elems.length, $ts _preview_wrapper= $ts _ Thumbnails.children ('. Ts_preview_wrapper '), $arrow = $ts _thumbnails.children (' span '), $ts _preview= $ts _preview_ Wrapper.children ('. Ts_preview '); /* Calculate the size of the $ts_thumbnails: Width-> width thumbnail + border (2*5) height-> height thumbnail + border + triangle Heig HT (6) top->-(height plus margin of 5) left-> Leftdot-0.5*width + 0.5*widthnavdot When the mouse is navigated it will be set and the default value will be assigned to the first navigation Preview Point * * var w_ts_thumbnails= o.thumb_width + 2*5, h_ts_thumbnails= o.thumb_height + 2*5 + 6, t_ts_thumbnails=-(H_TS_THUMBN Ails + 5), $first _nav= $Nav_elems.eq (0), l_ts_thumbnails= $first _nav.position (). Left-0.5*w_ts_thumbnails + 0.5* $first _nav.width (); $ts _thumbnails.css ({width:w_ts_thumbnails + ' px ', height:h_ts_thumbnails + ' px ', top:t_ts_thumbnails + ' px ', left:l_t S_thumbnails + ' px '}); /* Calculates the position above and to the left of the tip arrows top-> thumb height + border (2*5) left-> (thumb width + border)/2-width/2/var t_arrow= o.thum B_height + 2*5, l_arrow= (o.thumb_width + 2*5)/2-$arrow. Width ()/2; $arrow. css ({left:l_arrow + ' px ', Top:t_arrow + ' px '}); /* Calculates the width of the $ts_preview-> thumbnail multiplied by the number of all thumbnails * * * $ts _preview.css (' width ', total_elems*o.thumb_width + ' px '); /* Set $ts _preview_wrapper width and height-> thumb width/thumb height/$ts _preview_wrapper.css ({width:o.thumb_width + ' px ') , Height:o.thumb_height + ' px '}); The mouse-navigated element $nav _elems.bind (' MouseEnter ', function () {var $nav _elem= $ (this), idx= $nav _elem.index (), and/or calculated $ts _ Thumbnails the latest left distance/var new_left= $nav _elem.position (). Left-0.5*w_ts_thumbnails + 0.5* $nav _elem.width (); $ts _thUmbnails.stop (True). Show (). Animate ({left:new_left + ' px '},o.speed,o.easing); /* Animation transitions from the left side of the $ts _preview to the right thumbnail/$ts _preview.stop (True). Animate ({left:-idx*o.thumb_width + ' px '},o.speed,o.easing); When the mouse pauses the picture is magnified if (o.zoom && o.zoomratio > 1) {var new_width= o.zoomratio * o.thumb_width, new_height= o.zoom Ratio * O.THUMB_HEIGHT; Increase the width of the $ts _preview in order to allow the picture to magnify the Var ts_preview_w= $ts _preview.width (); $ts _preview.css (' width ', (ts_preview_w-o.thumb_width + new_width) + ' px '); $ts _preview.children (). EQ (idx). FIND (' img '). Stop (). Animate ({width:new_width + ' px ', height:new_height + ' px '}, O.zoomspeed); }). bind (' MouseLeave ', function () {//If magnified set its width and height to be the default value if (O.zoom && o.zoomratio > 1) {var $nav _elem= $ (this) , idx= $nav _elem.index (); $ts _preview.children (). EQ (idx). FIND (' img '). Stop (). css ({width:o.thumb_width + ' px ', height:o.thumb_height + ' px '}); $ts _thumbnails.stop (True). Hide (); ). bind (' click ', function () {var $nav _elem= $ (this), idx= $nav _elem.index (); O.onclick (IDX); }); }); }; $.fn.thumbnailslider.defaults = {speed:100,//Slide transition animation speed easing: ' jswing ',//Easing animation effect thumb_width:75,//your picture width thumb_ height:75,//your picture height zoom:false,//whether the thumbnail magnifies the zoomratio:1.3,//magnification ratio (the value must be greater than 1) zoomspeed:15000,//enlarge the animation speed onclick:function () {return false;} Click Send back}; }) (JQuery);

Full instance code click here to download the site.

I hope this article will help you with your jquery programming.