Flickr Photos Dynamic Sidebar

Step 01: Create a div in footer.php OR Anywhere required [WIDGETS AREAS] as follows:

            <div class="col-27">
                            <aside class="widget">
                            <h4>Flickr Photos</h4>
                            <ul class="flickr-feed"></ul> <!--flickr-feed class is IMPORTANT-->
                            </aside>
                        </div>

Step 02: Add the following CSS code in style.css file:

.flickr-feed {
    margin: 16px 0 0 0;
    overflow: hidden
}

.flickr-feed li {
  float: left;
  list-style: outside none none;
  padding: 0 44px 0px 0;
  margin-left: -39px;
}

.flickr-feed li img {
    width: 50px;
    border: 2px solid #eaeaea;
}

.flickr-feed a:hover {
    opacity: 0.7;
}

Step 03: Put the plugin (available in andia agency theme) in  js folder and call it as  follows:
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jflickrfeed.js"></script>

Step 04: Put the following JS code in footer.php:

<script type="text/javascript">
    <?php
        $flickr_id = ot_get_option('flickr_id');
    ?>
    jQuery(document).ready(function($) {
        $('.flickr-feed').jflickrfeed({
            limit: 12,
            qstrings: {
                id: '<?php echo $flickr_id; ?>'
            },
            itemTemplate: '<li><a href="{{link}}" target="_blank"><img src="{{image_s}}" alt="{{title}}" /></a></li>'
        });
    });

</script>

Step 04: Add theme option (theme-options.php) support to add flickr ID (Mine is: 82395793@N04) as follows:

'sections'        => array(
       array(
        'id'          => 'footer_settings',
        'title'       => __( 'Footer Settings', 'theme-text-domain' )
      )
    ),
    'settings'        => array(
            array(
            'id' => 'flickr_id',
            'label' => 'Flickr ID',
            'desc' => 'Set Flickr Photo',
            'type' => 'text',
            'section' => 'footer_settings',
            )