Developers

Developing your own site or blog? With the Aviamagazine widget you can add a random photo from the Aviamagazine database to your website or blog. Embedding is easy, as you only need to copy two lines of code. It’s also possible to personalize the widget, and show for instance only military photo’s.

facebook x_twitter whatsapp
thumb_up 0 Like this page?

Getting started

Embedding the widget into your site is easy. First load jquery, if you haven't allready done so. The widget required jquery to run. Second load the aviamagazine widget file from the head section of your page.

In the example code below, jquery version 2 is used, but the widget is also compatible with version 1 and 3.

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://aviamagazine.com/system/js/jquery.aviamagazine.widget.js"></script>
</head>

Next step is to include the container element. This div will be injected with the widget code, and should be in the position where you want the widget to be rendered. It can have any id or class as long as you refer to it in the initialize function.

<div id="amwidget"></div>

Last step is to initialize the widget. Include a script block, ideally at the end of your page, and call the aviamagazine method with your selector. An example initialize function looks like this:

<script>
    $(document).ready(function() {
        $('#amwidget').aviamagazine();
    });
</script>

The selector #amwidget in this case refers to the element you want to use, to render the widget. No options are provided in the method, so the widget will render in default mode. The document ready function is to ensure the page is loaded, before the widget is started. It's not mandatory, but a safe way to ensure the widget is rendered.

Live example

Customize

There are several options availible to customize the content and look & feel. All options can be supplied in the aviamagazine method. See the exmple below the option table. All options are optional. In most cases a default value is used when no option is not supplied.

Option Description
aviationinterest Customize the widget according to your aviation preference. When for instance 'mil'is selected, only military related photo's are shown. By default both military and civil photo's are randomly shown. Valid input is mil, civ or both (default).
width Width of the widget in pixels or percentage. By default the widget is reponsive, and takes 100% of it's container. Valid input examples are "300px" or "20%". Note:To preserve good photo quality the ideal width is between 300 and 400 pixels (computed).
theme Change the appearance of the widget. By default it has rounded corners. Another option is to use a square layout. This will apply on both the frame and button. Valid input is "rounded" or "square".
backgroundcolor This option will change the background color of the photo attributes. By default it's white, but any color can be used in hex or text format. Valid input examples are "#C0C0C0" or "black".
textcolor Changes the text color of the photo attributes. By default it's black, but any color can be used in hex or text format. Valid input examples are "#FFFFFF" or "white".
buttonstyle This option will change the style of the link button. By default it's an open button, but a solid or dark theme can be selected. Valid input is "outline", "dark" or "solid" (default).

Example

This example shows the widget with options for a dark theme, square corners and the aviation interest is set to 'mil', only showing military related photo's.

<script>
    $(document).ready(function() {
        $('#amwidget').aviamagazine({
            aviationinterest:"mil",
            theme:"square",
            backgroundcolor:"#163149",
            textcolor:"white",
            buttonstyle: "dark"
        });
    });
</script>

Support

Using this widget on your site? having problems to install? or if you're looking for specific options or theme's, please tell us about it.

Comments
To place a comment, you need be be an Aviamagazine Member. Sign up for a free membership.