https://www.rosi.ru/js/catalog_images.js

1jQuery.fn.Catalog_Images = function(options){
2  var options = jQuery.extend({
3   color_Height: 20,
4   color_Width:  20,
5   color_list: ["#087EDF"/*ãîë*/, "#354F9B"/*ñèí*/, "#BF2646"/*êðàñ*/, "#03A75D"/*çåë*/, "#EDC407"/*æåëò*/, "#DCDDE7"/*ìðàìîðí*/, "#EE7C0B"/*îðàíæ*/, "#672294"/*ôèîëåò*/, "#FFFFFF"/*áåëûé*/],
6   color_title:["ãîëóáîé"/*ãîë*/, "ñèíèé"/*ñèí*/, "êðàñíûé"/*êðàñ*/, "çåë¸íûé"/*çåë*/, "æ¸ëòûé"/*æåëò*/, "ìðàìîðíûé"/*ìðàìîðí*/, "îðàíæåâûé"/*îðàíæ*/, "ôèîëåòîâûé"/*ôèîëåò*/, "áåëûé"/*áåëûé*/],
7   images_list: ["", "", "", "", "", "", "", "", ""],
8   default_index: 0,
9   images_href: "/",
10   stand_name: "",
11   stand_code: "",
12   stand_cost: "",
13   item_br: "<br />",
14   hv_menu: 0 /*0 = horizontal*/
15   },options);
16/*
17êð   191  38  70		=	#BF2646
18æåë  237   196   7		=	#EDC407
19çåë  3   167   93		=	#03A75D
20ñèí  53  79  155		=	#354F9B
21ãîë   8   126  223		=	#087EDF
22ôèîë  103   34   148	=	#672294
23îðàíæ  238   124  11	=	#EE7C0B
24ìðàìîð  220  221  231	=	#DCDDE7
25*/
26   return this.each(function(event) {
27       var isIE = true; /*Ïðîâåðêà íà msIE*/
28       isIE = jQuery.browser.msie;
29       var Block_class = "catalog_images-image";
30       var Menu_class  = "catalog_images-menu";
31       var Menu_item_class = "catalog_images-menu_item";
32       var Menu_help = "<p style=\"text-align:center;\"><b><span style=\"border-bottom: 1px dotted #666; cursor: help;

32\" title=\"Íàæìèòå íà êâàäðàòèê ñ èíòåðåñóþùèì âàñ öâåòîì\">Âûáåðèòå (íàæìèòå)</span> öâåò ñòåíäà</b></p>";
33       var S = "td";
34       var T = this;
35      jQuery(T).html("<center><div class=\""+Block_class+"\"></div>"+options.item_br+Menu_help+"<table align=\"center\" border=\"0\"><tbody><tr align=\"center\" class=\""+Menu_class+"\"></tr></tbody></table></center>");
36       var Block = jQuery(T).children("center").children("."+Block_class);
37       var Menu  = jQuery(T).children("center").children("table").children("tbody").children("."+Menu_class);
38       var span_style = "width:"+options.color_Width+"px; height="+options.color_Height+"px; line-height: "+options.color_Height+"px; ";
39
40       jQuery(T).css("position","relative");
41
42       /*Ñäåëàòü ïðîâåðêó íà ðàâíîå êîë-âî ýëåìåíòîâ öâåòîâ è êàðòèíîê*/
43
44       Block.css({"display":"block"});
45       Menu.css({"margin":"0 auto"}).addClass("no_selection");
46       if(options.item_br == "") Menu.css({"float":"left", "position":"absolute","top":"0","right":"0"});
47
48
49       jQuery.each(options.images_list, function(i){
50           AddImage(i);
51           AddMenuItem(i);
52       });
53       var Menu_item  = Menu.children(S);
54       var Image_item = Block.children("div");
55
56       /*onStartup ++*/
57       jQuery(Image_item[options.default_index]).show();
58       jQuery(Menu.children(S)[options.default_index]).addClass(Menu_item_class+"-active");
59       jQuery(T).append("<br />");
60       /*onStartup --*/
61       Menu_item.click(function(){
62         Menu_item.removeClass(Menu_item_class+"-active");
63         jQuery(this).addClass(Menu_item_class+"-active");
64         N = jQuery(this).attr("n");
65         Image_item.hide();
66         jQuery(Image_item[N]).show();
67       });
68
69       Menu_item.hover(function(){
70         jQuery(this).switchClass(Menu_item_class, Menu_item_class+"-hover",0);
71       },function(){
72         jQuery(this).switchClass(Menu_item_class+"-hover",Menu_item_class,0);
73       });
74
75
76       function AddImage(i){
77         Block.append("<div><img src=\""+options.images_href+options.images_list[i]+"\" /><p>"+options.stand_name+"<br />Êîä: "+options.stand_code+" ("+options.color_title[i]+")<br />Öåíà: "+options.stand_cost+"</p></div>");
78         Block.children("div:last").hide();
79       }
80       function AddMenuItem(i){
81         hv = (options.hv_menu == 0 )? "" : "<br />";
82         Menu.append("<"+S+" n=\""+i+"\" style=\""+span_style+" background-color: "+options.color_list[i]+"; \" class=\""+Menu_item_class+"\" title=\""+options.color_title[i]+"\">&nbsp;</"+S+">"+hv);
83       }
84   });
85   };