Structure of the component

PREV
NEXT

After you have inserted component into web page, in HTML code will be added tag <div id="JQImageScroller1" class="JQImageScroller">...</div>. This tag contains body of the scroller. The following example shows the simple HTML code of the HTML5 Image Scroller:

<div id="JQImageScroller1" class="JQImageScroller">
   <div class="thumbnails"></div>
   <div class="categories">
      <ul>
         <li>Living History</li>
         <li>Landscape</li>
         <li>Fusion</li>
      </ul>
   </div>
</div>

Tag <div class="categories"> is not an obligatory tag, it can be deleted, if you have only one category. Also you can interchange <div class="thumbnails"></div> and <div class="categories">...</div>, this will change the postion of categories bar and thumbmails bar. So if you have set first thumb div and then categories div in the code, so in the same way they will appear in your page.

XML structure

Content of the Image Scroller is situated in XML file (scroller.xml). The following example shows the basic structure of the scroller XML file:

<?xml version="1.0" encoding="utf-8"?>
<scroller> <category caption="Category 1"> <item> <image>scroller_files/slides/photo01.jpg</image>
<thumb>scroller_files/slides/photo01_thumb.jpg</thumb> <link>http://www.solutions4website.com</link> <target>_blank</target>
<thumbCaption><![CDATA[photo 1]]></thumbCaption>
<caption><![CDATA[Caption 1]]></caption>
<description><![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit.]]></description> </item> <item> <image>scroller_files/slides/photo02.jpg</image> <thumb>scroller_files/slides/photo02_thumb.jpg</thumb> <caption><![CDATA[Caption 2]]></caption> </item> </category> <category caption="Category 2"> <item> <image>scroller_files/slides/photo01.jpg</image>
<thumb>scroller_files/slides/photo01_thumb.jpg</thumb>
<thumbCaption><![CDATA[photo 1]]></thumbCaption>
<caption><![CDATA[Caption 1]]></caption> </item> </category> </scroller>

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

Subordinate to the <scroller> 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.
  • <link>; The URL from which to obtain the document.
  • <target>; Specifies the window or HTML frame into which the document should be loaded. You can enter the name of a specific window or select from the following reserved target names:
    • _self; specifies the current frame in the current window.
    • _blank; specifies a new window.
    • _parent; specifies the parent of the current frame.
    • _top; specifies the top-level frame in the current window.
  • <thumbCaption>; The caption under the thumbnail. You can use entity-encoded HTML in the caption. HTML text should be placed inside CDATA section.
  • <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>