gallery.html 7.47 KB
Newer Older
1
2
<br />
<br />
3

4
5
6
7
<article id="gallery" class="section-wrapper clearfix"  data-custom-background-img="images/background/bg8.jpg">
	<div class="content-wrapper clearfix wow fadeInDown content-wrapper-top" data-wow-delay="0.6s">
	<!-- <div class="content-wrapper clearfix" style="position: relative;"> -->
	<!--  style="height:600px-->
8
	<div class="container-fluid col-sm-11 pull-right" id="selection" style="z-index: 1000;" >
9
	<section class="galllerySelector">
10
				
11
<h2 class="section-title">Select by</h2>
12
13
<p class="fontspacecss">This section allows you to browse the full collection of the museum. Make a selection bases on country and/or soil type (in WRB classification: 'Soil reference Group)'.
				</br>Click on the image to get a high resolution image of the soil monolith or </br>click on the soil number and name (below the image) to access the soil and site information.</p>				
14
				<label id='dropdown'>country : </label>
15
				 <span><select id="countrydropdownlist" label="country">country selection</select></span>
16
17
				&nbsp;&nbsp;
				<label id='dropdown'>classification : </label>
18
				<span><select id="classificationdropdownlist">classification selection</select></span>
19
				&nbsp;&nbsp;
20
				<button id="btnLoadGallery">&nbsp;&nbsp;Load&nbsp;&nbsp;</button>
21
22
23
		<!-- 		<div id="divResult" class="owl-carousel owl-theme  owl-loaded">	</div> -->
				
				 <div id="galleryStatus">Select country and<span style="font-family:Verbana">&nbsp;&#47;&nbsp;</span>or classification and press 'Load'</div>
24
 				<div id="divResult" class="owl-carousel owl-theme owl-loaded" ></div>
25
26
27
28
29
					 			<br />

				</section>
				</div>
			</div>
30
31
32
33
<br />
<br />
<br />
<br />
34
</article>
35
<script>
36
37
38
//MUSEUM_DATA_URL ="data.php" --> for final release and production
MUSEUM_DATA_URL="http://prod.museum2.isric.org/data.php?action=get_countrylist"

39
40
41
42
43
44
45
EXTRA_DATA_REST_URL="http://rest.museum2.isric.org/monoliths/40_400/png/?extra";
//var owl; //lets make it global

function proxyPopulateAndOpenModal(event,modal_content_id,$filename, $classification){
		var win = window.open($filename, '_blank');
		  win.focus();
};
46
47
48
49
50




//
51
52
53
54
55
56
57
58
function getOwl(){
		//create or recicle owl
		
		// if no owl we need to create it and return 
		if (!window.owl){
			owl = $('#divResult');
			owl.owlCarousel({
				 lazyLoad : true,
59
60
				 responsiveRefreshRate:1000,
				 paginationNumbers: true,
61
62
63
64
				  items : 7, //8 items above 1000px browser width
				  itemsDesktop : [1000,5], //5 items between 1000px and 901px
				  itemsDesktopSmall : [900,3], // betweem 900px and 601px
				  itemsTablet: [600,2], //2 items between 600 and 0
65
				  navigation : true
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
				 
				  });
		} else {
			owl.data('owlCarousel').destroy();
			//other trash
			$("#divResult").children().remove()
			owl = $('#divResult');
			owl.owlCarousel({
				paginationNumbers: true,
				responsiveRefreshRate:1000,
				lazyLoad:true,
				  items : 7, //8 items above 1000px browser width
				  itemsDesktop : [1000,5], //5 items between 1000px and 901px
				  itemsDesktopSmall : [900,3], // betweem 900px and 601px
				  itemsTablet: [600,2], //2 items between 600 and 0
				      navigation : true
				 
				  });
			
		}
		return owl	
		
	};
	(function(){  
90
91
92
	     if (window.self != window.top) {
    $(document.body).addClass("in-iframe");
  }
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
		/* GALLERY JAVASCRIPT LOAD CONTENTS */ 
			jQuery.ajax({
				type:"GET",
				url:MUSEUM_DATA_URL,
				dataType:'json',
				data:{ action:'get_countrylist'},
				success: function(data) {
				   	$("#countrydropdownlist").append($("<option> </option>").val('0').html('all'));
					$.each(data, function(key, value) {
							 $("#countrydropdownlist").append($("<option> </option>").val(this['country_id']).html(this['en']));
					});

				}
			});
		jQuery.ajax({
			type:"GET",
			url:MUSEUM_DATA_URL,
			dataType:'json',
			data:{ action:'get_classificationlist'},
			fail: function(){alert("failure class")},
			success: function(data) {
				$("#classificationdropdownlist").append($("<option> </option>").val('0').html('all'));
				$.each(data, function(key, value) {
116
117
118
				var $value=this.reference_soil_group;
					var option = $("<option>").text(this.reference_soil_group).val($value).attr('title',this.description);
					//$("<option>").attr('title','test');
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
					$("#classificationdropdownlist").append(option);
				});		  
			}
		});
		/* Clean status */
		$("#countrydropdownlist,#classificationdropdownlist").on('focus',function(){
			$("#galleryStatus").fadeOut(500,function(){$(this).html("&nbsp;&nbsp;").fadeIn(0)})})

			
		/* Adding data to selector */
		$("#btnLoadGallery").on('click',function()
				{ 
				
				    var $hasvalue=false;
				
					var $country=$('#countrydropdownlist option:selected').val()
					var $classification=$('#classificationdropdownlist option:selected').val()
				
					$selection=false;
					//$selectstring="http://rest.museum2.isric.org/monoliths/40_400/png/?extra";
					$selectstring=EXTRA_DATA_REST_URL;
					
					if ($country!='0')
						{
							$selectstring=$selectstring + "&country=" + $country;
							$selection=true;
						}
					if($classification!='0')
						{
								$selectstring=$selectstring + "&classification=" + $classification;
								$selection=true;
						} 
					
					$.getJSON( $selectstring, function( result ) 
						{
						$table_content='';
							if (result.length)
							{					
								
								owl=getOwl() //create, delete etc
								$("#galleryStatus").text("Found {} results".format(result.length))
							
								
								//trick to prevent blocking browser
							
								//Interresting
								//http://mess.genezys.net/jquery/jquery.async.php
								
							  
								jQuery.eachAsync(result,{
169
									delay: 20,
170
171
172
173
174
175
176
177
							        bulk: 0,
							        loop: function(i, field)
							        {
							        	
							        	//value is each item from array
							        	$table_content='';							
										$hasvalue=true;
											$filenamefield=field["filename"];
178
179
											//decided to select only on latest classification so classification means latest wrb classification $titelclassification=field["latest_classification"];
											//$titelclassification=field["classification"];
180
181
182
											$classification=field["classification"];
											$code=field["filename"].slice(0,2) + field["filename"].slice(3,6);
											$filenameWDef=$filenamefield.slice(0,10)
183
											$fileCodeISIS=field["filename"].slice(0,2).toLowerCase() + field["filename"].slice(3,6) + "#block-system-main"
184
											
185
							
186
											$table_content="<div class='item'> <a class='btn btn-outline-inverse btn-monolith btn-monolith-sm' href='http://www.rest.museum2.isric.org/monoliths/10per/png/{}.10per.png' target='_blank'><img alt='{}' title='{}'class='lazyOwl' src='http://www.rest.museum2.isric.org/monoliths/40_400/png/{}'></a></br><div class='btn btn-outline-inverse btnpopup btn-sm btn-popup' onClick='proxyPopulateAndOpenModal(event,\"modal-galeryISISDescription\",\"http://isis.isric.org/monoliths/reference-soil-{}\",\"{}\");' >{}:<br>{}<br>(more..)</div></div>".format($filenameWDef,$code,$code,$filenamefield, $fileCodeISIS,$classification,$code,$classification) 
187
188
189
190
191
192
193
194
195

											owl.data('owlCarousel').addItem($table_content);
											 
							        },
							        end: function()
							        {
							        	//console.timeEnd("async");
							        }

196
								})				 
197
198
199
200
							}
							else //No information 
							{
								//This neede a MVVCW approacvh No results for this selection 
201
202
203
								 $("#galleryStatus").text("No results for this selection")
								 //Remove the content
								 owl=getOwl()
204
205
206
207
							}	
						});	
				}); 	
		})();
208
</script>