...
Step 3: Add the script to your HTML
You'll need to add your initialization script, along with the Infusion library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="infusion-1.0/InfusionAll.js"></script>
<script type="text/javascript" src="image-collection.js"></script>
|
Keep in mind that the InfusionAll.js file is minified - all of the whitespace has been removed - so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script type="text/javascript" src="infusion-1.0/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion-1.0/lib/jquery/ui/js/ui.core.js"></script>
<script type="text/javascript" src="infusion-1.0/lib/jquery/ui/js/ui.draggable.js"></script>
<script type="text/javascript" src="infusion-1.0/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion-1.0/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion-1.0/framework/core/js/FluidDOMUtilities.js"></script>
<script type="text/javascript" src="infusion-1.0/components/reorderer/js/GeometricManager.js"></script>
<script type="text/javascript" src="infusion-1.0/components/reorderer/js/Reorderer.js"></script>
<script type="text/javascript" src="infusion-1.0/components/reorderer/js/ImageReorderer.js"></script>
<script type="text/javascript" src="image-collection.js"></script>
|
But all of these individual files are not necessary to make it work - the InfusionAll.js file has everything you need.
That's it! That's all you need to do to make your images reorderable!
...
Step 4: Apply styles
...
Step 1 - Include the Fluid component library
...