[dcbradle]

I'm developing a website in classic asp and have been looking for an image thumbnail gallery scroller/carousel that is on a never-ending loop. Also that it will show its relevant div layer of whatever is in position 1 will above it. It does not matter whether the image thumbnail gallery/carousel has left and right arrows at each end of it (despite what it says in the mockup. Also please note that the div layers do not have the same structure, some have text and graphics, some just have a graphic covering the whole area.

I have included a simple mockup that, hopefully, makes everything clear.

Thanks

[Astalor]

Hello there! Below you will find a small and very rough mock-up of what I think you are trying to achieve.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
	var items = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg');
	var slots = new Array(0, 1, 2);
	
	function generateThumbsList()
	{
		$('#output').append(' - Slot0: ' + slots[0]);
		$('#output').append(' - Slot1: ' + slots[1]);
		$('#output').append(' - Slot2: ' + slots[2] + '<br/>');
		
		var currentIndex = 0;
		while (currentIndex < slots.length)
		{
			if (currentIndex == 0)
				$('#main').css('background-image', 'url(\'' + items[slots[currentIndex]] + '\')');
				
			$('#sub_item_' + currentIndex).css('background-image', 'url(\'' + items[slots[currentIndex]] + '\')');
			currentIndex++;
		}
	}
	
	function scrollRight()
	{
		var newSlot0 = 0;
		var newSlot1 = 0;
		var newSlot2 = 0;
		
		newSlot2 = slots[1];
		newSlot1 = slots[0];
		
		if (slots[0] > 0)
			newSlot0 = slots[0] - 1;
		else
			newSlot0 = items.length - 1;
		
		slots[0] = newSlot0;
		slots[1] = newSlot1;
		slots[2] = newSlot2;
		
		generateThumbsList();
	}
	
	function scrollLeft()
	{
		var newSlot0 = 0;
		var newSlot1 = 0;
		var newSlot2 = 0;
		
		newSlot0 = slots[1];
		newSlot1 = slots[2];
		
		if (slots[2] < items.length - 1)
			newSlot2 = slots[2] + 1;
		else
			newSlot2 = 0;
	
		slots[0] = newSlot0;
		slots[1] = newSlot1;
		slots[2] = newSlot2;
		
		generateThumbsList();
	}
	
	$(document).ready(function()
	{
		generateThumbsList();
		
		$('#sub_item_0').click(function()
		{
			scrollLeft();
		});
		
		$('#sub_item_2').click(function()
		{
			scrollRight();
		});
	});
</script>

<style>
	#slideshow
	{
		width: 700px;
		height: 400px;
		border: 1px solid black;
		padding: 5px;
	}
	
	#slideshow table
	{
		width: 100%;
		height: 100%;
		border-spacing: 5px;
	}
	
	#slideshow table #main
	{
		background-color: black;
		height: 60%;
	}
	
	#slideshow table .sub_item
	{
		background-color: grey;
		height: 50%;
	}
</style>

<div id="slideshow">
	<table>
		<tr>
			<td colspan="3" id="main"></td>
		</tr>
		<tr>
			<td id="sub_item_0" class="sub_item"></td>
			<td id="sub_item_1" class="sub_item"></td>
			<td id="sub_item_2" class="sub_item"></td>
		</tr>
	</table>
</div>
<div id="output"></div>

The above example will scroll when you click the left or right thumbnail, the top section displays whatever is in the first cell.

Obviously, as I said earlier, this is a very rough example. The code is not fully optimized nor efficient and there are some things you requested missing however these can easily be added. This is more of a guideline/reference for you to create a more suited application than an actual implementation.

Using jQuery you would easily be able make the cells slide and function on mouse over rather than just clicking and all manner of other shiny things!