| Home | Pauline's Pages | Howto Articles | Uniquely NZ | Small Firms | Search |
|
Image Display Options |
How to Change the Display Options for Pictures
|
The normal mechanism is to use the links on the little control panel which is at the bottom right of all the pages which have Pictures. There is an example to the right. There is however very little space to put meaningful text and hover messages are not available on touch machines so this page gives some further guidance and background. Firstly the text is a Link so the text refers to What will Happen. If you click Use Lightbox for Images it will switch so all future images will display in a Lightbox and clicking Use Normal Bandwidth means you will switch to use more data and have Images preloaded and galleries activated. Clicking Minimise Bandwidth will switch you to a mode where Popup images are smaller and you avoid having images preloaded and galleries are not activated. Try it out either on the right or at the bottom of the page and see what happens with the test image to the left side and on those below. The pictures below are in two 'galleries'
More about Popup Windows
All the pictures on the pages provide details of where they were taken if you hover the cursor over them and they can all be clicked to open a larger version. Up until recently the only option was that they opened in a popup window. This works very well on Desktop or Laptop with a reasonable size screen and an operating system/browser supporting multiple windows. On such a system it is difficult to beat and I have used it extensively on my web site where there are over 6500 images using it and it has been tested on Windows, Linux and Apple machines in many different browsers including Internet Explorer, Firefox, Opera, Chrome and Safari. That is all the browsers with more than 2% market share.
The popup windows are reused and then closed up when you leave the page so you do not need to close them. You can chose the small size if you have a slow internet connection or want to restrict data flow on a mobile connection. You can also toggle the resolution by double-clicking an image but it may take an extra click to display the picture in the new size on some browsers. With some systems you may be asked to if you wish to allow popup windows as a protection against adverts. Popups are abused by many advertisers and most browsers offer preference settings, extensions or other ways ways to limit the abuse of popups. The same goes for various security suites. In general the default settings should not inhibit popups which follow all the rules properly although you may find that you are asked if will permit use of popups on my sites and it is safe and desirable to say yes.
More about the Lightbox Effect
Popup Windows do not work well on the modern Smart Phones and Tablets with small screens. Their browsers are based round a tabbed approach rather than implementing separate windows. This makes the popup window approach very clumsy as every popup is actually opened in a new tab and the reloading and automatic closing does not work well or at all. The alternative is an approach with has tended to be called Lightbox which is a technique used to display images and other web content overlayed over the screen with the surround dimmed out. This overlayed window can be closed by clicking outside of it or by a close button.
Ideally the image should display full size when there is space available and shrink to fit the space available. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar and was primarily for images. However, common usage of the term has evolved to encompass all Lightbox-style JavaScript plugins and such effects in general. The technique is now used very widely. The main disadvantage is that it blocks use of the main window whilst a popup can just be moved aside but still be visible. When changing mode the whole page has to be reloaded - this is automatic but in most browsers one is returned to the top. In most cases these options are set once and unchanged thereafter.
Bandwidth Considerations
|
|
Bandwidth and associated data usage is at a premium on Tablets and Smart Phones especially when using a mobile network connection with limited data and high charges. In addition there are still areas where broadband is not available or is at a low speed. The original Popup solution had two image sizes which one could switch between to reduce bandwidth or fit to the screen size. Both methods use small high compression images for the thumbnails (icons) on the page. These are 160x120 pixels and are typically 4.5 kbytes - even that adds up with 20 on a page.
The popup images of 600x450 pixels are typically 45 kbytes and the smaller images are 400x300 pixels and are typically 22 kbytes. In the case of the popup images the only change is in image size. The Lightbox pages however need a further change as most of the images are by default displayed as 'galleries' with back and forward arrows and the Lightbox software automatically preloads the previous and next image. This means looking at a single image triples the download from 45 to 135 kbytes. This gallery option is inhibited when in low bandwidth mode although the image size is not reduced in my current implementation. Try out the various options using the links in the area below and note that one does not get forward and back arrows in the Lightbox with reduced bandwidth mode. As mentioned above, there is also an option to double click an image in Popup mode to change size and bandwidth - this does not automatically reload in the new size but subsequent images are changed - this is deliberate to save bandwidth and avoid glitches.
What are there two icons in the same area and what do they do?
The spanner (an icon from the Oxygen Icon Project) opens this page so you probably already know about that. The other icon from W3C indicates that the page uses either the latest standard, HTML 5, or that it uses the older HTML 4.01 standard. The pages converted to HTML 5 offer better scaling on small screens. Now it is a W3c Recommendationand almost every browser has adequate HTML 5 support I have started to steadily convert pages but it is not trivial taking at least 15 minutes per page even when they are in a set. There are 225 pages in the travel series with 6500 images each in 3 sizes which gives an indication of the task. Fortunately all current browsers are very tolerant and arguably most of the errors flagged by the validation process are really warnings. The 'errors' currently on the HTML 4.01 pages will almost all go when converted to HTML 5 and if corrected will turn into errors at that time! If the pages are forced to validate with HTML 5 the errors are quite different and may cause problems in the long term so the pages do need proper conversion.| Home | Pauline's Pages | Howto Articles | Uniquely NZ | Small Firms | Search |
| Copyright © Peter and Pauline Curtis Most recent significant revision: 30th January, 2015 |
|