Launch Avairy without a dialog (inside div)

Question

I need to use Avairy (from Adobe Creative SDK, Web version) inside my own custom dialog.

Is there any way to get Avairy's div instead of the dialog? I will place it inside my own dialog.

The main problem is the method avairyEditor.launch() opens a dialog and I do not see simple way to do something else.

Is there the only way to do it writing my own hacks (invisible showing the dialog and cutting div from it) or I can do it shedding hardly any blood?

score 0 · Answer 1 · edited Dec 02 '15 at 14:44

Yes, you need to use the appendTo option in the configuration.

Your HTML:

<!-- Aviary div container. You can use absolute/relative positioning -->
<div id='aviary' style='width:600px;height:400px;'></div>

<!-- Add an edit button, passing the HTML id of the image
    and the public URL to the image -->
<a href="#" onclick="return launchEditor('editableimage1', 
    'http://example.com/public/images/goat.jpg');">Edit!</a>

<!-- original line of HTML here: -->
<img id="editableimage1" src="http://example.com/public/images/goat.jpg"/>

Your JavaScript:

var featherEditor = new Aviary.Feather({
    apiKey: '1234567',
    appendTo: 'aviary'
    onSave: function(imageID, newURL) {
        var img = document.getElementById(imageID);
        img.src = newURL;
    }
});

function launchEditor(id, src) {
    featherEditor.launch({
        image: id,
        url: src
    });
    return false;
}

Documentation:

https://creativesdk.adobe.com/docs/web/#/articles/gettingstarted/index.html#constructor-config-appendTo

I am sorry but this is not what I want. AppendTo appends whole the dialog into some
(i.e. div of LightBox) but I want to include Avairy inside my own dialog (which already has button "OK" and close "X" button and other things). — Komi Dumity, Nov 26 '15 at 14:31
Hi, Komi, maybe you could be more specific in your question. Can you post the HTML code for your dialog so we can fully understand your problem? — Juangui Jordán, Dec 03 '15 at 11:31

score 0 · Answer 2 · answered Dec 02 '15 at 14:46

To get closer to what you are trying to do, consider using the appendTo property, as mentioned by Juangui, in addition to the following properties:

theme: 'minimum',
noCloseButton: 'true'

After that you can add some custom styling to better match the rest of your app.

Launch Avairy without a dialog (inside div)

2 Answers2