https://makerspace.cc/wiki/index.php?action=history&feed=atom&title=Widget%3AGallery
Widget:Gallery - Revision history
2026-05-06T17:50:21Z
Revision history for this page on the wiki
MediaWiki 1.42.7
https://makerspace.cc/wiki/index.php?title=Widget:Gallery&diff=7&oldid=prev
Ajhg: Ajhg moved page Widgets:gallery to Widget:Gallery without leaving a redirect: wrong before
2021-05-04T14:53:36Z
<p>Ajhg moved page <a href="/wiki/index.php?title=Widgets:gallery&action=edit&redlink=1" class="new" title="Widgets:gallery (page does not exist)">Widgets:gallery</a> to <a href="/Widget:Gallery" title="Widget:Gallery">Widget:Gallery</a> without leaving a redirect: wrong before</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:53, 4 May 2021</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Ajhg
https://makerspace.cc/wiki/index.php?title=Widget:Gallery&diff=2&oldid=prev
Ajhg: Created page with "<style> .cc-gallery { --tot-wid: min(calc(95vmin - 5em), 50vmax); --tot-hgt: 30vmax; position: relative; overflow: hidden; display: flex; background-color: #000;..."
2021-05-03T21:10:12Z
<p>Created page with "<style> .cc-gallery { --tot-wid: min(calc(95vmin - 5em), 50vmax); --tot-hgt: 30vmax; position: relative; overflow: hidden; display: flex; background-color: #000;..."</p>
<p><b>New page</b></p><div><style><br />
<br />
.cc-gallery {<br />
--tot-wid: min(calc(95vmin - 5em), 50vmax);<br />
--tot-hgt: 30vmax;<br />
position: relative;<br />
overflow: hidden;<br />
display: flex;<br />
background-color: #000;<br />
--gal-hgt: var(--tot-hgt);<br />
--gal-wid: calc(7 * var(--tot-wid) / 8);<br />
--thumb-wid: calc(var(--tot-wid) / 8);<br />
border-radius: .5em;<br />
border: 2px #333 solid;<br />
width: var(--tot-wid);<br />
height: var(--tot-hgt);<br />
}<br />
<br />
.cc-gallery[class*="<!--{$num|validate:'int'}-->"] {<br />
--gal-wid: var(--tot-wid);<br />
--thumb-wid: 0;<br />
}--><br />
<br />
.cc-gallery img {<br />
all: unset;<br />
}<br />
<br />
.cc-gallery li {<br />
list-style-type: none;<br />
}<br />
<br />
.cc-gallery *,<br />
.cc-gallery *::before,<br />
.cc-gallery *::after {<br />
box-sizing: inherit;<br />
margin: 0;<br />
padding: 0;<br />
}<br />
<br />
.cc-gallery .thumbnails {<br />
width: var(--thumb-wid);<br />
height: var(--gal-hgt);<br />
display: flex;<br />
flex-direction: column;<br />
line-height: 0;<br />
background-color: black;<br />
position: absolute;<br />
right: 1em;<br />
}<br />
<br />
.cc-gallery .thumbnails li {<br />
flex: auto;<br />
position: relative;<br />
z-index: 1;<br />
list-style-type: none;<br />
display: block;<br />
}<br />
<br />
.cc-gallery .thumbnails li:nth-of-type(n+<!--{$num|validate:'int'}-->) { <br />
display: none;<br />
}<br />
<br />
.cc-gallery .thumbnails a {<br />
display: block;<br />
overflow: hidden;<br />
}<br />
<br />
.cc-gallery .thumbnails img {<br />
width: var(--thumb-wid);<br />
height: calc(var(--gal-hgt) / <!--{$num|validate:'int'}-->);<br />
object-fit: contain;<br />
object-position: center center;<br />
}<br />
<br />
<br />
.cc-gallery .slides {<br />
overflow: hidden;<br />
width: calc(var(--gal-wid) - var(--thumb-wid));<br />
height: var(--gal-hgt);<br />
position: absolute;<br />
left: 0;<br />
}<br />
<br />
.cc-gallery .slides li {<br />
width: calc(var(--gal-wid) - var(--thumb-wid));<br />
height: var(--gal-hgt);<br />
position: absolute;<br />
background-color: #000;<br />
z-index: 1;<br />
overflow:hidden;<br />
}<br />
<br />
/*.cc-gallery .slides li:nth-of-type(n+<!--{$num|escape:'html'}-->) {<br />
display: none;<br />
}*/<br />
<br />
.cc-gallery .slides img {<br />
width: calc(var(--gal-wid) - var(--thumb-wid));<br />
height: 100%;<br />
object-fit: contain;<br />
object-position: 50% 50%;<br />
}<br />
<br />
.cc-gallery .slides img[src*="$img"] {<br />
display: none;<br />
}<br />
<br />
.cc-gallery .slides li:target {<br />
z-index: 3;<br />
-webkit-animation: fade .5s 1;<br />
}<br />
<br />
.cc-gallery .slides li:not(:target) {<br />
-webkit-animation: hidden .5s 1;<br />
}<br />
<br />
@keyframes fade {<br />
0% {<br />
/*transform: translateY(-100%);*/<br />
opacity:0;<br />
}<br />
100% {<br />
/*transform: translateY(0%);*/<br />
opacity:1;<br />
}<br />
}<br />
<br />
@keyframes hidden {<br />
0% {<br />
z-index: 2;<br />
}<br />
100% {<br />
z-index: 2;<br />
}<br />
}<br />
<br />
@keyframes spinner {<br />
to {transform: rotate(360deg);}<br />
}<br />
<br />
.cc-gallery .slides li:before {<br />
content: '';<br />
box-sizing: border-box;<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
width: 20px;<br />
height: 20px;<br />
margin-top: -10px;<br />
margin-left: -10px;<br />
border-radius: 50%;<br />
border: 2px solid #ccc;<br />
border-top-color: #000;<br />
animation: spinner .6s linear infinite;<br />
z-index: -1;<br />
}<br />
<br />
.cc-gallery .thumbnails li:before {<br />
content: '';<br />
box-sizing: border-box;<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
width: 20px;<br />
height: 20px;<br />
margin-top: -10px;<br />
margin-left: -10px;<br />
border-radius: 50%;<br />
border: 2px solid #ccc;<br />
border-top-color: #000;<br />
animation: spinner .6s linear infinite;<br />
z-index: -1;<br />
}<br />
</style><br />
<br />
<div class="cc-gallery"><br />
<ul class="slides"><br />
<li id="slide5" class="spinner"><img src='<!--{$img5|escape:'html'}-->'/></li><br />
<li id="slide4" class="spinner"><img src='<!--{$img4|escape:'html'}-->' /></li><br />
<li id="slide3" class="spinner"><img src='<!--{$img3|escape:'html'}-->' /></li><br />
<li id="slide2" class="spinner"><img src='<!--{$img2|escape:'html'}-->' /></li><br />
<li id="slide1" class="spinner"><img src='<!--{$img1|escape:'html'}-->' /></li><br />
</ul><br />
<ul class="thumbnails"><br />
<li><a href="#slide1"><img src='<!--{$img1|escape:'html'}-->' link="#slide1" /></a></li><br />
<li><a href="#slide2"><img src='<!--{$img2|escape:'html'}-->' link="#slide2" /></a></li><br />
<li><a href="#slide3"><img src='<!--{$img3|escape:'html'}-->' link="#slide3" /></a></li><br />
<li><a href="#slide4"><img src='<!--{$img4|escape:'html'}-->' link="#slide4" /></a></li><br />
<li><a href="#slide5"><img src='<!--{$img5|escape:'html'}-->' link="#slide5" /></a></li><br />
</ul><br />
</div></div>
Ajhg