I. Adding ComicBubbles to a web page

  1. Unzip comicbubbles.zip.
  2. Copy comicbubbles.min.js and comicbubbles_editor.min.js into your web directory.
  3. Include comicbubbles.min.js and comicbubbles_editor.min.js in your HTML page.
    <head>
    	<script src="comicbubbles.min.js"></script>
    	<script src="comicbubbles_editor.min.js"></script>
    </head>
    

    Note: An alternative method is to put the library files at the very end of the body tag (before </body>)

II. Creating ComicBubbles bubbles

  1. Prepare an output box for data produced by ComicBubbles.

    As the output box you can use a <div> element.
    For your convenience place the element next to the image you want to add bubbles to.
    Make sure that the id of the output box begins with the id of the image and ends with the suffix '-comic-bubbles-output'.

    <img id="my_image_id" src="my_image.jpg">
    <div id="my_image_id-comic-bubbles-output"></div>
    
  2. Call ComicBubbles with the id of the image you want to add bubbles to.
    <script>
    	var myBubbles = new ComicBubbles('my_image_id', {canvas: { readonly: false }});
    </script>
    

    Note: If you want to add and edit bubbles with a mouse you have to set the readonly property to false (by default it is set to true). You can preset several other properties too. Use the table for your reference. If you, for example, need 25px Verdana as a default font for newly created bubbles, you should create a new ComicBubbles object in the following way:

    var myBubbles = new ComicBubbles('my_image_id', {canvas: { readonly: false, fontFamily: 'Verdana', fontSize: 25 }});
    
  3. Watch the video.
  4. Use the following mouse actions to add and modify your ComicBubbles bubbles.

    • double click on the image to add a new bubble (simple text field)

    • double click on one of 8 square dots of the red outline to turn the bubble without any style into a 'proper' speech balloon

    • keep double clicking on the tail of the bubble to change the style (speak→ think→ scream→ arrow→ speak)

    • double click on the bubble tail ending to remove the style

    • click on the image outside the bubble to remove the red selection frame

    • click on the bubble to add the selection frame

    • click on the bubble inside the selection frame and type some text

    Note: The text field of a bubble is not well suited for interpreting HTML tags. Copying website content and pasting it in with HTML formatting should be avoided (can cause unexpected effects).

    • drag and drop to move/resize the bubble and to move the tail ending

    • click the 's' button to display the settings box and format the bubble

    • If you want to remove a bubble, select it and press 'Delete'.

  5. Save your ComicBubbles bubbles.

    After customizing your ComicBubbles bubbles you should copy the bubbles data from the output box and save it to a database or to a file. You can either save a single bubble definition, e.g.

    {id: 'b1492710096339', text: "Nobody wants\nto play with me", x: 161, y: 22, width: 115, height: 55, fontSize: '17px', background: '#dc143c', opacity: 1, bubbleStyle: 'speak', tailLocation: 'sw', tailX: 120, tailY: 173}
    

    or the whole 'new ComicBubbles' syntax.
    If you need more control over bubble data, use API functions (getText(), getX(), getY(), etc.) and save the properties separately.

III. Displaying ComicBubbles bubbles

  1. Add comicbubbles.min.js to your HTML page.
    <head>
    	<script src="comicbubbles.min.js"></script>
    </head>
    
  2. Call ComicBubbles with the id of your image and with your bubble definition.
    <script>
    
    var myBubbles = new ComicBubbles('my_image_id', {bubble:
    {id: 'b1492710096339', text: "Nobody wants\nto play with me", x: 161, y: 22, width: 115, height: 55, fontSize: '17px', background: '#dc143c', opacity: 1, bubbleStyle: 'speak', tailLocation: 'sw', tailX: 120, tailY: 173}
    });
    
    </script>
    

    Note: You can omit the canvas readonly property unless you want to let others create their own bubbles over your image. A bubble definition can include all properties from the table.