After uploading the product images using the DNM Image control create a new form in your application.
Step 1: From the Form properties set the Form Editor property to ‘Text/Html Provider’.
Step 2: Click on the Templates tab and select HTML which is found at the bottom of the page.
Step 3: Add 3 new div and a DNMJAVASCRIPT control. In the div ImagesNames enter the image name and extension (Example:Tulips.jpg) and separate each image with a ‘,’. Note: This will be used later on to split the images names using the ‘,’.
Step 4: Save the template by clicking on the Save Template button found at the bottom of the page.
Step 5: To edit the JavaScript file click on the Properties tab and then click on the js_Script control.
Step 6: At the top of the file write the following code:
“var stringImages = document.getElementById('ImagesNames').innerHTML;
var splitImages = stringImages.split(',');
var ftpUrl = 'Portals/0/Images/';
var LargeImage = document.createElement('LargeImage');
var SmallImages = document.createElement('SmallImages');”
- The var stringImages will include the images’ names found in the div ImagesNames.
- The var splitImages will include an array of strings with all the images’ names after splitting the stringImages using the ‘,’.
- The var ftpUrl will include the path where the product images have been uploaded (I uploaded the images in the ‘Images/’ folder from the image upload control).
- Var LargeImage and SmallImages will be used later on to append the images to them, after appending all the required images they will be appended to their respective divs.
Step 7: Create a new function LoadMainImage(). This function will create a new image control and set the properties for the image. This image will then be added to the var LargeImage defined at the beginning of the javascript file.
“function LoadMainImage()
{
//create the main image
var mainImgName = splitImages[0];
var MainImage = new Image();
var fullFtpUrl = ftpUrl + mainImgName;
MainImage.height = 200;
MainImage.width = 300;
MainImage.id = 'MainImageId';
MainImage.src = fullFtpUrl;
LargeImage.appendChild(MainImage);
}”
Step 8: Create a new function LoadThumbnailImages(), which will create a new image control for the number of images found in the var splitImages. The thumbnail images have an onclick JavaScript event; this event will call the ChangeImage function to change the MainImageId source to the one of the clicked image.
“function LoadThumbnailImages()
{
//create the thumbnail images
for(var i = 0; i < splitImages.length; i++)
{
var SmallImg = document.createElement('SmallImg');
index = i + 1;
var imageName = splitImages[i];
var imgId = "Image"+index;
var fullImgUrl = ftpUrl + imageName;
var jsEvent = 'ChangeImage('+index+')';
var thumbImage = new Image();
thumbImage.id = imgId;
thumbImage.height = 75;
thumbImage.width = 75;
thumbImage.onclick= new Function(jsEvent);
thumbImage.src = fullImgUrl;
SmallImg.appendChild(thumbImage);
SmallImages.appendChild(SmallImg);
}
}”
Step 9: Create another function AddImagesToDocument(). This function is used not to display the div where the images names were entered and append the var LargeImage and SmallImages to the divs LargeImage and SmallImages respectively.
“function AddImagesToDocument()
{
document.getElementById('ImagesNames').style.display= 'none';
document.getElementById('LargeImage').appendChild(LargeImage);
document.getElementById('SmallImages').appendChild(SmallImages);
}”
Step 10: It is important to split the code in several functions to obtain a more maintainable code. In this step create a function LoadGalleryImages() which will call all the above functions.
“function LoadGalleryImages()
{
LoadMainImage();
LoadThumbnailImages();
AddImagesToDocument();
}”
Step 11: Till now we have only loaded the main and thumbnail images, in this step we will create the ChangeImage(imageNumber) function. Whenever a user clicks on a thumbnail image this function is called and the thumbnail number is passed as a parameter and then the main image source will be replaced with the clicked image source.
“function ChangeImage(imageNumber)
{
var imgId = "Image" + imageNumber;
document.getElementById('MainImageId').src=document.getElementById(imgId).src
return
}”
Step 12: After creating all the above functions, at the bottom of the JavaScript file write the following code: “dnm_connectOnLoad(LoadGalleryImages); “. This code is used to call the LoadGalleryImages() function on form load.
Step 13: To make the gallery more attractive style it using css. The final product should look something like this…
