Bug Tracker

Ticket #6418: Code.txt

File Code.txt, 5.2 KB (added by abessa7, 12 years ago)

General Code

Line 
1<div class="uiImageSelector">
2                        <input name="LibraryImageIDX" type="hidden" value="" />
3                </div>
4       
5                <script type="text/javascript">
6                       
7                $(document).ready(function(){
8                        $('input[name="LibraryImageIDX"]').parents(".uiImageSelector").uiImageSelector(
9                                {
10                                        "Index"  : "",
11                                        "Source" : "",
12                                        "Name"   : ""
13                                },
14                                {
15                                        "Index"  : Array('85','86','87','88','21','89','46','91','92','62','44','23'),
16                                        "Source" : Array('http://www.varsityclub.biz/images/uploaded/85.jpg','http://www.varsityclub.biz/images/uploaded/86.jpg','http://www.varsityclub.biz/images/uploaded/87.jpg','http://www.varsityclub.biz/images/uploaded/88.jpg','http://www.varsityclub.biz/images/uploaded/21.jpg','http://www.varsityclub.biz/images/uploaded/89.jpg','http://www.varsityclub.biz/images/uploaded/46.jpg','http://www.varsityclub.biz/images/uploaded/91.jpg','http://www.varsityclub.biz/images/uploaded/92.jpg','http://www.varsityclub.biz/images/uploaded/62.jpg','http://www.varsityclub.biz/images/uploaded/44.jpg','http://www.varsityclub.biz/images/uploaded/23.png'),
17                                        "Name"   : Array('animal','band','gonzo','honey-dew','Jack N Coke','kermit','Old Men','rowlf','swedishchef','Team','Ted','Vodka Tonic')
18                                });
19                });
20               
21                </script>
22
23
24
25
26(function($){
27       
28        $.fn.uiImageSelector = function(Current,List) {
29                       
30                return this.each(function() {
31
32                        // Initial HTML
33                        $(this).append('<div class="current"></div><a href="" class="icon" /></a><div class="browser padding hide"><div class="browser border"><div class="browser controls"><a href="" class="page first"></a><a href="" class="page previous"></a><a href="" class="page last"></a><a href="" class="page next"></a></div><div class="browser toprow"></div><div style="clear:both;"></div><div class="browser bottomrow"></div><div style="clear:both;"></div></div></div><div style="clear:both;"></div>');
34                        $(this).find('a[href=""]').click(function(event){ event.preventDefault(); });
35                        var uiImageSelector = $(this);
36
37                        // Current Image
38                        var ImageCurrent = new Image();
39                        ImageCurrent.onload = function(){ $(uiImageSelector).find('.current').html('<img src="'+Current.Source+'" />'); }
40                        ImageCurrent.onerror = function(){ $(uiImageSelector).find('.current').html('<img src="http://www.webmecompany.com/images/ui/ImageSelectorNoImage.png" />'); }
41                        ImageCurrent.src = Current.Source;
42                       
43                        // Column and Row Settings
44                        Column = new Object();
45                        Row = new Object({
46                                Top    : { Index : Array(), Source : Array(), Name : Array() },
47                                Bottom : { Index : Array(), Source : Array(), Name : Array() }
48                        });
49                       
50                        Column.Total = Math.ceil((List.Index.length - 8) / 2);
51                        if(Column.Total < 0) { Column.Total = 0; }
52                        Column.Current = 0;
53                        for(i in List.Index) {
54                                if(List.Index[i] == Current.Index) {
55                                        Column.Current = Math.ceil(i / 2) - 1;
56                                        if(Column.Current > Column.Total) { Column.Current = Column.Total; }
57                                }
58                                if(i % 2 == 0) {
59                                        Row.Top.Index.push(List.Index[i]);
60                                        Row.Top.Source.push(List.Source[i]);
61                                        Row.Top.Name.push(List.Name[i]);
62                                } else {
63                                        Row.Bottom.Index.push(List.Index[i]);
64                                        Row.Bottom.Source.push(List.Source[i]);
65                                        Row.Bottom.Name.push(List.Name[i]);
66                                }
67                        }
68                        $('.uiImageSelector input').data({ Column : Column, Row : Row });
69
70                        // Browser Images
71                        for(i=Column.Current;i<=Column.Current+3;i++) {
72                                if(Row.Top.Index[i] != '') {
73                                        $('<div class="image"><img src="'+Row.Top.Source[i]+'" /></div>')
74                                                .data({ Index : Row.Top.Index[i], Source : Row.Top.Source[i], Name : Row.Top.Name[i] })
75                                                .appendTo($(uiImageSelector).find('.browser.toprow'))
76                                                .click(BrowserImage);
77                                        if(Row.Top.Index[i] == Current.Index) { $(uiImageSelector).find('.browser.toprow div:last').addClass('selected'); }
78                                }
79                                if(Row.Bottom.Index[i] != '') {
80                                        $('<div class="image"><img src="'+Row.Bottom.Source[i]+'" /></div>')
81                                                .data({ Index : Row.Bottom.Index[i], Source : Row.Bottom.Source[i], Name : Row.Bottom.Name[i] })
82                                                .appendTo($(uiImageSelector).find('.browser.bottomrow'))
83                                                .click(BrowserImage);
84                                        if(Row.Bottom.Index[i] == Current.Index) { $(uiImageSelector).find('.browser.bottomrow div:last').addClass('selected'); }
85                                }
86                        }
87                       
88                        // Events
89                        $(document).click(function(){ $(uiImageSelector).find('.browser.padding').addClass('hide'); });
90                        $(uiImageSelector).find('.browser.padding').click(function(event){ event.stopPropagation(); });
91                        $(uiImageSelector).find('.icon').click(function(event){
92                                event.stopPropagation();
93                                $(uiImageSelector).find('.browser.padding').removeClass('hide');
94                        });
95                       
96
97                        if(Column.Current == 0) { $(uiImageSelector).find('.page.first,.page.previous').addClass('disabled'); }
98                        if(Column.Current == Column.Total) { $(uiImageSelector).find('.page.last,.page.next').addClass('disabled'); }
99                       
100                       
101                       
102                });
103               
104                function BrowserImage(){
105                        var uiImageSelector = $(this).parents('.uiImageSelector');
106                        $(uiImageSelector).find('.image').removeClass('selected');
107                        $(this).addClass('selected');
108                        $(uiImageSelector).find('input').val($(this).data().Index);
109                        $(uiImageSelector).find('.current').html('<img src="'+$(this).data().Source+'" />');
110                        $(uiImageSelector).find('.browser.padding').addClass('hide');
111                }
112               
113               
114        }
115
116})(jQuery);