Answered MIGX Media Source

<meta charset="[[++modx_charset]]">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="[[*description]]"/>
<!-- Favicon -->
<!-- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> -->
<!-- Favicon Off -->
<!-- CSS -->
<!-- Bootstrap and Font Awesome CSS -->
<link href="[[++assets_url]]components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="[[++assets_url]]templates/bootstrap/css/style.css" rel="stylesheet" media="screen">
<link href="[[++assets_url]]templates/bootstrap/css/font-awesome.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap and Font Awesome CSS Off -->
<!-- Fancybox CSS -->
<link href="[[++assets_url]]templates/fancybox/jquery.fancybox.css?v=2.1.5" rel="stylesheet" media="screen">
<!-- Fancybox CSS Off -->
<!-- CSS Off -->
<!-- Script -->
<!-- jQuery -->
<script type="text/javascript" src="[[++assets_url]]templates/bootstrap/js/jquery-1.11.2.min.js"></script>
<!-- jQuery Off -->
<!-- Fancybox Script -->
<script type="text/javascript" src="[[++assets_url]]templates/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
 <script type="text/javascript">
            $(document).ready(function() {
                $("a.fancyimg").fancybox({
             'transitionIn' : 'elastic',
             'transitionOut' : 'elastic',
             'speedIn' : 600, 
                    'speedOut' : 200, 
                    'overlayShow' : false
                });
 
            });
        </script>
<!-- Fancybox Script Off -->
<!-- Mega Menu -->
<script type="text/javascript" src="[[++assets_url]]templates/bootstrap/js/modernizr.custom.js"></script>
<!-- Mega Menu Off -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="[[++assets_url]]components/bootstrap/vendor/js/html5shiv.js"></script>
<script src="[[++assets_url]]components/bootstrap/vendor/js/respond.min.js"></script>
<![endif]-->
<!-- Script Off -->
<base href="[[!++site_url]]" />

<a href="[[+image]]" class="fancyimg">
<img src="[[+image:phpthumbof=`w=100&h=75&zc=1`]]" alt=""/>
</a>

[[!getImageList?
&tpl=`fancybox`
&tvname=`fancyboxTv`
&toSeparatePlaceholders=`img`]]

[
{"caption":"Image", "fields": [
    {"field":"placeholder","caption":"Placeholder","inputTV":"placeholderTV"},
    {"field":"title","caption":"Title","description":"Title for the image."}, 
    {"field":"image","caption":"Image","inputTV":"imageTV","sourceFrom":"migx"}
 
]}
]

[
{"header": "Placeholder", "width": "10", "sortable": "true", "dataIndex": "placeholder", "renderer": "this.renderPlaceholder"},
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"}, 
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]