Scribd Logo
Upload

Welcome to Scribd!

  • How To Install This Accordion On Your Website

    Uploaded by

    Nakaka Ronald
    16 views2 pages
    This document provides instructions for installing an accordion component on a website using SWF embedding. It involves 3 main steps: 1. Downloading the accordion files and embedding the SWF using code between HTML head tags and a div in the body. 2. Customizing the accordion by editing the settings XML file or using an online generator. 3. Adding images, text, and click behavior by editing the images XML file.

    Original Description:

    Original Title

    How to install this Accordion on your website

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides instructions for installing an accordion component on a website using SWF embedding. It involves 3 main steps: 1. Downloading the accordion files and embedding the SWF using code between HTML head tags and a div in the body. 2. Customizing the accordion by editing the settings XML file or using an online generator. 3. Adding images, text, and click behavior by editing the images XML file.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    16 views2 pages

    How To Install This Accordion On Your Website

    Uploaded by

    Nakaka Ronald
    This document provides instructions for installing an accordion component on a website using SWF embedding. It involves 3 main steps: 1. Downloading the accordion files and embedding the SWF using code between HTML head tags and a div in the body. 2. Customizing the accordion by editing the settings XML file or using an online generator. 3. Adding images, text, and click behavior by editing the images XML file.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 2

     

    How to install this Accordion on your website

    Step 1. SWF embedding

    Download the accordion.zip archive and put all the files from this archive into the same folder
    with the HTML file in which you want the component to be embedded.

    You should know first of all that the SWF file is the one that actually represents the component,
    while the other files (settings.xml, images.xml and JPGs in the images folder) are the assets that
    the SWF file uses.
    A short explanation on how SWFs and XMLs interacts you will find here.

    Open your HTML file with a text editor and insert somewhere between the <head> </head> tags
    the following lines:

    <script type="text/javascript" src="swfobject.js"></script>


    <script type="text/javascript">
    var flashvars = {};
    var params = {};
    params.scale = "noscale";
    params.salign = "tl";
    params.wmode = "transparent";
    var attributes = {};
    swfobject.embedSWF("accordion.swf", "AccordionDiv", "600", "300", "9.0.0",
    false, flashvars, params, attributes);
    </script>

    For a fast and easy publishing, the best thing to do is to have the SWF file, the HTML file which
    embeds the SWF, the swfobject.js file, and the assets that the SWF uses (XMLs, JPGs folder) in
    the same folder.

    If that is not possible, please read this detailed article on how to specify the paths correctly.

    The above code itself isn’t enough to publish the SWF file on your webpage. You just need to
    add a div somewhere in the body section of your page (between the tags of your HTML file).

    So, in a specific location of your HTML body section insert this div:

    <div id="AccordionDiv"></div>

     
    Step 2. Customization

    You’ll be able to define a maximum size of 1680 in width and 1050 in height in the 3rd and 4th
    arguments of the swfobject.embedSWF() function above. Usually the same values as for width
    and height (which you will set below).

    Now you will have to define the properties of your Accordion.

    You can do that by editing the settings.xml file, or much simpler, set your values on the Live
    Demo above and press Generate button, then select all (Ctrl+A) and copy-paste over the
    existing content of settings.xml file.

    If you intend to have multiple Accordions on the same page, for the same accordion.swf file
    you’ll need to have different settings. Please read here how publish a component twice on the
    same page.

    Now all you have to do is to put your own images, add the text and add the behavior for when
    clicking each image. All these through the images XML file. Open the XML file with a text
    editor and define in each row the image path, the URL to go to when clicking the image, the
    target (_self for the same browser window, or _blank for a new browser window), and the text
    in CDATA tags.
    You can have as many images as you like. To add a new image add a new row in the XML file.

    To add Lightbox functionality (showing a bigger image and a description when clicking on an
    image) please read this article.

    If you’ll want to use the Accordion in Flash projects (FLA files), the Accordion is available as a
    Flash component (MXP file) in the commercial archive available at FlashComponents.net

    Instructions on how to use the Accordion component in Flash you will find here.

    To be able to remove the FlashXML.net label from the top-left corner you will need to purchase
    the commercial archive

    You might also like