Structure of the component

PREV
NEXT

After you have inserted component into web page, in HTML code will be added tag <div id="JQSlideGallery1" class="JQSlideGallery">...</div>. This tag contains body of the gallery. The following example shows the simple HTML code of the HTML5 Slide Gallery:

<div id="JQSlideGallery1" class="JQSlideGallery sg_horizontal sg_align_top">
<div class="sg_categories sg_shadow"></div>
<div class="sg_gallery"></div>
<div class="sg_thumbnails sg_shadow"></div>
</div>

Tag <div class="categories"> is not an obligatory tag, it can be deleted, if you have only one categroy.

XML structure

Content of the Slide Gallery is situated in XML file (gallery.xml). The following example shows the basic structure of the gallery XML file:

<?xml version="1.0" encoding="utf-8"?>
<gallery>
<category caption="Category 1">
<item>
<image>gallery_files/slides/photo01.jpg</image>
<thumb>gallery_files/slides/photo01_thumb.jpg</thumb>
<caption><![CDATA[Caption 1]]></caption>
<description><![CDATA[Description 1]]></description>
</item>
<item>
<image>gallery_files/slides/photo02.jpg</image>
<thumb>gallery_files/slides/photo02_thumb.jpg</thumb>
<caption><![CDATA[Caption 2]]></caption>
<description><![CDATA[Description 2]]></description>
</item>
<item>
<image>gallery_files/slides/photo03.jpg</image>
<thumb>gallery_files/slides/photo03_thumb.jpg</thumb>
<caption><![CDATA[Caption 3]]></caption>
<description><![CDATA[Description 3]]></description>
</item>
<item>
<image>gallery_files/slides/photo04.jpg</image>
<thumb>gallery_files/slides/photo04_thumb.jpg</thumb>
<caption><![CDATA[Caption 4]]></caption>
<description><![CDATA[Description 4]]></description>
</item>
<item>
<image>gallery_files/slides/photo05.jpg</image>
<thumb>gallery_files/slides/photo05_thumb.jpg</thumb>
<caption><![CDATA[Caption 5]]></caption>
<description><![CDATA[Description 5]]></description>
</item>
</category>
</gallery>

At the top level, an XML document is a <gallery> element.

Subordinate to the <gallery> element is a <category> element. Category may contain any number of <item>s. Element <item> is an obligatory tag, the rest elements of an item are optional.

  • <image>; Is the URL of a GIF, JPEG or PNG image that represents the slide.
  • <thumb>; Is the URL of a GIF, JPEG or PNG image that represents the thumb.
  • <caption>; The caption under the slide. You can use entity-encoded HTML in the caption. HTML text should be placed inside CDATA section.
  • <description>; The item synopsis. You can use entity-encoded HTML in the description. HTML text should be placed inside CDATA section. A CDATA section starts with the following sequence: <![CDATA[ and ends with the first occurrence of the sequence: ]]> All characters enclosed between these two sequences are interpreted as characters, not markup or entity references.
    Exmaple 1, Encoding HTML within a CDATA Section:
    <description><![CDATA[this is <b>bold</b>]]></description>