This behavior will create a front pictures viewer on a web page which features navigation, image scale option and few effects. It takes only 13.5 Kb of javascript and is very easy to apply. it doesn't require to apply events on thumbnails just put your thumbnails inside a container which must have an ID, this can be any html tag, div, table or what else and must contain only the thumbnails relative to big pictures. Thumbnails can have the same name of the big pictures and located in a different folder or they may be suffixed as "_small" (ie: big as "myimage.jpg" and thumb as "myimage_small.jpg") then they can stay all in the same folder. You may set thumbnails in the container on the page in any way, dynamically or statically. Since the viewer features also caption the thumbs img tag must have the caption attribute (ie: <img src="..." width="..." height="..." caption="My favorite landscape" />), don't use alt or title attribute for this purpose just leave it for the thumbs. The caption box is dynamic it will be created only if a caption is found or is not empty.
Once you have set your thumbnails on the page select the <body> tag, since the behavior will rely on the onload event, and open the behavior, insert the exact name of the thumbnails container, then the folder where to find the big images and the other few parameters on the dialog. Note that you may apply the behavior also before creating the container with the thumbs, in any case if you forget any not usefull behavior on the page nothing will happen because it will check if something exists. You may apply the behavior multiple times and each container will be independent by each other. At the moment the container will be scanned only for images.
| Container Id: | Insert here the exact id of the thumbnails container. |
| Big Images Folder: | Define the folder where the big pictures are located. They may stay on the same thumbnails location if these are suffixed as "_small". You may use server code like php, asp or else to define dynamically the path (ie: "<?php echo $dir; ?>" or "images/<%=dir%>" etc.). This can be useful, for example, if you apply this behavior to albums created by the PHP X UPLOAD. |
| Display Type: | Three options "Simple", "Card" and "Framed", Card is the classic display with white border and shadow as seen already in other known viewers, Framed is an alternative where the picture stay inside a simple colored frame, and Simple is just a simple bordered display. |
| Card Border: | In case of Card display you can choose the border type, normal (flat), rounded or only drop shadow. |
| Frame Color: | In case of Framed display you may assign the color of the frame. Some background image can be used too (read below). |
| Navigation Effect: | Apply the effect to use when navigating the list of pictures. Note that clicking a thumb applies a different grow effect which is fixed. |
| Max Size Display: | You can choose the max percentage of the current window size, that is, the picture will always scale when you resize the browser in order to respect the chosen percentage to fit inside the window, if the actual picture size is less than the max chosen size it will display interelly, if the picture exceeds the max chosen size a small icon will appear for swapping to full size and back. |
| Obscure Page: | As seen in other viewer you may optionally obscure the rest of the page which will not make the mouse operate on the page except for the picture, otherwise the page is clear and the mouse can operate all over the page. In both cases you can scroll the page but the picture will remain fixed always on top. |
| Drag and Drop: | Check this box if you want to give the option to drag the big picture on the page. |
You may do few things to modify the appearance. Since it will be created a stylesheet you may edit few styles but not all. The main class which is named as the container id (.containerid) and contains the font style, the caption selector (.containerid #caption) containing font style for caption and the #fx_obsc selector for the obscure layer.
When chosen the framed display you may change the frame color directly from the dialog but you may use a background image editing the main class. You may change the caption box editing the caption selector styles but for the background refer to the #middle selector where you can use also a background image.
You may edit the obsc selector to change the obscure layer for the color and opacity.
You must not edit all the other styles, inside the stylesheet you find few comments.
by FELIXONE