https://ariosto-kv.ru/local/templates/aristo/js/slideShow.js?17008041613491

1function showSlideShow(el)
2{
3	var strImages = el.data("images");
4	if(strImages == undefined || strImages == "") return;
5	var arImages = strImages.split(",");
6	
7	var bigImgInner = $("#slideShow .slider-for-hod");
8	var thumbImgInner = $("#slideShow .slider-nav-for-hod");
9	bigImgInner.empty();
10	thumbImgInner.empty();
11	
12	arImages.forEach(function(imgSrc){
13		bigImgInner.append(slidesBigTpl.replace("#SRC#", imgSrc));
14		thumbImgInner.append(thumbsTpl.replace("#THUMB#", imgSrc));
15	});
16	
17	if(el.data("title") != undefined) $("#slideShow .caption h2").html(el.data("title"));
18	if(el.data("text") != undefined) $("#slideShow .caption p").html(el.data("text"));
19	
20	$('#slideShow').modal("show");
21}
22
23function initSlideShow()
24{
25	$("#slideShow").remove();
26	$("body").append(slideShowWindowTpl);
27	
28	$('#slideShow').on('shown.bs.modal', function (event) {
29			
30		$("#slideShow .slider-for-hod").slick(
31		{
32			dots: true,
33			// infinite: false,
34			speed: 300,
35			centerPadding: '10px',
36			slidesToShow: 1,
37			slidesToScroll: 1,
38			adaptiveHeight: true,
39			asNavFor: '#slideShow .slider-nav-for-hod'
40		});
41		$("#slideShow .slider-nav-for-hod").slick(
42		{
43			dots: true,
44			// infinite: false,
45			speed: 300,
46			centerPadding: 20,
47			slidesToShow: 4,
48			slidesToScroll: 1,
49			asNavFor: '#slideShow .slider-for-hod',
50			adaptiveHeight: true,
51			centerMode: true,
52			focusOnSelect: true
53		})
54		
55	})
56	
57	$('#slideShow').on('hide.bs.modal', function (event) {
58		$("#slideShow .slider-for-hod").slick("destroy");
59		$("#slideShow .slider-nav-for-hod").slick("destroy");
60	})
61	
62	$("#slideShow .slider-nav-for-hod").on('init', function(slick){
63		$(slick.currentTarget).find(".news_item").click(function(e){
64			// $(slick.currentTarget).find(".news_item").removeClass("slick-current");
65			// $(this).addClass("slick-current");
66			// console.log($(this).index())
67		});
68	});
69}
70
71$(function(){
72	initSlideShow();
73})
74
75var slidesBigTpl = 			'<div class="big-item" style="background-image: url(#SRC#)">' +
76								//'<img src="#SRC#" class="shadow_black" >' +
77							'</div>';
78							
79var thumbsTpl = 			'<div class="news_item hidden-xs" style="background-image: url(#THUMB#)">' +
80								'<div class="news_item_img">' +
81									//'<img src="#THUMB#" />' +
82									'<div class="galery_overflow"></div>' +
83								'</div>' +
84							'</div>';
85
86var slideShowWindowTpl = 	'<div class="modal fade full-modal" id="slideShow" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' + 
87							'<div class="modal-dialog" role="document">' +
88							'<div class="modal-content">' +
89							'<button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>' +
90							'<div class="modal-body">' +
91							'<div class="container">' +
92							'<div class="row">' +
93							'<div class="slider-for-hod_cont col-md-12">' +
94							'<div class="slider slider-for-hod ">' +
95							// Big pictures
96							'</div>' +
97							'</div>' +
98							'<div class="slider slider-nav-for-hod slider-nav-for-hod-lg col-md-12" style="">' +
99							// Thumbs
100							'</div>' +
101							'</div>' +
102							'<div class="row">' +        
103							'<div class="col-md-offset-1 col-md-9 col-sm-12 col-xs-12 caption">' +
104							'<h2 class="std-h2"></h2>' +
105							'<p class="std-14-line-24"></p>' +
106							'</div>' +
107							'<div class="col-md-2 col-xs-12 top-block-images">' +
108									
109							'</div>' +
110							'</div>' +
111							'</div>' +
112							'</div>' +
113							'</div>' +
114							'</div>' +
115							'</div>' +
116							'</div>' +
117							'</div>';
118