Gallery viewer IFrame text editing (Signature Galleries)

Signature template embedded page text setup

Signature gallery Allwebco templates include IFrame embedded text that you can edit. Each image includes an associated HTML webpage. Information on this page is for templates that include a "gallery_pages" folder. If your template does not include a "gallery_pages" folder, refer to the "help.html" included with your template for the correct support links.

Signature Responsive Gallery


Setup the text for each image
See the "help.html" included with your template download to setup the gallery images and text and title for each individual image.


How does the image viewer work?
The "image-viewer.htm" in templates with text for each image shows one image from the "gallery" folder and one matching page from the "gallery_pages" folder at the same time. This .htm page is inside an IFrame. The IFrame code is in the "image-viewer.htm". Css for colors, sizes and borders can be edited in your template .css file. See more IFrames details.


Pages in the gallery_pages folder
The pages in the "gallery_pages" folder each correspond to an image of the same name in the "gallery" folder. Example, "Fgallery3-5.jpg" in the gallery folder and "Fgallery3-5.htm" in the "gallery_pages" folder should be edited at the same time because they will both be showing in the "image-viewer.htm" at the same time.


What can I add to the pages in the gallery_pages folder?
The pages in the "gallery_pages" folder are normal HTML pages. You can add any item to these pages including text, links, images, purchase buttons, Paypal forms, audio, video, flash or any HTML web application. Edit these pages like any other HTML page.


Do not show text for each image option
Rather then edit text for each image by editing the pages in the "gallery_pages" folder, you can turn off or remove the IFrame that shows the text. Open the "image-viewer.htm", find the "var ImageText" and change that from a yes to a no, or remove the code between the "START" and "END IMAGE TEXT DISPLAY".


Make the text area larger
See the "The image-viewer.htm is not showing all the items I added:" section below.


Add a scrollbar in the text area
Open the "image-viewer.htm" for editing and search for "scrolling=". You can make that either "yes", "no" or "auto". In the template .css file there is a class ".gal-page-box" (or ".Gallery-Page-Frame") that is used to set the scrolling to "hidden", "visible", "scroll" or "auto" using the overflow property.

Css for responsive Signature templates (class .gal-page-box):

overflow-x: hidden !important;
overflow-y: auto !important;


Css for non-responsive Signature templates (class .Gallery-Page-Frame):

overflow: hidden;


Add a border around the text area
See the next section to add a border around the text in the "image-viewer.htm".


Different colors and fonts in the image viewer text area
To edit the text colors, sizes, background color, etc.. for the pages in the "gallery_pages" folder: Edit your .css file and find the "PICTURE VIEWER TEXT AREA CODE" note. Under this note will be some "classes". Usually 3 classes. These classes are for the pages in the "gallery_pages" folder only and can be modified.


Renaming images
You can name your images any names you would like. For example you can rename "Fgallery1-1.jpg" to "Bird-image.jpg". You will then edit this .jpg name in the "gallery1.htm" and you will create a "Bird-image.htm" in the "gallery_pages" folder. Do not use spaces in any image names and remember that hosting is case sensitive so all names you edit must match letter for letter.


Adding new gallery pages
For adding new gallery pages be sure you also add new pages for each new image in the "gallery_pages" folder with the exact same names. See the "ADDING GALLERIES" section on your template help.html.


The image-viewer.htm is not showing all the items I added
If you edited an Fgallery page, for example the "Fgallery1-1.htm" and all the text is not showing when viewed from the gallery, edit your .css file and find the "PICTURE VIEWER TEXT AREA CODE" note. Under this note will be some "classes". Usually 3 classes. The ".ImageFrame" class is the height and width of the "image-viewer.htm" text area. You can also turn on the border in this class by making the "0px" a "1px".

Responsive Note: To stay more mobile compliant it is recommended that you NOT increase the viewer IFrame code height and width and instead allow it to scroll if all the text is not visible.


A scrollbar is showing in the viewer text area
You can optionally enlarge the viewer text area. See the "The image-viewer.htm is not showing all the items I added" above.


Can I add text in the slideshow.htm for each image
No. This requires additional Javascript code. To keep the editing simple in the template design this code was not created and is not available. A 3rd party script could optionally be added.