pictures using carousel
This commit is contained in:
parent
98a9ec2b65
commit
e5d416f696
|
@ -40,7 +40,8 @@ Apply to: Main window (address bar)
|
||||||
* Add custom amount of videos per page
|
* Add custom amount of videos per page
|
||||||
|
|
||||||
## Credits
|
## Credits
|
||||||
[TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
|
* [TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
|
||||||
|
* [Jennifer Wjertzoch](https://wjertzochjennifer.medium.com): Carousel CSS Implementation
|
||||||
|
|
||||||
### External libraries
|
### External libraries
|
||||||
* [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
|
* [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "pablouser1/proxitok",
|
"name": "pablouser1/proxitok",
|
||||||
"description": "An alternative frontend for TikTok",
|
"description": "An alternative frontend for TikTok",
|
||||||
"version": "2.4.8.0",
|
"version": "2.4.8.1",
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
"type": "project",
|
"type": "project",
|
||||||
"authors": [
|
"authors": [
|
||||||
|
|
2
composer.lock
generated
2
composer.lock
generated
|
@ -4,7 +4,7 @@
|
||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "edc1f7ddb80ad13369e0536c32518ece",
|
"content-hash": "15a71acabddd2588be9800ae1bb37c92",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "bramus/router",
|
"name": "bramus/router",
|
||||||
|
|
68
styles/carousel.css
Normal file
68
styles/carousel.css
Normal file
|
@ -0,0 +1,68 @@
|
||||||
|
/*
|
||||||
|
CREDITS:
|
||||||
|
CSS Taken from: https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
|
||||||
|
Author: Jennifer Wjertzoch (https://wjertzochjennifer.medium.com)
|
||||||
|
CodePen: https://codepen.io/jwjertzoch/pen/JjyGeRy
|
||||||
|
*/
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
|
scroll-snap-type: x mandatory;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides-item {
|
||||||
|
max-height: 75vh;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 1rem;
|
||||||
|
position: relative;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
transform: scale(1);
|
||||||
|
transform-origin: center center;
|
||||||
|
transition: transform .5s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides-item img {
|
||||||
|
max-height: 75vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__nav {
|
||||||
|
padding: 1.25rem .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-nav {
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ddd;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #000;
|
||||||
|
display: inline-flex;
|
||||||
|
height: 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
padding: .5rem;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-nav:hover,
|
||||||
|
.slider-nav:active {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
|
@ -31,5 +31,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
<link rel="stylesheet" href="{static('css', 'cssgg.min.css', true)}">
|
<link rel="stylesheet" href="{static('css', 'cssgg.min.css', true)}">
|
||||||
<link rel="stylesheet" href="{static('css', 'bulma.min.css', true)}">
|
<link rel="stylesheet" href="{static('css', 'bulma.min.css', true)}">
|
||||||
|
<link rel="stylesheet" href="{static('css', 'carousel.css')}">
|
||||||
<title>{$title} - ProxiTok</title>
|
<title>{$title} - ProxiTok</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -3,17 +3,19 @@
|
||||||
<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
|
<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
{else}
|
{else}
|
||||||
<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
|
<section class="carousel" aria-label="carousel" Tabindex="0">
|
||||||
{foreach $item->imagePost->images as $image}
|
<div class="slides">
|
||||||
{if $isBig}
|
{foreach $item->imagePost->images as $i => $image}
|
||||||
<div class="column is-half">
|
<div class="slides-item" id="image-{$i + 1}" tabindex="0">
|
||||||
{else}
|
<img src="{url_stream($image->imageURL->urlList[0])}" />
|
||||||
<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
|
</div>
|
||||||
{/if}
|
{/foreach}
|
||||||
<figure class="image">
|
</div>
|
||||||
<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{url_stream($image->imageURL->urlList[0])}" />
|
<div class="carousel__nav">
|
||||||
</figure>
|
{for $i = 0; $i < count($item->imagePost->images); $i++}
|
||||||
</div>
|
<a class="slider-nav" href="#image-{$i + 1}">{$i + 1}</a>
|
||||||
{/foreach}
|
{/for}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
|
||||||
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
Loading…
Reference in a new issue