https://www.future-labo.com/layout/fl/common/js/jquery.imageNavigation.js

1/*
2Image Navigation plugin 1.0
3Hiroshi Sato,2010
4http://net-king.com
5*/
6(function($) {
7
8         function imageNavigationSlide(option) {
9             var $active = $('.navi-image a.active', option.elem);
10             if ( $active.length == 0 ) $active = $('.navi-image a:last', option.elem);
11             var $next =  $active.next().length ? $active.next() : $('.navi-image a:first' ,option.elem);
12             $active.addClass('last-active');
13             var $active_navi = $(".navi ."+ $active.attr("rel") +"", option.elem); 
14             var $next_navi = $(".navi ."+ $next.attr("rel") +"", option.elem); 
15             //rolloverImage_out($active_navi,option);
16             //rolloverImage_on($next_navi,option);
17             $active_navi.removeClass("active");
18             $next_navi.addClass("active");
19             rolloverImage_chenge(option);
20             $next.css({opacity: 0.0})
21                 .addClass('active')
22                 .animate({opacity: 1.0}, option.animationTime, function() {
23                     $active.removeClass("active last-active");
24                 });
25         }
26         function startInterval(option){
27             if(option.autoPlay) imageNavigationID = setInterval(function(){ imageNavigationSlide(option) }, option.time );
28         }
29         function rolloverImage_on(obj, option){
30             if (!option.rolloverImage) return;
31             $("img.over", obj).stop().fadeTo(option.rolloverTime,1);
32         }
33         function rolloverImage_out(obj, option){
34             if (!option.rolloverImage) return;
35             $(".over", obj).fadeTo(option.rolloutTime,0);
36         }
37         function rolloverImage_chenge(option){
38             $(".navi a.active img.over", option.elem).stop().fadeTo(option.rolloverTime,1);
39             $(".navi a:not(.active) img.over", option.elem).stop().fadeTo(option.rolloutTime,0);
40         }
41
42$.fn.imageNavigation = function(option) {
43             //init
44             option = $.extend({
45               elem:this,
46               time: 2000,
47               animationTime: 500,
48               autoPlay: true,
49               rolloverImage: true,
50               rolloverTime: 10,
51               rolloutTime: 800
52             }, option);
53             var $active = $('.navi-image a.active', option.elem);
54             if ( $active.length == 0 ) {
55               $active = $('.navi-image a:first', option.elem);
56               $active.addClass("active");
57               $(".navi a:first", option.elem).addClass("active");
58             }
59             
60             naviCnt = $(".navi a", option.elem).size();
61             for(i=1;i<=naviCnt;i++) {
62               $(".navi li:nth-child("+i+") a",option.elem).addClass("navi-"+i).attr("rel","navi-"+i);
63               $(".navi-image a:nth-child("+i+")",option.elem).addClass("navi-"+i).attr("rel","navi-"+i);
64             }
65
66             $(".navi li a", option.elem).each(function(){
67               $(this).css("position", "relative");
68               if(option.rolloverImage) {
69                 overSrc = $("img", this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2");
70                 $(this).prepend('<img src="'+overSrc+'" class="over" />');
71                 $("img.over" ,this).css("position", "absolute").css({opacity: 0.0});
72               }
73             });
74             $("a.active img.over", this).stop().css({opacity: 1.0});
75
76             $(".navi a",option.elem).mouseover(function(){
77               $active = $('.navi-image a.active', option.elem);
78               $next = $(".navi-image a."+$(this).attr("rel")+"");
79               $('.navi a', option.elem).removeClass("active");
80               $(this).addClass("active");
81               //rolloverImage_on(this, option);
82               rolloverImage_chenge(this, option);
83               if($active.attr("rel") != $next.attr("rel") ) {
84                 $active.addClass('last-active');
85                 $active.removeClass('active');
86                 $next.stop().css({opacity: 0.0})
87                 .addClass('active')
88                 .animate({opacity: 1.0}, option.animationTime, function() {
89                   $active.removeClass('active last-active');
90                 });
91               }
92             }).mouseout(function(){
93               rolloverImage_out(this, option);
94               $activeING = $(".navi-image a.active:animated",option.elem);
95               if($activeING.length !=0 ) {
96                 $activeING.stop().css({opacity: 1.0});
97                 $(".navi-image a.last-active").each(function(){
98                   $(this).removeClass("last-active");
99                 });
100               }
101             });
102             
103             $(option.elem).mouseover(function(){
104               if(option.autoPlay) clearInterval(imageNavigationID);
105             }).mouseout(function(){
106               startInterval(option);
107             });
108             startInterval(option);
109             
110             if(option.rolloverImage){
111               $(".navi", option.elem).hover(function(){
112               },function(){
113                 $("a.active img.over", this).stop().css({opacity: 1.0});
114                 rolloverImage_chenge(option);
115               });
116             }
117}
118$(function(){
119	try{
120    $(".CMP_image-navigation").imageNavigation({
121      time:4000,
122      animationTime:1000,
123      rolloverTime: 0,
124      rolloutTime: 500
125    });
126	}catch(e){
127		
128	}
129  });
130})(jQuery);
131
132