UI Access

PREV
NEXT

Access this extension through HTML5 Image Scroller button on the FD24 category of the Insert Panel (Window > Insert). It is also accessible by selecting Insert > Solutions4Website > HTML5 Image Scroller.

Inserting object

Open Dreamweaver, open document in which you want to place scroller. Image Scroller can be inserted in page through the menu option "Insert -> Solutions4Website -> HTML5 Image Scroller" or the Insert Bar. After you choose "HTML5 Image Scroller" you will see a dialog window where you have to define the destination folder. There (in this folder) will be created folder 'scroller_files' and inside this folder will be placed files: jquery.image_scroller.js, image_scroller.css, scroller.xml and images. Links to files jquery.image_scroller.js and image_scroller.css will be automatically added into tag <head>:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="scroller_files/jquery.image_scroller.min.js"></script> <link rel="stylesheet" type="text/css" href="scroller_files/image_scroller.css" />

Take a note that libraries: jQuery and jQuery-UI, are connecting from the Google Libraries API resource. Also in tag <head> will be automatically added script, which is initializing the component:

<script type="text/javascript">
  $(document).ready(function() {
    jQuery("#JQImageScroller1").fdImageScroller({sourceURL:"scroller_files/scroller.xml",
    keyboardEnabled:true,
    keyboardEnabled:true,
    scrollType:"smooth",
    scrollSpeed:2000,
    scrollDelay:0,
    scrollEasing:"easeInQuad",
    scrollAuto:true,
    scrollRepeat:true,
    scrollStepSpeed:500,
    scrollStepEasing:"easeOutQuad",
    scrollBarEnable:true,
    scrollBoxWidth:"auto",
    scrollButtonEnabled:true,
    thumbWidth:100,
    thumbHeight:65,
    thumbScaleMode:"fix",
    thumbServerScript:"",
    thumbCaptionVisible:true,
    popupBgColor:"#000000",
    popupBgOpacity:0.5,
    slideWidth:520,
    slideHeight:330,
    frameShadowEnabled:true,
    buttonListEnbled:true,
    buttonListHide:true,
    descriptionAnimationSpeed:500,
    descriptionAnimationEasing:"easeOutQuad",
    categoriesFontColor:"#505050",
    categoriesFontHighlight:"#C66300",
    categoriesMarkerPosition:"top",
    categoriesSeparatorStyle:"dotted",
    categoriesSeparatorColor:"#A0A0A0",
    categoriesVisible:true});
    jQuery("#JQImageScroller1").data("fdImageScroller").loadScroller(0);
  });
</script>

In the line jQuery("#JQImageScroller1").data("fdImageScroller").loadScroller(0); as a parameter, you can set the number of category, which will be opened after scroller loading. Numeration starts from "0".

HTML5 Image Scroller is placed in a special tag <div id="JQImageScroller1" class="JQImageScroller">...</div>. More information about scroller structure you can find in section 'Structure of the component'.

That’s all! In the design view of your web page you will see new HTML5 Image Scroller.