https://coag.org/Scripts/App/photoviewer.js

1App.PhotoViewer = function(){
2	var lang = App.Localization.getLang();
3	
4	function showFilmstrip($img) {
5		var $div = $("<div>")
6	    	.appendTo(document.body)
7	    	.addClass("filmstrip-popup popup-preview")
8	    	.overlay({
9				load: true,
10				mask: {
11					color: '#000',
12					loadSpeed: 200,
13					opacity: 0.75
14				},
15				onClose: function(){
16					this.getOverlay().remove();
17				}
18			});
19		
20		$div.append($("<br>").addClass("clear"));	
21		
22		var $filmstrip = $img.closest(".filmstrip");
23		var $images = $(".filmstripitem[data-id]", $filmstrip);
24		var imgId = $img.attr("data-id");
25		
26		var html = '<div class="slider"><a class="prev"></a><div class="scrollable"><div class="items">';
27		html += "<div>";
28		html += '<img src="/full-file-image/{0}-{1}" />'.format(0, imgId);
29		html += "</div>";
30		$images.each(function(){
31			var dataId = $(this).attr("data-id");
32			if (dataId != imgId){
33				html += "<div>";
34				html += '<img src="/full-file-image/{0}-{1}" />'.format(0, dataId);
35				html += "</div>";
36			}
37		})
38		html += '</div></div><a class="next"></a><br class="clear" /></div>';
39        
40        var $slider = $(html);
41        $slider.appendTo($div);
42        
43        var $scrollable = $(".scrollable", $slider);
44        $scrollable.scrollable({
45        	circular: true,
46        	onSeek: function(){
47        		//alert(this.getIndex());
48        	}
49        });
50        var width_filmstrip = $('.filmstrip-popup .slider').width();
51        var position_filmstrip = 689-width_filmstrip;
52        var position_left_filmstrip = parseInt($('.filmstrip-popup .items').css('left'));
53
54        if (width_filmstrip < 620) {
55        	width_filmstrip = width_filmstrip - 49;
56        	$('.filmstrip-popup .scrollable').css({ width: width_filmstrip + 'px'})
57        	$('.filmstrip-popup .items div').css({ width: width_filmstrip + 'px' });
58        	position_filmstrip = position_left_filmstrip + position_filmstrip;
59        	$('.filmstrip-popup .items').css({ left: position_filmstrip });    	
60        }
61
62	}
63	
64	function showFullImg($img){
65		var $div = $("<div>")
66	    	.appendTo(document.body)
67	    	.addClass("fullimg-popup")
68	    	.overlay({
69				load: true,
70				//close: "null",
71				mask: {
72					color: '#000',
73					loadSpeed: 200,
74					opacity: 0.75
75				},
76				onClose: function(){
77					this.getOverlay().remove();
78				}
79			});
80		
81		var html = '<div  class="img-wrapper">';
82		html += '<img src="/full-file-image/{0}-{1}" />'.format($img.attr("data-hostid"), $img.attr("data-id"));
83		html += '</div>';
84		
85		$div.append(html);	
86	}
87	
88	return {
89		showFilmstrip: showFilmstrip,

90		showFullImg: showFullImg
91	}
92}();