add options gallery Slick slider

magepow · Feb 25, 2021 · 6dde4e2 · 6dde4e2
1 parent 286e6c9
commit 6dde4e2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/view/frontend/templates/product/view/gallery.phtml b/view/frontend/templates/product/view/gallery.phtml
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/**
+ * Product media data template
+ *
+ * @var $block \Magento\Catalog\Block\Product\View\Gallery
+ */
+?>
+<?php
+    $gallery  = json_decode( $block->getGalleryImagesJson(), true );
+    $thumbs_html = '<div class="slider-nav" data-slides-To-Show="3" data-slides-To-Scroll="1" data-arrows="true" data-infinite="false" data-cente-Mode="true" data-focus-On-Select="true" >';
+    $selector = 'gallery-' . uniqid();
+?>
+<div class="<?php echo $selector ?> gallery-placeholder autoplay" data-slides-To-Show="1" data-slides-To-Scroll="1" data-arrows="true" data-fade="true" data-infinite="false">
+    <div class="gallery-items">
+        <?php foreach ($gallery as $shot) : ?>
+        	<?php $thumbs_html .= '<div class="fotorama__stage"><div class="fotorama__active"><img src="'. $shot['thumb'] .  '" alt="' . $shot['caption'] . '"></div></div>'; ?>
+            <div class="fotorama__stage"><div class="fotorama__active"><img src="<?php echo $shot['img'] ?>"  data-src="<?php echo $shot['full'] ?>" alt="<?php echo $shot['caption'] ?>"></div></div>
+        <?php endforeach ?>
+    </div>
+    <?php $thumbs_html .= '</div>'; ?>
+    <?php echo $thumbs_html ?>
+</div>
diff --git a/view/frontend/web/js/magicproduct.js b/view/frontend/web/js/magicproduct.js
@@ -5,7 +5,7 @@
  * @license 	http://www.magiccart.net/license-agreement.html
  * @Author: DOng NGuyen<[email protected]>
  * @@Create Date: 2014-04-25 13:16:48
- * @@Modify Date: 2021-02-02 11:08:12
+ * @@Modify Date: 2021-02-25 11:08:12
  * @@Function:
  */
 
@@ -199,13 +199,27 @@ define([
 				if(el.hasClass('slick-initialized')) el.slick("refresh"); // slide.resize(); // $(window).trigger('resize');
 				else{ // var selector = $content.selector; // '.' + $content.attr('class').trim().replace(/ /g , '.');
 					if( !options.vertical && $('body').hasClass('rtl') ) el.attr('dir', 'rtl');
+					var galleryPlaceholder = el.find('.gallery-placeholder.autoplay');
                     el.on('init', function(event, slick){
                         $('body').trigger('contentUpdated');
+                 		if(galleryPlaceholder.length) methods.gallerySlider(galleryPlaceholder);
                     });
 					el.slick(options);
 				}
             }, 
 
+            gallerySlider : function(el) {
+                el.each(function() {
+	                var gallery = $(this).find('.gallery-items');
+	                if(gallery.hasClass('slick-initialized')) return;
+	                var nav     = $(this).find('.slider-nav');
+	                var galleryConfig = $.extend(gallery.data(), {'asNavFor': nav});
+	                var navConfig 	  = $.extend(nav.data(), {'asNavFor': gallery});
+	                gallery.slick(galleryConfig);
+	                nav.slick(navConfig);
+	            }); 
+            },
+
             productGrid : function(options, returnStyle=false) {
             	if(style) return;
             	var padding 	= options.padding;