// Include this file at the end of section of the PHP file that shall use image enlargement. // // // // var g_strImageEnlargeIdList; // List of ID's to hidden Exif data for images that can be enlarged. var g_strImageEnlargeExifList; // Exif data about a selected image. var g_strImageEnlargeCurrentId = ''; // ID for the currently shown image's hidden field. var g_strImageEnlargeTestPath = ''; // Subfolder when testing. /*************************************************************************** ** bImageEnlargeShow ** ** Opens the popup viewport and displays the enlarged image. ** This is the entry point for enlarging images. ** ** Global: Yes. ** -> : strTestPath = Subfolder when testing, '' on production site. ** strImageScriptId = ID for the image (hidden field) that called bImageEnlargeShow(). ** <- : None. ** Return: False to abort normal link operation. ***************************************************************************/ function bImageEnlargeShow( strTestPath, strImageScriptId ) { var i; var bFirstItem; var bLastItem; var iScrollX; var iScrollY; var strPosition; if (strTestPath != '/testsajten') { g_strImageEnlargeTestPath = ''; } else { g_strImageEnlargeTestPath = strTestPath; } bImageEnlargeBuildIdList(); // Create a list of ID's for all images on the page that can be enlarged. // This is used when deciding to show prev/next buttons. // Find out where in the list this clicked image is placed. for (i = 0 ; i < g_strImageEnlargeIdList.length ; i++) { if (strImageScriptId == g_strImageEnlargeIdList[i]) { break; } } // Analyze the result. if (i >= g_strImageEnlargeIdList.length) // ID was not found. { bImageEnlargeClose(); return false; } if (i == 0) // ID was first in list. { bFirstItem = true; } else { bFirstItem = false; } if (i == (g_strImageEnlargeIdList.length - 1)) // ID was last in list. { bLastItem = true; } else { bLastItem = false; } // Find out windows current scroll position to place the popup viewport in the right spot. if (document.all) // This is only known by Internet Explorer. { // Select which method that is available to the browser. if (!document.documentElement.scrollLeft) { iScrollX = document.body.scrollLeft; // Pixels from left edge. } else { iScrollX = document.documentElement.scrollLeft; } if (!document.documentElement.scrollTop) { iScrollY = document.body.scrollTop; // Pixels from top edge. } else { iScrollY = document.documentElement.scrollTop; } } else // Other browsers than Internet Explorer. { iScrollX = window.pageXOffset; // Pixels from left edge. iScrollY = window.pageYOffset; // Pixels from top edge. } // Position popup viewport 6px from upper left corner of browser window. iScrollX += 6; iScrollY += 6; strPosition = iScrollX + 'px'; document.getElementById('css_image_enlarge_viewpos').style.left = strPosition; strPosition = iScrollY + 'px'; document.getElementById('css_image_enlarge_viewpos').style.top = strPosition; document.getElementById('css_image_enlarge_viewpos').style.display = 'block'; // Show popup. bImageEnlargeUpdate(strImageScriptId, bFirstItem, bLastItem); // Update popup viewport with the image that was clicked. return false; // Abort normal link operation. } /*************************************************************************** ** bImageEnlargeClose ** ** Closes the popup viewport. ** This is the exit point for enlarged images. ** ** Global: Yes. ** -> : None. ** <- : None. ** Return: False to abort normal link operation. ***************************************************************************/ function bImageEnlargeClose() { document.getElementById('css_image_enlarge_viewpos').style.display = 'none'; // Hide popup. // Restore to default sizes. document.getElementById('css_image_enlarge_frame').style.width = '724px'; // Same as in CSS file. document.getElementById('css_image_enlarge_viewport').style.width = '924px'; document.getElementById('sid_image_enlarge_image').src = g_strImageEnlargeTestPath + '/images/objects/dot_fill.gif'; document.getElementById('sid_image_enlarge_image').width = '1'; document.getElementById('sid_image_enlarge_image').height = '300'; // Same as in 'image_enlarge.inc'. // Clear globals. g_strImageEnlargeCurrentId = ''; g_strImageEnlargeTestPath = ''; g_strImageEnlargeIdList = new Array; g_strImageEnlargeExifList = new Array; return false; // Abort normal link operation. } /*************************************************************************** ** bImageEnlargePrev ** ** Switches to the enlarged image for the previous image in the list. ** ** Global: Yes. ** -> : None. ** <- : None. ** Return: False to abort normal link operation. ***************************************************************************/ function bImageEnlargePrev() { var i; var bFirstItem; var bLastItem; // Find out where in the list the current image is placed. for (i = 0 ; i < g_strImageEnlargeIdList.length ; i++) { if (g_strImageEnlargeCurrentId == g_strImageEnlargeIdList[i]) { break; } } // Analyze the result. if (i >= g_strImageEnlargeIdList.length) // ID was not found. { return false; } if (i == 0) // ID was first in list. { return false; // This should not happen since Update() hides the "previous" button. } else { i--; // Select the previous image. if (i == 0) // New image is first in list. { bFirstItem = true; } else { bFirstItem = false; } bLastItem = false; // There is always at least one more image. } bImageEnlargeUpdate(g_strImageEnlargeIdList[i], bFirstItem, bLastItem); // Update popup viewport with the previous image in the ID list. return false; // Abort normal link operation. } /*************************************************************************** ** bImageEnlargeNext ** ** Switches to the enlarged image for the next image in the list. ** ** Global: Yes. ** -> : None. ** <- : None. ** Return: False to abort normal link operation. ***************************************************************************/ function bImageEnlargeNext() { var i; var bFirstItem; var bLastItem; // Find out where in the list the current image is placed. for (i = 0 ; i < g_strImageEnlargeIdList.length ; i++) { if (g_strImageEnlargeCurrentId == g_strImageEnlargeIdList[i]) { break; } } // Analyze the result. if (i >= g_strImageEnlargeIdList.length) // ID was not found. { return false; } if (i == (g_strImageEnlargeIdList.length - 1)) // ID was last in list. { return false; // This should not happen since Update() hides the "next" button. } else { i++; // Select the next image. if (i == (g_strImageEnlargeIdList.length - 1)) // New image is last in list. { bLastItem = true; } else { bLastItem = false; } bFirstItem = false; // There is always at least one more image. } bImageEnlargeUpdate(g_strImageEnlargeIdList[i], bFirstItem, bLastItem); // Update popup viewport with the next image in the ID list. return false; // Abort normal link operation. } /*************************************************************************** ** bImageEnlargeUpdate ** ** Updates the popup viewport with the selected image. ** ** Global: Yes. ** -> : strImageScriptId = ID for the image (hidden field) that shall be shown. ** bFirstItem = TRUE if image is first in list. Don't show "previous" button. ** bLastItem = TRUE if image is last in list. Don't show "next" button. ** <- : None. ** Return: True. ***************************************************************************/ function bImageEnlargeUpdate( strImageScriptId, bFirstItem, bLastItem ) { var iFrameWidth; var strWidth; if (strImageScriptId == '') // Don't redraw if ID unknown. { return false; } g_strImageEnlargeCurrentId = strImageScriptId; // This will be the currently shown image. bImageEnlargeBuildExifList(strImageScriptId); // Extract all necessary data about the enlarged image. // Adjust size to new image. if (g_strImageEnlargeExifList[1] != '') // WDT (Image width) exist. { iFrameWidth = parseInt(g_strImageEnlargeExifList[1]) + 4; // Also make room for border. } else // Use default size. { iFrameWidth = 724; // Same as in CSS file. } strWidth = iFrameWidth + 'px'; document.getElementById('css_image_enlarge_frame').style.width = strWidth; // Frame width same as image width. iFrameWidth += (180 + 20); strWidth = iFrameWidth + 'px'; document.getElementById('css_image_enlarge_viewport').style.width = strWidth; // css_image_enlarge_menu.width + 20 + css_image_enlarge_frame.width // Decide which buttons should be available. if (bFirstItem == true) { document.getElementById('sid_image_enlarge_prev').style.display = 'none'; // Hide "previous" button since this is the first item. } else { document.getElementById('sid_image_enlarge_prev').style.display = 'block'; // Show "previous" button. } if (bLastItem == true) { document.getElementById('sid_image_enlarge_next').style.display = 'none'; // Hide "next" button since this is the last item. } else { document.getElementById('sid_image_enlarge_next').style.display = 'block'; //Show "next" button. } // Display image and text. if (g_strImageEnlargeExifList[7] != '') // Only if photographer known. { document.getElementById('sid_image_enlarge_copyright').firstChild.nodeValue = 'Copyright © ' + g_strImageEnlargeExifList[6]; document.getElementById('sid_image_enlarge_photographer').firstChild.nodeValue = g_strImageEnlargeExifList[7]; } else { document.getElementById('sid_image_enlarge_copyright').firstChild.nodeValue = ' '; document.getElementById('sid_image_enlarge_photographer').firstChild.nodeValue = ' '; } // Remove current image before loading next. Set size to match next image. document.getElementById('sid_image_enlarge_image').src = g_strImageEnlargeTestPath + '/images/objects/dot_fill.gif'; document.getElementById('sid_image_enlarge_image').width = g_strImageEnlargeExifList[1]; document.getElementById('sid_image_enlarge_image').height = g_strImageEnlargeExifList[2]; document.getElementById('sid_image_enlarge_image').src = g_strImageEnlargeExifList[0]; document.getElementById('sid_image_enlarge_eventdate').firstChild.nodeValue = g_strImageEnlargeExifList[3]; document.getElementById('sid_image_enlarge_event').firstChild.nodeValue = g_strImageEnlargeExifList[4]; document.getElementById('sid_image_enlarge_description').firstChild.nodeValue = g_strImageEnlargeExifList[5]; // document.getElementById('sid_image_enlarge_camera').firstChild.nodeValue = g_strImageEnlargeExifList[8]; // document.getElementById('sid_image_enlarge_focallength').firstChild.nodeValue = g_strImageEnlargeExifList[9]; // document.getElementById('sid_image_enlarge_aperture').firstChild.nodeValue = g_strImageEnlargeExifList[10]; // document.getElementById('sid_image_enlarge_shutter').firstChild.nodeValue = g_strImageEnlargeExifList[11]; // document.getElementById('sid_image_enlarge_iso').firstChild.nodeValue = g_strImageEnlargeExifList[12]; return true; } /*************************************************************************** ** bImageEnlargeBuildIdList ** ** Builds a list (string array) of all image ID's that can be enlarged. ** ** Global: Yes. ** -> : None. ** <- : None. ** Return: True. ***************************************************************************/ function bImageEnlargeBuildIdList() { // The hidden field 'sid_image_enlarge_idlist' in pagefoot contain ID's to all images on the page that can be enlarged. // Each ID is enclosed in '<>'. The ID "points" to a hidden field that contain Exif (and other) data about the image. var strIdList; var iCharPos; var iEndPos; var strId; var iArrayIndex; strIdList = document.getElementById('sid_image_enlarge_idlist').value; // Get the string of all ID's. g_strImageEnlargeIdList = new Array(); iCharPos = 0; // Start at the beginning of string. iArrayIndex = 0; while (iCharPos != -1) // Scan string for all ID's. { iCharPos = strIdList.indexOf('<', iCharPos); // Find start of ID. if (iCharPos != -1) { iEndPos = strIdList.indexOf('>', iCharPos + 1); // Find end of ID. if (iEndPos != -1) { strId = strIdList.substring(iCharPos + 1, iEndPos); // Cut out the ID. if (strId.substr(0,4) == 'sid_') { g_strImageEnlargeIdList[iArrayIndex] = strId; iArrayIndex++; } iCharPos = iEndPos + 1; // Start here next time. } else { iCharPos = iCharPos + 1; // Start here next time. } } } return true; } /*************************************************************************** ** bImageEnlargeBuildExifList ** ** Builds a list (string array) of all Exif (and other) data about an image enlargement. ** ** Global: Yes. ** -> : strImageScriptId = The ID of the hidden field where the data is stored. ** <- : None. ** Return: True. ***************************************************************************/ function bImageEnlargeBuildExifList( strImageScriptId ) { var strExifData; var strFile; if (strImageScriptId == '') // ID unknown. { g_strImageEnlargeExifList = new Array(13); return true; } strExifData = document.getElementById(strImageScriptId).value; // Get string with Exif data. g_strImageEnlargeExifList = new Array(); // Parameters that are not found will contain empty strings. strFile = strImageEnlargeSearchExifTag(strExifData, 'FNM'); // Filename incl. path. if (strFile.substr(0,7) != '/images') { g_strImageEnlargeExifList[0] = ''; // Image file must be in (sub) 'images' folder. } else { g_strImageEnlargeExifList[0] = strFile; } g_strImageEnlargeExifList[1] = strImageEnlargeSearchExifTag(strExifData, 'WDT'); // Width. g_strImageEnlargeExifList[2] = strImageEnlargeSearchExifTag(strExifData, 'HGT'); // Height. g_strImageEnlargeExifList[3] = strImageEnlargeSearchExifTag(strExifData, 'DTE'); // Date. g_strImageEnlargeExifList[4] = strImageEnlargeSearchExifTag(strExifData, 'EVN'); // Event. g_strImageEnlargeExifList[5] = strImageEnlargeSearchExifTag(strExifData, 'DSC'); // Description. g_strImageEnlargeExifList[6] = strImageEnlargeSearchExifTag(strExifData, 'CPR'); // Copyright year. g_strImageEnlargeExifList[7] = strImageEnlargeSearchExifTag(strExifData, 'PHR'); // Photographer. g_strImageEnlargeExifList[8] = strImageEnlargeSearchExifTag(strExifData, 'CAM'); // Camera. g_strImageEnlargeExifList[9] = strImageEnlargeSearchExifTag(strExifData, 'FLN'); // Focal length. g_strImageEnlargeExifList[10] = strImageEnlargeSearchExifTag(strExifData, 'APT'); // Aperture. g_strImageEnlargeExifList[11] = strImageEnlargeSearchExifTag(strExifData, 'SHT'); // Shutter. g_strImageEnlargeExifList[12] = strImageEnlargeSearchExifTag(strExifData, 'ISO'); // ISO. return true; } /*************************************************************************** ** strImageEnlargeSearchExifTag ** ** Extracts image data from a formatted string with Exif (and other) data. ** ** Global: None. ** -> : strExifData = Formatted string with Exif and other data. ** strTag = Tag to search for. ** <- : None. ** Return: Data according to tag. '' if tag was not found. ***************************************************************************/ function strImageEnlargeSearchExifTag( strExifData, strTag ) { var iStartPos; var iEndPos; iStartPos = strExifData.indexOf('<' + strTag + '=', 0); // Find start of tag. if (iStartPos != -1) { iEndPos = strExifData.indexOf('>', iStartPos + 1); // Find end of tag. if (iEndPos != -1) { return strExifData.substring(iStartPos + 5, iEndPos); // Cut out the data part. } } return ''; // Not found. }