Multi-images component, refactoring medias functions

app/Datatables/Shop/ArticlesDataTable.php

@@ -76,10 +76,13 @@ class ArticlesDataTable extends DataTable
         ->editColumn('tags2', function (Article $article) {
             $html = '';
             foreach ($article->tags as $tag) {
-                $html .= '<span class="btn btn-xs btn-success pb-2">' . Tags::getFullnameByTag($tag) . '</span> ';
+                $html .= '<span class="btn btn-xs btn-success pb-2 mb-1" style="font-size: 0.8em;">' . Tags::getFullnameByTag($tag) . '</span> ';
             }
             return $html;
         })
+        ->editColumn('images_count2', function (Article $article) {
+            return Articles::countFullImagesByArticle($article);
+        })
         ->rawColumns(['tags2', 'thumb', 'action']);
         return parent::modifier($datatables);
     }
@@ -97,6 +100,7 @@ class ArticlesDataTable extends DataTable
             Column::make('categories_count')->title('#Ray')->class('text-right')->searchable(false)->width(40),
             Column::make('offers_count')->title('#Ofr')->class('text-right')->searchable(false)->width(40),
             Column::make('images_count')->title('#Pho')->class('text-right')->searchable(false)->width(40),
+            Column::make('images_count2')->title('#PhoH')->class('text-right')->searchable(false)->orderable(false)->width(40),
             $this->makeColumnButtons(),
         ];
     }

app/Repositories/Botanic/Species.php

@@ -51,7 +51,7 @@ class Species
 
     public static function get($id)
     {
-        return Specie::with('tags.group')->findOrFail($id);
+        return Specie::with('tags.tag_group')->findOrFail($id);
     }
 
     public static function storeFull($data)

app/Repositories/Botanic/Varieties.php

@@ -48,7 +48,7 @@ class Varieties
 
     public static function get($id)
     {
-        return Variety::with('tags.group')->findOrFail($id);
+        return Variety::with('tags.tag_group')->findOrFail($id);
     }
 
     public static function getFull($id)

app/Repositories/Core/Images.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Repositories\Core;
+
+use App\Traits\Repository\Imageable;
+
+class Images
+{
+    use Imageable; 
+}

app/Repositories/Core/Medias.php

@@ -80,33 +80,38 @@ class Medias
             return null;
         }
         $id = $image['id'];
-        $image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
+        $filename = self::getFilename($image);
-        $filename = $image['name'] . self::getExtension($image['file_name']);
-
         return "/storage/$id/$filename";
     }
 
     public static function getThumbSrc($image)
     {
-        if (!$image) {
+        return self::getSrcByType($image, 'thumb');
-            return null;
-        }
-        $id = $image['id'];
-        $image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
-        $filename = $image['name'] . '-thumb' . self::getExtension($image['file_name']);
-
-        return "/storage/$id/conversions/$filename";
     }
 
     public static function getPreviewSrc($image)
     {
-        if (!$image) {
+        return self::getSrcByType($image, 'preview');
-            return null;
+    }
-        }
-        $id = $image['id'];
-        $image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
-        $filename = $image['name'] . '-preview' . self::getExtension($image['file_name']);
 
-        return "/storage/$id/conversions/$filename";
+    public static function getNormalSrc($image)
+    {
+        return self::getSrcByType($image, 'normal');
+    }
+
+    public static function getSrcByType($image, $type)
+    {
+        return $image ? '/storage/' . $image['id'] . '/conversions/' . self::getFilename($image, $type) : false;
+    }
+
+    public static function getFilename($image, $type = false)
+    {
+        $image['name'] = self::convertName($image['name']);
+        return $image['name'] . ($type ? '-' . $type : '') . self::getExtension($image['file_name']);
+    }
+
+    public static function convertName($name)
+    {
+        return str_replace(['#', '/', '\\', ' '], '-', $name);
     }
 }

app/Repositories/Shop/Articles.php

@@ -82,9 +82,10 @@ class Articles
         $data = $article->toArray();
         $parents = self::getInheritedByProduct($article->product_id, $article->product_type);
         $data['description'] = self::getFullDescriptionByArticle($article);
-        $image = self::getFullImageByArticle($article);
+        $images = self::getFullImagesByArticle($article);
-        $data['image'] = self::getPreviewSrc($image);
+        $data['image'] = self::getPreviewSrc($images[0] ?? false);
-        $data['image_big'] = self::getImageSrc($image);
+        $data['images'] = $images;
+        $data['image_big'] = self::getImageSrc($images[0] ?? false);
         $data['inherited'] = self::getInherited($id);
         $data['categories'] = self::getCategoriesNameByArticle($article);
         $data['tags'] = self::getTagsSlugByArticle($article);
@@ -233,7 +234,7 @@ class Articles
 
     public static function getInherited($id)
     {
-        $article = Article::with('product.tags.group')->findOrFail($id);
+        $article = Article::with('product.tags.tag_group')->findOrFail($id);
         $product_type = $article->product_type;
         switch ($product_type) {
             case 'App\Models\Botanic\Variety':
@@ -406,24 +407,23 @@ class Articles
 
     public static function getFullImagesByArticle($article)
     {
+        $images = count($article->images) ? $article->images : collect([]);
         switch ($article->product_type) {
             case 'App\Models\Botanic\Variety':
                 $variety = $article->product;
                 $specie = $variety->specie;
-                $images = count($variety->images) ? $variety->images : [];
+                $images = $variety ? (count($variety->images) ? $images->merge($variety->images) : $images) : $images;
-                $images = count($specie->images) ? $images->push($specie->images) : $images;
+                $images = $specie ? (count($specie->images) ? $images->merge($specie->images) : $images) : $images;
+                break;
             case 'App\Models\Botanic\Specie':
                 $specie = $article->product;
-                $images = count($specie->images) ? $specie->images : [];
+                $images = count($specie->images) ? $specie->images : $images;
                 break;
             case 'App\Models\Shop\Merchandise':
                 $merchandise = $article->product;
-                $images = count($merchandise->images) ? $merchandise->images : [];
+                $images = count($merchandise->images) ? $merchandise->images : $images;
                 break;
-            default:
-                $images = [];
         }
-        $images = count($article->images) ? $images->push($article->images) : $images;
         return $images;
     }
 

app/Traits/Model/Imageable.php

@@ -12,12 +12,12 @@ trait Imageable
 
     public function images()
     {
-        return $this->hasMany('App\Models\Core\Media', 'model_id')->where('model_type', get_class($this));
+        return $this->hasMany(Media::class, 'model_id')->where('model_type', get_class($this));
     }
 
     public function image()
     {
-        return $this->hasOne('App\Models\Core\Media', 'model_id')->where('model_type', get_class($this))->latest();
+        return $this->hasOne(Media::class, 'model_id')->where('model_type', get_class($this))->latest();
     }
 
     public function registerMediaConversions(Media $media = null) : void

app/Traits/Repository/Imageable.php

@@ -35,7 +35,18 @@ trait Imageable
 
     public static function getPreviewSrc($image, $with_undefined = true)
     {
-        return $image ? Medias::getPreviewSrc($image) : ($with_undefined ? '/img/visuel-non-disponible.jpg' :'');
+        return $image ? Medias::getPreviewSrc($image) : ($with_undefined ? '/img/visuel-non-disponible.jpg' : '');
+    }
+
+    public static function getNormal($image, $with_undefined = true)
+    {
+        $src = self::getNormalSrc($image, $with_undefined);
+        return $src ? "<img src='$src'>" : '';
+    }
+
+    public static function getNormalSrc($image, $with_undefined = true)
+    {
+        return $image ? Medias::getNormalSrc($image) : ($with_undefined ? '/img/visuel-non-disponible.jpg' : '');
     }
 
     public static function getImage($image, $with_undefined = true)

build/js/plugins/smooth_products/css/smoothproducts.css

@@ -0,0 +1,184 @@
+/* Needed for the lightbox */
+
+html, body {
+	height: 100%;
+	width: 100%;
+}
+
+/* CSS for the loading div */
+
+.sp-loading {
+	text-align: center;
+	max-width: 270px;
+	padding: 15px;
+	border: 5px solid #eee;
+	border-radius: 3px;
+	font-size: 12px;
+	color: #888;
+}
+
+/* Element wrapper */
+
+.sp-wrap {
+	display: none;
+	line-height: 0;
+	font-size: 0;
+	background: #eee;
+	border: 5px solid #eee;
+	border-radius: 3px;
+	position: relative;
+	margin: 0 25px 15px 0;
+	float: left;
+	/**************
+	  Set max-width to your thumbnail width
+	***************/
+	
+	max-width: 480px;
+}
+
+/* Thumbnails */
+
+.sp-thumbs {
+	text-align: left;
+	display: inline-block;
+}
+.sp-thumbs img {
+	min-height: 50px;
+	min-width: 50px;
+	max-width: 50px;
+}
+.sp-thumbs a:link, .sp-thumbs a:visited {
+	width: 50px;
+	height: 50px;
+	overflow: hidden;
+	opacity: .3;
+	display: inline-block;
+	background-size: cover;
+	background-position: center;
+	-webkit-transition: all .2s ease-out;
+	-moz-transition: all .2s ease-out;
+	-ms-transition: all .2s ease-out;
+	-o-transition: all .2s ease-out;
+	transition: all .2s ease-out;
+}
+.sp-thumbs a:hover {
+	opacity: 1;
+}
+
+/* Styles for the currently selected thumbnail */
+
+.sp-thumbs a:active, .sp-current {
+	opacity: 1!important;
+	position: relative;
+}
+
+/* Image currently being viewed */
+
+.sp-large {
+	position: relative;
+	overflow: hidden;
+	top: 0;
+	left: 0;
+}
+.sp-large a img {
+	max-width: 100%;
+	height: auto;
+}
+.sp-large a {
+	display: block;
+}
+
+/* Panning Zoomed Image */
+
+.sp-zoom {
+	position: absolute;
+	left: -50%;
+	top: -50%;
+	cursor: -webkit-zoom-in;
+	cursor: -moz-zoom-in;
+	cursor: zoom-in;
+	display: none;
+}
+/* Lightbox */
+
+.sp-lightbox {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	background: rgb(0, 0, 0);
+	background: rgba(0, 0, 0, .9);
+	z-index: 500;
+	display: none;
+	cursor: pointer;
+}
+.sp-lightbox img {
+	position: absolute;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	max-width: 90%;
+	max-height: 90%;
+	border: 2px solid #fff;
+}
+#sp-prev, #sp-next {
+	position: absolute;
+	top: 50%;
+	margin-top: -25px;
+	z-index: 501;
+	color: #fff;
+	padding: 14px;
+	text-decoration: none;
+	background: #000;
+	border-radius: 25px;
+	border: 2px solid #fff;
+	width: 50px;
+	height: 50px;
+	box-sizing: border-box;
+	transition: .2s;
+	-webkit-transition: .2s;
+	-moz-transition: .2s;
+	-ms-transition: .2s;
+	-o-transition: .2s;
+}
+#sp-prev {
+	left: 10px;
+}
+#sp-prev:before {
+	content: '';
+	border: 7px solid transparent;
+	border-right: 15px solid #fff;
+	position: absolute;
+	top: 16px;
+	left: 7px;
+}
+#sp-next {
+	right: 10px;
+}
+#sp-next:before {
+	content: '';
+	border: 7px solid transparent;
+	border-left: 15px solid white;
+	position: absolute;
+	top: 16px;
+	left: 18px;
+}
+#sp-prev:hover, #sp-next:hover {
+	background: #444;
+}
+
+/* Tweak styles for small viewports */
+
+@media screen and (max-width: 400px) {
+	.sp-wrap {
+		margin: 0 0 15px 0;
+	}
+	#sp-prev, #sp-next {
+		top: auto;
+		margin-top: 0;
+		bottom: 25px;
+	}
+}

build/js/plugins/smooth_products/js/smoothproducts.js

@@ -0,0 +1,274 @@
+/*
+ * Smoothproducts version 2.0.2
+ * http://kthornbloom.com/smoothproducts.php
+ *
+ * Copyright 2013, Kevin Thornbloom
+ * Free to use and abuse under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+(function($) {
+	$.fn.extend({
+		deleteSmoothProducts: function () {
+			$(document.body).off('click', '.sp-lightbox');
+			$(document.body).off('click', '#sp-prev');
+			$(document.body).off('click', '#sp-next');
+			$(document.body).off('click', '.sp-large a');
+			$(document.body).off('click', '.sp-noff-touch .sp-zoom');
+			$(document.body).off('click', '.sp-tb-active a');
+			$(document.body).off('click', '.sp-thumbs');
+		},
+		smoothproducts: function() {
+
+			// Add some markup & set some CSS
+
+			$('.sp-loading').hide();
+			$('.sp-wrap').each(function() {
+				$(this).addClass('sp-touch');
+				var thumbQty = $('a', this).length;
+
+				// If more than one image
+				if (thumbQty > 1) {
+					var firstLarge,firstThumb,
+						defaultImage = $('a.sp-default', this)[0]?true:false;
+					$(this).append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');
+					$('a', this).each(function(index) {
+						var thumb = $('img', this).attr('src'),
+							large = $(this).attr('href'),
+							classes = '';
+						//set default image
+						if((index === 0 && !defaultImage) || $(this).hasClass('sp-default')){
+							classes = ' class="sp-current"';
+							firstLarge = large;
+							firstThumb = $('img', this)[0].src;
+						}
+						$(this).parents('.sp-wrap').find('.sp-thumbs').append('<a href="' + large + '" style="background-image:url(' + thumb + ')"'+classes+'></a>');
+						$(this).remove();
+					});
+					$('.sp-large', this).append('<a href="' + firstLarge + '" class="sp-current-big"><img src="' + firstThumb + '" alt="" /></a>');
+					$('.sp-wrap').css('display', 'inline-block');
+				// If only one image
+				} else {
+					$(this).append('<div class="sp-large"></div>');
+					$('a', this).appendTo($('.sp-large', this)).addClass('.sp-current-big');
+					$('.sp-wrap').css('display', 'inline-block');
+				}
+			});
+
+
+			// Prevent clicking while things are happening
+			$(document.body).on('click', '.sp-thumbs', function(event) {
+				event.preventDefault();
+			});
+
+
+			// Is this a touch screen or not?
+			$(document.body).on('mouseover', function(event) {
+				$('.sp-wrap').removeClass('sp-touch').addClass('sp-non-touch');
+				event.preventDefault();
+			});
+
+			$(document.body).on('touchstart', function() {
+				$('.sp-wrap').removeClass('sp-non-touch').addClass('sp-touch');
+			});
+
+			// Clicking a thumbnail
+			$(document.body).on('click', '.sp-tb-active a', function(event) {
+
+				event.preventDefault();
+				$(this).parent().find('.sp-current').removeClass();
+				$(this).addClass('sp-current');
+				$(this).parents('.sp-wrap').find('.sp-thumbs').removeClass('sp-tb-active');
+				$(this).parents('.sp-wrap').find('.sp-zoom').remove();
+
+				var currentHeight = $(this).parents('.sp-wrap').find('.sp-large').height(),
+					currentWidth = $(this).parents('.sp-wrap').find('.sp-large').width();
+				$(this).parents('.sp-wrap').find('.sp-large').css({
+					overflow: 'hidden',
+					height: currentHeight + 'px',
+					width: currentWidth + 'px'
+				});
+
+				$(this).addClass('sp-current').parents('.sp-wrap').find('.sp-large a').remove();
+
+				var nextLarge = $(this).parent().find('.sp-current').attr('href'),
+					nextThumb = get_url_from_background($(this).parent().find('.sp-current').css('backgroundImage'));
+
+				$(this).parents('.sp-wrap').find('.sp-large').html('<a href="' + nextLarge + '" class="sp-current-big"><img src="' + nextThumb + '"/></a>');
+				$(this).parents('.sp-wrap').find('.sp-large').hide().fadeIn(250, function() {
+
+					var autoHeight = $(this).parents('.sp-wrap').find('.sp-large img').height();
+
+					$(this).parents('.sp-wrap').find('.sp-large').animate({
+						height: autoHeight
+					}, 'fast', function() {
+						$('.sp-large').css({
+							height: 'auto',
+							width: 'auto'
+						});
+					});
+
+					$(this).parents('.sp-wrap').find('.sp-thumbs').addClass('sp-tb-active');
+				});
+			});
+
+			// Zoom In non-touch
+			$(document.body).on('mouseenter', '.sp-non-touch .sp-large', function(event) {
+				var largeUrl = $('a', this).attr('href');
+				$(this).append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
+				$(this).find('.sp-zoom').fadeIn(250);
+				event.preventDefault();
+			});
+
+			// Zoom Out non-touch
+			$(document.body).on('mouseleave', '.sp-non-touch .sp-large', function(event) {
+				$(this).find('.sp-zoom').fadeOut(250, function() {
+					$(this).remove();
+				});
+				event.preventDefault();
+			});
+
+			// Open in Lightbox non-touch
+			$(document.body).on('click', '.sp-non-touch .sp-zoom', function(event) {
+				var currentImg = $(this).html(),
+					thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
+					currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
+				$(this).parents('.sp-wrap').addClass('sp-selected');
+				$('body').append("<div class='sp-lightbox' data-currenteq='"+currentThumb+"'>" + currentImg + "</div>");
+
+				if(thumbAmt > 1){
+					$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
+					if(currentThumb == 1) {
+						$('#sp-prev').css('opacity','.1');
+					} else if (currentThumb == thumbAmt){
+						$('#sp-next').css('opacity','.1');
+					}
+				}
+				$('.sp-lightbox').fadeIn();
+				event.preventDefault();
+			});
+
+			// Open in Lightbox touch
+			$(document.body).on('click', '.sp-large a', function(event) {
+				var currentImg = $(this).attr('href'),
+					thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
+					currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
+
+				$(this).parents('.sp-wrap').addClass('sp-selected');
+				$('body').append('<div class="sp-lightbox" data-currenteq="'+currentThumb+'"><img src="' + currentImg + '"/></div>');
+
+				if(thumbAmt > 1){
+					$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
+					if(currentThumb == 1) {
+						$('#sp-prev').css('opacity','.1');
+					} else if (currentThumb == thumbAmt){
+						$('#sp-next').css('opacity','.1');
+					}
+				}
+				$('.sp-lightbox').fadeIn();
+				event.preventDefault();
+			});
+
+			// Pagination Forward
+			$(document.body).on('click', '#sp-next', function(event) {
+				event.stopPropagation();
+				var currentEq = $('.sp-lightbox').data('currenteq'),
+					totalItems = $('.sp-selected .sp-thumbs a').length;
+
+					if(currentEq >= totalItems) {
+					} else {
+						var nextEq = currentEq + 1,
+						newImg = $('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').attr('href'),
+						newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').css('backgroundImage'));
+						if (currentEq == (totalItems - 1)) {
+							$('#sp-next').css('opacity','.1');
+						}
+						$('#sp-prev').css('opacity','1');
+						$('.sp-selected .sp-current').removeClass();
+						$('.sp-selected .sp-thumbs a:eq('+currentEq+')').addClass('sp-current');
+						$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
+						$('.sp-lightbox img').fadeOut(250, function() {
+							$(this).remove();
+							$('.sp-lightbox').data('currenteq',nextEq).append('<img src="'+newImg+'"/>');
+							$('.sp-lightbox img').hide().fadeIn(250);
+						});
+					}
+
+				event.preventDefault();
+			});
+
+		// Pagination Backward
+			$(document.body).on('click', '#sp-prev', function(event) {
+
+				event.stopPropagation();
+				var currentEq = $('.sp-lightbox').data('currenteq'),
+					currentEq = currentEq - 1;
+					if(currentEq <= 0) {
+					} else {
+						if (currentEq == 1) {
+							$('#sp-prev').css('opacity','.1');
+						}
+						var nextEq = currentEq - 1,
+						newImg = $('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').attr('href'),
+						newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').css('backgroundImage'));
+						$('#sp-next').css('opacity','1');
+						$('.sp-selected .sp-current').removeClass();
+						$('.sp-selected .sp-thumbs a:eq('+nextEq+')').addClass('sp-current');
+						$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
+						$('.sp-lightbox img').fadeOut(250, function() {
+							$(this).remove();
+							$('.sp-lightbox').data('currenteq',currentEq).append('<img src="'+newImg+'"/>');
+							$('.sp-lightbox img').hide().fadeIn(250);
+						});
+					}
+				event.preventDefault();
+			});
+
+
+			// Close Lightbox
+			$(document.body).on('click', '.sp-lightbox', function() {
+				closeModal();
+			});
+
+			// Close on Esc
+			$(document).keydown(function(e) {
+				if (e.keyCode == 27) {
+					closeModal();
+					return false;
+				}
+			});
+
+			function closeModal (){
+				$('.sp-selected').removeClass('sp-selected');
+				$('.sp-lightbox').fadeOut(function() {
+						$(this).remove();
+				});
+			}
+
+
+			// Panning zoomed image (non-touch)
+
+			$('.sp-large').mousemove(function(e) {
+				var viewWidth = $(this).width(),
+					viewHeight = $(this).height(),
+					viewOffset = $(this).offset(),
+					largeWidth = $(this).find('.sp-zoom').width(),
+					largeHeight = $(this).find('.sp-zoom').height(),
+					relativeXPosition = (e.pageX - viewOffset.left),
+					relativeYPosition = (e.pageY - viewOffset.top),
+					moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
+					moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
+
+				$(this).find('.sp-zoom').css({
+					left: moveX,
+					top: moveY
+				});
+
+			});
+
+			function get_url_from_background(bg){
+				return bg.match(/url\([\"\']{0,1}(.+)[\"\']{0,1}\)+/i)[1];
+			}
+		}
+	});
+})(jQuery);

resources/views/Admin/Shop/Articles/partials/product/description.blade.php

@@ -1,5 +1,9 @@
 @if (count($article['inherited'] ?? []))
-	@component('components.layout.box-collapse', ['id' => 'product_description_box', 'title' => 'Informations héritées', 'collapsed' => $collapsed ?? false])
+	@component('components.layout.box-collapse', [
+		'id' => 'product_description_box',
+		'title' => 'Informations héritées',
+		'collapsed' => $collapsed ?? false,
+	])
 		@foreach ($article['inherited'] as $inherited)
 			@component('components.card', ['title' => $inherited['name'], 'class' => 'mb-3'])
 				{!! $inherited['description'] !!}
@@ -7,7 +11,7 @@
 				@if ($inherited['tags'])
 					<h6> Tags</h6>
 					@foreach ($inherited['tags'] as $tag)
-						<button type="button" class="btn btn-secondary btn-xs">{{ $tag['group']['name'] }}-{{ $tag['name']['fr'] ?? $tag['name'] }}</button>
+						<button type="button" class="btn btn-secondary btn-xs">{{ $tag['tag_group']['name'] }}-{{ $tag['name'] ?? $tag['name'] }}</button>
 					@endforeach
 				@endif			
 			@endcomponent

resources/views/Shop/Articles/show.blade.php

@@ -9,10 +9,10 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="col-4">
+		<div class="col-9 text-justify">
-			<img src="{{ $article['image_big'] }}" class="img-fluid border">
+			<div style="max-width: 360px;">
-		</div>
+				@include('components.multi-images', ['images' => $article['images']])
-		<div class="col-5">
+			</div>
 			{!! $article['description'] !!}
 		</div>
 		<div class="col-3">

resources/views/components/multi-images.blade.php

@@ -0,0 +1,14 @@
+<div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
+<div class="sp-wrap" style="width: 100%;">
+	@foreach ($images as $image)
+		<a href="{{ App\Repositories\Core\Images::getImageSrc($image) }}"><img src="{{ App\Repositories\Core\Images::getNormalSrc($image) }}"></a>
+	@endforeach
+</div>
+
+@push('js')
+	<script>
+		$(window).load(function() {
+			$('.sp-wrap').smoothproducts();
+		});
+	</script>
+@endpush

routes/Admin/Shop/Merchandises.php

@@ -1,18 +1,18 @@
 <?php
 
 Route::prefix('Merchandises')->name('Merchandises.')->group(function () {
-	Route::get('', 'MerchandiseController@index')->name('index');
+    Route::get('', 'MerchandiseController@index')->name('index');
-	Route::get('getDataTable', 'MerchandiseController@getDataTable')->name('getDataTable');
+    Route::get('getDataTable', 'MerchandiseController@getDataTable')->name('getDataTable');
-	Route::get('create', 'MerchandiseController@create')->name('create');
+    Route::get('create', 'MerchandiseController@create')->name('create');
-	Route::delete('destroy/{id?}', 'MerchandiseController@destroy')->name('destroy');
+    Route::delete('destroy/{id?}', 'MerchandiseController@destroy')->name('destroy');
-	Route::post('update', 'MerchandiseController@update')->name('update');
+    Route::post('update', 'MerchandiseController@update')->name('update');
-	Route::post('store', 'MerchandiseController@store')->name('store');
+    Route::post('store', 'MerchandiseController@store')->name('store');
-	Route::get('edit/{id}', 'MerchandiseController@edit')->name('edit');
+    Route::get('edit/{id}', 'MerchandiseController@edit')->name('edit');
-	Route::post('getSelect', 'MerchandiseController@getOptionsWithSpecie')->name('getSelect');
+    Route::post('getSelect', 'MerchandiseController@getOptionsWithSpecie')->name('getSelect');
-	Route::post('deleteImage', 'MerchandiseController@deleteImage')->name('deleteImage');
+    Route::post('deleteImage', 'MerchandiseController@deleteImage')->name('deleteImage');
-	Route::any('getImages/{id?}/{can_edit?}', 'MerchandiseController@getImages')->name('getImages');
+    Route::any('getImages/{id?}/{can_edit?}', 'MerchandiseController@getImages')->name('getImages');
 
-	Route::any('exportExcel', 'MerchandiseController@exportExcel')->name('exportExcel');
+    Route::any('exportExcel', 'MerchandiseController@exportExcel')->name('exportExcel');
 
 });