pictures using carousel
This commit is contained in:
Pablo Ferreiro
parent
98a9ec2b65
commit
e5d416f696
|
|
@ -40,7 +40,8 @@ Apply to: Main window (address bar)
|
|||
* Add custom amount of videos per page
|
||||
|
||||
## 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
|
||||
* [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "pablouser1/proxitok",
|
||||
"description": "An alternative frontend for TikTok",
|
||||
"version": "2.4.8.0",
|
||||
"version": "2.4.8.1",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"type": "project",
|
||||
"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",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "edc1f7ddb80ad13369e0536c32518ece",
|
||||
"content-hash": "15a71acabddd2588be9800ae1bb37c92",
|
||||
"packages": [
|
||||
{
|
||||
"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}
|
||||
<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', 'carousel.css')}">
|
||||
<title>{$title} - ProxiTok</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,19 @@
|
|||
<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
|
||||
</video>
|
||||
{else}
|
||||
<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
|
||||
{foreach $item->imagePost->images as $image}
|
||||
{if $isBig}
|
||||
<div class="column is-half">
|
||||
{else}
|
||||
<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
|
||||
{/if}
|
||||
<figure class="image">
|
||||
<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{url_stream($image->imageURL->urlList[0])}" />
|
||||
</figure>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
<section class="carousel" aria-label="carousel" Tabindex="0">
|
||||
<div class="slides">
|
||||
{foreach $item->imagePost->images as $i => $image}
|
||||
<div class="slides-item" id="image-{$i + 1}" tabindex="0">
|
||||
<img src="{url_stream($image->imageURL->urlList[0])}" />
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
<div class="carousel__nav">
|
||||
{for $i = 0; $i < count($item->imagePost->images); $i++}
|
||||
<a class="slider-nav" href="#image-{$i + 1}">{$i + 1}</a>
|
||||
{/for}
|
||||
</div>
|
||||
<div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
|
||||
</section>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Reference in a new issue