You can scroll forwards or backwards through the images by using links, buttons, or the image method. If using links or buttons simply include onclick="direction(0)" to go back and onclick="direction(1)" to go forwards within the respective tags.
The image method automatically shows the previous and next images as thumbnails. These image tags also contain the relevant onclick event but must also include the correct ID, previous and next. The script automatically checks to see if the image method is being used by referencing both these IDs.
<img id="previous" src="" style="width:75px;height:55px" onclick="direction(0)">
<img id="next" src="" style="width:75px;height:55px" onclick="direction(1)">
My example is using the image method.
The display box for the text is dynamically created whenever there is text to be shown.
The border around the image can be changed with variable displayBorderWidth this border is also be applied to the text box when generated. The border colour is set at variable displayBorderColor.
You can create a default css style rule to apply to all the text displays, this style rule must be called defaultstyle
Example:
.defaultstyle{
color:#008000;
background-color:#ddeedd;
border:2px solid #bbccbb;
}
To set up the gallery you need to enter your image and any accompanying text into the array
If you are only showing an image the relevant index requires 2 entry
["bigpic.jpg","Alt text"]
If you are showing an image and text the relevant index requires 3 entries
["bigpic.jpg","Alt text","Image text"]
You can also create additional style rules and apply them to one or more text displays, overriding the default style rule.
With the exception of the default style your custom style rule names can be any of your choosing.
If you are going to apply a custom style rule the relevant index requires 4 entries
["bigpic.jpg","Alt text","Image text","yourstylerulename"]
The overall width of the display is determined by the width of the current image, the height is determined by the height of the current image plus any text that is shown.
The size that the larger image is shown at can be adjusted with variable imageSize this is a percent value set at 100 by default.
The value of imageSize will be applied to all the larger images widths and heights
With variable centerImage set to 1 the display is initially shown in the center of the window, if required you can use the variables offsetX and offsetY to offset the final position of the display.
To manually position the display change the variable centerImage to zero and use the left and top positions within the imgholder div