Product Page Image and Alt Images to Slick and Fancybox with alt images

1. Neto.md

Product Page Image and Alt Images to Slick and Fancybox with alt images

	$('.slider-for').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: false,
	  asNavFor: '.slider-nav'
	});
	$('.slider-nav').slick({
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  asNavFor: '.slider-for',
	  dots: false,
	  centerMode: true,
	  focusOnSelect: true
	});

2. image.template.html

<div class="main-image text-center ">
   <div class="nCustom-carousel slider slider-for">
       <div class="image">
          <a href="[%asset_url type:'product' id:'[@SKU@]' thumb:'full' check_parent:'y'%][%END asset_url%]" class="fancybox-img" rel="product_images">
            <img src="[%ASSET_URL type:'inventory' id:'[@inventory_id@]' thumb:'full' /%]" border="0" class="img-responsive">
          </a>
        </div>
 [%THUMBNAILS id:'[@SKU@]' check_parent:'y'%]
   [%PARAM *body%]
     <div class="image">
        <a href="[@full_image@]" class="fancybox-img" rel="product_images">
           <img src="[@full_image@]" border="0" class="img-responsive">
        </a>
    </div>
  [%/ PARAM%]
[%/ THUMBNAILS%]
  </div>
</div>
<div class="row">
[%THUMBNAILS id:'[@SKU@]' check_parent:'y'%]
	[%PARAM *header%]
		<div class="nCustom-slick-wrapper">
			<div class="slider slider-nav">
                <div class="col-xs-2">
                    <img src="[%asset_url type:'product' id:'[@SKU@]' thumb:'thumbL' check_parent:'y'%][%END asset_url%]" data-bigsrc="[%asset_url type:'product' id:'[@SKU@]' thumb:'full' check_parent:'y'%][%END asset_url%]" border="0" class="img-responsive product-image-small" title="Large View">
                </div>
	[%END PARAM%]
	[%PARAM *body%]
		<div class="col-xs-2">
			<img src="[@thumb_image@]" data-bigsrc="[@full_image@]" border="0" class="img-responsive product-image-small" title="Large View">
		</div>
	[%END PARAM%]
	[%PARAM FOOTER%]
			</div>
		</div>
		[%PARAM *brochure%]
			<div class="col-xs-3">
				<a href="[@file@]" target="_blank"><img src="[@config:imageurl@]/pdf_brochure.gif" alt="View PDF brochure for [%NOHTML%][@name@][%END NOHTML%]" width="45" height="45"></a>
			</div>
		[%END PARAM%]
	[%/param%]
[%END THUMBNAILS%]
</div>

3. template.html

<!-- Assets -->

<!-- Slick -->

<link rel="stylesheet" type="text/css" href="[%ntheme_asset%]plugins/slick/slick.css[%/ntheme_asset%]" media="all"/>
<link rel="stylesheet" type="text/css" href="[%ntheme_asset%]plugins/slick/slick-theme.css[%/ntheme_asset%]" media="all"/>

<script type="text/javascript" src="[%ntheme_asset%]plugins/slick/slick.js[%/ntheme_asset%]"></script>
<script type="text/javascript" src="[%ntheme_asset%]plugins/slick/slick.js[%/ntheme_asset%]"></script>

<!-- Fancybox -->

[%cdn_asset html:'1' type:'css' library:'fancybox' version:'2.1.5'%]jquery.fancybox.css[%/cdn_asset%]
<link rel="stylesheet" type="text/css" href="[%ntheme_asset%]plugins/fancybox/helpers/jquery.fancybox-buttons.css[%/ntheme_asset%]" media="all"/>
<link rel="stylesheet" type="text/css" href="[%ntheme_asset%]plugins/fancybox/helpers/jquery.fancybox-thumbs.css[%/ntheme_asset%]" media="all"/>

[%cdn_asset html:'1' type:'js' library:'fancybox' version:'2.1.5'%]jquery.fancybox.pack.js[%/cdn_asset%]
<script type="text/javascript" src="[%ntheme_asset%]plugins/fancybox/helpers/jquery.fancybox-buttons.js[%/ntheme_asset%]"></script>
<script type="text/javascript" src="[%ntheme_asset%]plugins/fancybox/helpers/jquery.fancybox-thumbs.js[%/ntheme_asset%]"></script>

4. style.css

.slick-prev:before, .slick-next:before{
	color: #00593F;
}
.nCustom-slick-wrapper{
	padding: 0 16px;
}
#fancybox-thumbs{
	z-index: 99999 !important;
}
#fancybox-thumbs.bottom{
	bottom: 5% !important;
}
#fancybox-thumbs ul{
	left:inherit !important;
	width: 100% !important;
	text-align: center; 
}
#fancybox-thumbs ul li{
	float: none !important;
	display: inline-block !important;
}
.slick-next{
	right:-23px;
}

5. custom.js

$(document).ready(function() {
  
  	$(".fancybox-img").fancybox({
		helpers	: {
			title	: {
				type: 'outside'
			},
			thumbs	: {
				width	: 50,
				height	: 50
			}
		}
	});
	
	
	$('.slider-for').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: false,
	  asNavFor: '.slider-nav'
	});
	$('.slider-nav').slick({
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  asNavFor: '.slider-for',
	  dots: false,
	  centerMode: true,
	  focusOnSelect: true
	});
});