Create bookmark thumbnails with FSI ThumbBar

This tutorial shows you how to create a bookmark thumbnail bar with FSI ThumbBar. When used in FSI Showcase (FSI ThumbBar in combination with FSI Viewer), each time the view or images changes, a new image will be added to the vertical bookmark thumbnail bar. With this, the customer can easily track all the products he has viewed, which is helpful if you are presenting a large amount of images. The bookmarks can easily be deleted by pressing the delete key.

View FSI Showcase Example

HTML Code

This is the HTML Code used in the sample:

Copy to Clipboard

<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:100%">
		<tr>
			<td align="center" style="height:90px;background-color:white;" >
				<h1 style="font-size:18px;margin:6px;">
					Adding images to ThumbBar	at runtime</h1>
				<i>• Select images and zoom and pan.<br/>
					 • Each time the view or images changes, a new image 
					 will be added to the vertical thumbnail bar.
					 <br/>• Press "delete" to remove all bookmark images.</i>
			</td>
			<td rowspan="2" style="width:10%;height:100%;overflow:hidden;background-color:#111;">

<fsi-thumbbar id="elThumbBarVert"
											vertical="true"
											elementWidth="115px"
											paddingTop="0"
											paddingBottom="0"
											alignment="false"
											autoElementSpacing="0"
											zoomMargin="120"
											placeHolderImage="none"
											style="width:100%; height:100%;"></fsi-thumbbar>
			</td>
		</tr>
		<tr>
			<td align="center" style="height:70%">
				<fsi-viewer width="100%" height="100%" id="myBookMarkViewer"
										skin="white"
										plugins="fullscreen"
										fullScreenElement="myFullScreenElement"
										onViewChanged="onFSIViewChanged">
				</fsi-viewer>
			</td>
		</tr>
		<tr>
			<td align="center" style="height:30%;" colspan="2">

<fsi-thumbbar id="elThumbBarHorz"
											viewerSelector="#myBookMarkViewer"
											dir="/images/samples/showcase/handbags/"
											elementWidth="10%"
											paddingTop="4"
											paddingBottom="4"
											autoElementSpacing="true"
											Alignment="1"
											placeHolderImage="none"
					style="width:100%; height:100%;"></fsi-thumbbar>

</td>
		</tr>
	</table>

</body>

We need to create two thumbbars, the one below the viewer (id=”elThumbBarHorz”) is the usual FSI ThumbBar which shows the objects and the vertical thumbbar (id=”elThumbBarVert”) is needed for displaying the bookmark thumbnails.

The vertical thumbbar will be empty at start, hence the dir parameter is not set.

The div around the viewer and thumbbars is defined with the id=”myFullScreenElement”, in order to ensure that all three parts are displayed in FullScreen mode. For this, the parameter fullScreenElement=”myFullScreenElement” needs to be set in the FSI Viewer tag.

JavaScript Part

This is how the script for realizing the bookmark thumbbar looks like:

Copy to Clipboard

// add key handler to remove all bookmarks
		$FSI.addEvent(window, "keyup", myKeyHandlerForThumbBar);

function myKeyHandlerForThumbBar(evt){

if (evt.keyCode === 46){
				var elBar = document.getElementById("elThumbBarVert");
				elBar.removeAllImages();
			}
		}

var nBookmarkCount = 1;
		function onFSIViewChanged(){

var elBar = document.getElementById("elThumbBarVert");

// get the current image url from the FSI Viewer instance
			var url = this.getVisibleImageURL();

var sourceImagePath = $FSI.utils.getParameterValueFromURL(url, "source");
			var imageEffects = $FSI.utils.getParameterValueFromURL(url, "effects");

if (sourceImagePath) {

// limit to max 50 bookmark thumbnails
				if (elBar.getImageCount() >= 50) elBar.removeImages(0);

// we could just add the "sourceImagePath" as string to FSI ThumbBar,
				// but we want to add a label and the image section currently viewed as well
				var oImage = {
					"src": sourceImagePath,
					"parameters": {
						"thumbLabel": "bookmark #" + (nBookmarkCount++),
						"initialView": "1,1," + this.getVisibleImageRect().toString()
					}
				};

// add the image effects as seen in the FSI Viewer instance (if any)
				if (imageEffects) oImage.parameters.effects = imageEffects;

// add the image to the thumbnail bar
				var ret = elBar.addImages([oImage]);

// scroll the vertical thumb bar to the image we just added
				elBar.focusImage(ret[0].nIndex);
			}
		}

View FSI Showcase Example

Create bookmark thumbnails with FSI ThumbBar

HTML Code

JavaScript Part

Cookies on this website allow us to:

Third-Party Cookies: