<script>
$(document).ready(function(){
$('#add_more_galleries1').click(function(){
$(".add_more_gallery_images2").show();
$(this).hide();
$("#add_more_galleries2").show();
});
$('#add_more_galleries2').click(function(){
$(".add_more_gallery_images3").show();
$(this).hide();
$("#add_more_galleries3").show();
});
$('#add_more_galleries2').click(function(){
$(".add_more_gallery_images3").show();
$(this).hide();
$("#add_more_galleries3").show();
});
$('#add_more_galleries3').click(function(){
$(".add_more_gallery_images4").show();
$(this).hide();
$("#add_more_galleries4").show();
});
$('#add_more_galleries4').click(function(){
$(".add_more_gallery_images5").show();
$(this).hide();
$("#add_more_galleries5").show();
});
$('#add_more_galleries5').click(function(){
$(".add_more_gallery_images6").show();
$(this).hide();
$("#add_more_galleries6").show();
});
$('#add_more_galleries6').click(function(){
$(".add_more_gallery_images7").show();
$(this).hide();
$("#add_more_galleries7").show();
});
$('#add_more_galleries7').click(function(){
$(".add_more_gallery_images8").show();
$(this).hide();
$("#add_more_galleries8").show();
});
$('#add_more_galleries8').click(function(){
$(".add_more_gallery_images9").show();
$(this).hide();
$("#add_more_galleries9").show();
});
$('#add_more_galleries9').click(function(){
$(".add_more_gallery_images10").show();
$(this).hide();
$("#add_more_galleries10").show();
});
});
</script>
<button class="tf-button w-fulls" id="add_more_galleries1" type="button" style="margin-top:-20px">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries2" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries3" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries4" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries5" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries6" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries7" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries8" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries9" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<button class="tf-button w-fulls" id="add_more_galleries10" type="button" style="margin-top:-20px; display:none;">Add More +</button>
<fieldset class="gallery_images">
<div class="body-title mb-10">Upload Gallery Images</div>
<!-- gallery images start -->
<div class="add_more_gallery_images1">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery1" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery1" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery1"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery1" name="product_gallery[]"
class="product_gallery1" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery1">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images2">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery2" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery2" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery2"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery2" name="product_gallery[]"
class="product_gallery2" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery2">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images3">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery3" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery3" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery3"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery3" name="product_gallery[]"
class="product_gallery3" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery3">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images4">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery4" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery4" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery4"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery4" name="product_gallery[]"
class="product_gallery4" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery4">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images5">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery5" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery5" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery5"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery5" name="product_gallery[]"
class="product_gallery5" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery5">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images6">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery6" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery6" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery6"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery6" name="product_gallery[]"
class="product_gallery6" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery6">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images7">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery7" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery7" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery7"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery7" name="product_gallery[]"
class="product_gallery7" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery7">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images8">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery8" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery8" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery8"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery8" name="product_gallery[]"
class="product_gallery8" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery8">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images9">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery9" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery9" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery9"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery9" name="product_gallery[]"
class="product_gallery9" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery9">
</div>
</div>
</div>
<!-- gallery images end -->
<!-- gallery images start -->
<div class="add_more_gallery_images10">
<!-- start -->
<div class="upload-image mb-16">
<img id="imagePreviewGallery10" style="max-width: 100%; display:none;">
</div>
<div class="upload-image mb-16">
<button id="cropButtonGallery10" class="btn btn-warning" type="button" style="display:none;">Crop</button>
</div>
<div class="upload-image mb-16">
<div class="item">
<div id="uploadedImageGallery10"></div>
</div>
</div>
<!-- end -->
<style>.upload-image .item img{height:auto}</style>
<div class="upload-image mb-16">
<div class="item up-load">
<input type="file" id="product_gallery10" name="product_gallery[]"
class="product_gallery10" required>
<input type="hidden" name="cropped_gallery[]" id="cropped_gallery10">
</div>
</div>
</div>
<!-- gallery images end -->
</fieldset>
<br><br/>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery1').on('change', function(e) {
$('#cropButtonGallery1').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery1').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery1'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery1',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery1').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery1').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery1').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery2').on('change', function(e) {
$('#cropButtonGallery2').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery2').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery2'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery2',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery2').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery2').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery2').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery3').on('change', function(e) {
$('#cropButtonGallery3').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery3').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery3'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery3',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery3').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery3').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery3').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery4').on('change', function(e) {
$('#cropButtonGallery4').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery4').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery4'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery4',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery4').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery4').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery4').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery5').on('change', function(e) {
$('#cropButtonGallery5').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery5').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery5'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery5',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery5').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery5').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery5').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery6').on('change', function(e) {
$('#cropButtonGallery6').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery6').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery6'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery6',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery6').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery6').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery6').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery7').on('change', function(e) {
$('#cropButtonGallery7').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery7').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery7'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery7',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery7').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery7').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery7').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery8').on('change', function(e) {
$('#cropButtonGallery8').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery8').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery8'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery8',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery8').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery8').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery8').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery9').on('change', function(e) {
$('#cropButtonGallery9').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery9').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery9'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery9',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery9').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery9').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery9').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
<script>
$(document).ready(function(){
let cropper;
$('#product_gallery10').on('change', function(e) {
$('#cropButtonGallery10').show();
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
$('#imagePreviewGallery10').attr('src', e.target.result).show();
if (cropper) {
cropper.destroy();
}
cropper = new Cropper(document.getElementById('imagePreviewGallery10'), {
aspectRatio: 1, // Change ratio as needed
viewMode: 2,
preview: '#imagePreviewGallery10',
});
}
reader.readAsDataURL(file);
}
});
$('#cropButtonGallery10').on('click', function() {
if (cropper) {
cropper.getCroppedCanvas().toBlob((blob) => {
const formData = new FormData();
formData.append('image', blob);
formData.append('_token', '{{ csrf_token() }}'); // CSRF Token
$.ajax({
url: "{{route('upload_thumbnail_crop')}}",
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
let baseurl = "{{asset('/')}}";
let path = baseurl+'product_thumbnail/'+response.filename;
$('#uploadedImageGallery10').html('<img src="'+path+'" style="height:100px" />');
$('#cropped_gallery10').val(response.filename);
},
error: function() {
alert('Something went wrong!');
}
});
});
}
});
});
</script>
