second display image slider fit center

This commit is contained in:
Thein Lin Kyaw
2023-07-06 16:52:56 +06:30
parent 9357588122
commit e74828d03f
6 changed files with 333 additions and 307 deletions

View File

@@ -1,9 +1,8 @@
<div class="row clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card">
<div class="card-block">
<div class="card-text" >
<div class="card">
<div class="card-block">
<div class="card-text" >
<div id="order-detail-slimscroll" data-height="160">
<table class="table table-striped second_display_items" id="order-items-table">
<thead>
@@ -19,49 +18,46 @@
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer">
<table class="table" border="0">
<tr>
<td class="charges-name"><strong>Sub Total:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Discount Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Tax Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Grand:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div id="wowslider-container" style="max-width: 100%;">
<div class="ws_images full_screen">
<% @display_images.each do |p| %>
<%= image_tag "#{p.image}", :alt => "rss feed"%>
<% break %>
<% end %>
</div>
<div class="card-footer">
<table class="table" border="0">
<tr>
<td class="charges-name"><strong>Sub Total:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Discount Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Tax Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Grand:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6" style="display: block;">
<section class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides">
<%= image_tag "#{p.image}" %>
</div>
<% end %>
</section>
</div>
</div>

View File

@@ -1,106 +1,7 @@
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;
overflow: hidden;}
.mySlides {
position: absolute;
}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
50% { opacity: 1; }
100% {
opacity: 0;
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides slide-out">
<%= image_tag "#{p.image}", :class=> "w-100"%>
</div>
<div class="mySlides">
<%= image_tag "#{p.image}" %>
</div>
<% end %>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
setTimeout(showSlides, 4000); // Change image every 5 seconds
}
</script>

View File

@@ -1,4 +1,94 @@
<div class="container-fluid" style="margin-top:-65px;">
<style>
* {box-sizing: border-box;}
body {
font-family: Verdana, sans-serif;
overflow: hidden;
}
.mySlides {
position: absolute;
height: 100%;
width: 100%;
display: none;
}
.mySlides img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
display: block;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
display: block;
}
@keyframes slide-in {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes slide-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<div class="container-fluid">
<button type="button" class="hidden" id="s_reload">Reload</button>
<div class="slider" id="second_display_slider">
<%= render 'slider' %>
@@ -8,13 +98,40 @@
<%= render 'second_display' %>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//html font-size for second display till 35px!
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
//html font-size for second display till 35px!
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
$('#s_reload').on('click', function () {
window.location.href = '/foodcourt/second_display';
});
$('#s_reload').on('click', function () {
window.location.href = '/origami/second_display';
});
});
showSlides("second_display_slider");
showSlides("second_display_items");
function showSlides(sliderId) {
let slider = document.getElementById(sliderId);
let slides = slider.getElementsByClassName("mySlides");
let slideIndex = slider.dataset.slideIndex;
slideIndex++;
if (!slideIndex || slideIndex >= slides.length) {
slideIndex = 0;
}
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
console.log(slideIndex);
slides[slideIndex].classList.remove("slide-out");
slides[slideIndex].classList.add("slide-in");
slider.dataset.slideIndex = slideIndex;
setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
}
</script>

View File

@@ -1,9 +1,8 @@
<div class="row clearfix">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="card">
<div class="card-block">
<div class="card-text" >
<div class="card">
<div class="card-block">
<div class="card-text" >
<div id="order-detail-slimscroll" data-height="160">
<table class="table table-striped second_display_items" id="order-items-table">
<thead>
@@ -19,49 +18,46 @@
</tbody>
</table>
</div>
</div>
</div>
<div class="card-footer">
<table class="table" border="0">
<tr>
<td class="charges-name"><strong>Sub Total:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Discount Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Tax Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Grand:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div id="wowslider-container" style="max-width: 100%;">
<div class="ws_images full_screen">
<% @display_images.each do |p| %>
<%= image_tag "#{p.image}", :alt => "rss feed"%>
<% break %>
<% end %>
</div>
<div class="card-footer">
<table class="table" border="0">
<tr>
<td class="charges-name"><strong>Sub Total:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_sub_total">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Discount Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_total_discount">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Tax Amount:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_tatal_tax">0.00</strong></td>
</tr>
<tr>
<td class="charges-name"><strong>Grand:</strong></td>
<td></td>
<td></td>
<td class="item-attr"><strong id="s_grand_total">0.00</strong></td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6" style="display: block;">
<section class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides">
<%= image_tag "#{p.image}" %>
</div>
<% end %>
</section>
</div>
</div>

View File

@@ -1,106 +1,7 @@
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;
overflow: hidden;}
.mySlides {
position: absolute;
}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
}
@keyframes slide-in {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
50% { opacity: 1; }
100% {
opacity: 0;
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<% @display_images.each do |p| %>
<div class="mySlides slide-out">
<%= image_tag "#{p.image}", :class=> "w-100"%>
</div>
<div class="mySlides">
<%= image_tag "#{p.image}" %>
</div>
<% end %>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].className = slides[slideIndex - 1].className.replace("slide-out", "slide-in");
setTimeout(showSlides, 4000); // Change image every 5 seconds
}
</script>

View File

@@ -1,22 +1,137 @@
<div class="container-fluid" style="margin-top:-65px;">
<style>
* {box-sizing: border-box;}
body {
font-family: Verdana, sans-serif;
overflow: hidden;
}
.mySlides {
position: absolute;
height: 100%;
width: 100%;
display: none;
}
.mySlides img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.slide-in {
animation-name: slide-in;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
display: block;
}
.slide-out {
animation-name: slide-out;
animation-duration: 2s; /* Adjust the duration as per your preference */
animation-fill-mode: forwards;
display: block;
}
@keyframes slide-in {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes slide-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<div class="container-fluid">
<button type="button" class="hidden" id="s_reload">Reload</button>
<div class="slider" id="second_display_slider">
<%= render 'slider' %>
</div>
<div class="item hidden" id="second_display_items">
<%= render 'second_display' %>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//html font-size for second display till 35px!
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
//html font-size for second display till 35px!
// document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "35px";
$('#s_reload').on('click', function () {
window.location.href = '/origami/second_display';
});
$('#s_reload').on('click', function () {
window.location.href = '/origami/second_display';
});
});
showSlides("second_display_slider");
showSlides("second_display_items");
function showSlides(sliderId) {
let slider = document.getElementById(sliderId);
let slides = slider.getElementsByClassName("mySlides");
let slideIndex = slider.dataset.slideIndex;
slideIndex++;
if (!slideIndex || slideIndex >= slides.length) {
slideIndex = 0;
}
for (let i = 0; i < slides.length; i++) {
slides[i].className = slides[i].className.replace("slide-in", "slide-out");
}
console.log(slideIndex);
slides[slideIndex].classList.remove("slide-out");
slides[slideIndex].classList.add("slide-in");
slider.dataset.slideIndex = slideIndex;
setTimeout(showSlides, 5000, sliderId); // Change image every 5 seconds
}
</script>