In an earlier post I showed how we could add a map to the search results page of webdrawer. It's also possible to add an image carousel. With a carousel the user can cycle through the images included in the search results.

Notice the carousel in the top right corner of the search results

Adding in this feature was super easy. I've included the steps below.

To start, I opened the results list webdrawer template file (/Views/Shares/resultsList.cshtml) in Visual Studio. I then found where I had placed my map and then adjust it so that I had a carousel above it. The carousel is already defined within the bootstrap framework, something heavily used throughout the webdrawer product.

<td id="infoColumn">
	<table height=100%>
		<tr height=50%>
			<td>
				<h2>Images</h2>
				<div id="imageCarousel" class="carousel slide">
					<!-- Carousel items -->
					<div class="carousel-inner">
					</div>
					<!-- Carousel nav -->
					<a class="carousel-control left" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
					<a class="carousel-control right" href="#imageCarousel" data-slide="next">&rsaquo;</a>
				</div>
			</td>
		</tr>
		<tr height=10><td>&nbsp;</td></tr>
		<tr height=50%>
			<td><h2>Geolocations</h2><br><div id="mapDiv"></div></td>
		</tr>
	</table>
</td>

Below this I already had a bit of logic looping through the results so that markers can be added to the map, so I just needed to update that logic. I need to add in a conditional output of an "addCarousel" function call for each supported extension. This ends up just being 4 new lines of code, but I've included the lot below.

if (Model.Results.Count > 0)
{
	<script type="text/javascript">
 
	@foreach (TrimObject record in Model.Results)
	{
		var gpsloc = record.GetPropertyOrFieldString("RecordGpsLocation");
		if ( !String.IsNullOrWhiteSpace(gpsloc) )
		{
			@Html.Raw("addMarker('" + record.GetPropertyOrFieldString("RecordNumber") + "','" + gpsloc + "');");
		}
		
		var extension = record.GetPropertyOrFieldString("RecordExtension").ToLower();
		if ( !String.IsNullOrWhiteSpace(extension) && (extension.Equals("png")||extension.Equals("jpg")||extension.Equals("bmp")) ) {
			@Html.Raw("addCarousel('" + record.GetPropertyOrFieldString("Uri") + "','" + record.GetPropertyOrFieldString("RecordExtension") + "','" + gpsloc + "');");
		}
	}
	</script>
}

Lastly, I went back towards the top of my file and defined a new function named "addCarousel". This function should result in a new image being pushed into the carousel. I also need to create a variable to track how many items are in the carousel (this will be required to use indicators).

var carouselItems = 0;
function addCarousel(uri, ltlg) {
	if ( carouselItems == 0 ) {
		$('<div class="item active"><img class="d-block img-fluid" src="/o1/Record/'+uri+'/File/Document"></div>').appendTo('.carousel-inner');
	} else {
		$('<div class="item"><img class="d-block img-fluid" src="/o1/Record/'+uri+'/File/Document"></div>').appendTo('.carousel-inner');
	}
	carouselItems++;
}

You may want to import jquery v3. Webdrawer is using v1.what.ever.it.is. I did this right above the definition of the above script by using the tag below.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

So with like 30 lines of code we were able to add a cool image carousel to webdrawer. Nifty.