Page 1 of 1

Colorbox Size Control for Large Hyperlink Images

Posted: Thu Sep 01, 2022 12:09 pm
by xgis

My colorbox images are displaying too large and a solution to the issue is written below.

In my case the 'original' images/photos are referenced from a folder and are not uploaded and resized using ASP.NET maker. As a result the size of a colorbox will grow to the size of the image.
Since I have hundreds of images to load and up to 13 images per row it is not viable to upload them individually.
In the same way a user needs the full size and resolution of the original image if they decide to download it and view it on their machine.

In my case the small images are 1920 high and 1440 wide (HD res). When clicked on in the browser the colorbox covers 4x the entire screen.
As a results only part of the image is visible and there is no screen to click on to close the image.
In the case of my large images they are 3264 x 2448 that become 8 x the size of the screen.
The images is too big for screen viewing and users often click back to close it as there is nowhere to click on the screen to close it. This results in being sent to the previous page.
Some users may click escape but generally do not know how to close the windows.

The current solution I have employed is using javascript to resize the colorbox in the global scripts.

The following code is pasted in the CODE 'Client Scripts > Global > Pages with Header/Footer > Startup Script' section
The result is colorbox stays inside the visible screen of which my monitor is displaying 1920 x 1080 (HD)
While there is some vacant white space to the left and right of the image it is not an issue.

/* Code sourced from Nathan Tsai */

$.colorbox.settings.onLoad = colorboxResize();

function colorboxResize(resize) {
var width = $(window).width() > 1200 ? 1200 : '90%';
var height = $(window).height() > 1000 ? 900: '85%';

$.colorbox.settings.height = height;
$.colorbox.settings.width = width;

//if window is resized while lightbox open
if(resize) {
'height': height,
'width': width