本站仅供阅览使用。若需进行编辑等操作，请前往源站点。
旧画廊图片框组件代码归档

  注意：

此页面为组件页面，通常情况下禁止网站成员编辑。

特别的，如果您想要将本站组件引用至其他站点，还需额外引用[[include :lostmedia:component:css]]]引入CSS样式。

由于Wikidot的[[gallery]]模块存在兼容性问题，同时本站版式自动将图片框的浮动消去，不会存在清晰度过低情况，故决定将图片框更换为普通的仅[[image]]模块的图片框

此页面为旧代码归档

CSS

/*==========*/
/*=====图片框=====*/
/*==========*/

.scp-image-block .gallery-item{
    float: none;
    margin: 0;
    border:none;
/*    transform:translateY(1px);*/
}

.scp-image-block .gallery-box , .scp-image-block .gallery-item , .scp-image-block .gallery-item table , .scp-image-block .gallery-item tbody , .scp-image-block .gallery-item tr  , .scp-image-block .gallery-item td , .scp-image-block .gallery-item a , .scp-image-block .gallery-item img{
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

#page-content .scp-image-block .gallery-box a{
    box-shadow: unset !important;
}

#lightbox-container-image-box{
    width: auto !important;
    height: auto !important;
    background-color: rgba(var(--text-black),0);
}

#lightbox-container-image-data-box{
    width: auto !important;
}

#lightbox-container-image-data-box{
    display:none !important;
}

.scp-image-block-gallery .scp-image-caption {
    border-top: rgba(var(--imageblock-border-color)) var(--imageblock-border-width) solid;
}

/*修手机端不居中问题*/

@media only screen and (max-width: 540px)
.scp-image-block:is(.block-right, .block-left) {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/*==========*/
/*=====警告图片、过长图片=====*/
/*==========*/

.image-block-warn * , .image-block-long *{
display:block;
}

.image-block-warn-text,.image-block-warn-text-main , .image-block-long-text,.image-block-long-text-main{
display:none;
}

/*超绝has加样式*/

/*warn*/

@supports selector(:has(*)) {

.image-block-warn{
    display:block;
    border: solid 2px rgba(var(--warning-color));
    background: rgba(var(--background-color));
}

.image-block-warn-text{
    display: inline-block; padding: 3px; font-size: 1.25rem; background: rgba(var(--warning-color)); color: rgba(var(--warning-text-color)); font-weight: bold;
}

.image-block-warn-text-main{
    display:block;
    margin: 3px;
}

.image-block-warn:has(.collapsible-block-folded[style="display: none;"]){
    border: none;
}

.image-block-warn:has(.collapsible-block-folded[style="display: none;"]) .image-block-warn-text,.image-block-warn:has(.collapsible-block-folded[style="display: none;"]) .image-block-warn-text-main{
    display:none;
}

/*long*/

.image-block-long{
    display:block;
    border: solid 2px rgba(var(--text-color));
    background: rgba(var(--background-color));
}

.image-block-long-text{
    display: inline-block; padding: 3px; font-size: 1.25rem; background: rgba(var(--text-color)); color: rgba(var(--background-color)); font-weight: bold;
}

.image-block-long-text-main{
    display:block;
    margin: 3px;
}

.image-block-long:has(.collapsible-block-folded[style="display: none;"]){
    border: none;
}

.image-block-long:has(.collapsible-block-folded[style="display: none;"]) .image-block-long-text,.image-block-long:has(.collapsible-block-folded[style="display: none;"]) .image-block-long-text-main{
    display:none;
}

        }

/*折叠样式*/

.image-block-warn .collapsible-block-unfolded .collapsible-block-unfolded-link , .image-block-long .collapsible-block-unfolded .collapsible-block-unfolded-link{
    margin: 0 0 0 0;
}

.image-block-warn .collapsible-block , .image-block-long .collapsible-block{
    margin: 0 0 0 0 !important;
}

.image-block-warn a.collapsible-block-link , .image-block-long a.collapsible-block-link{
    color: rgba(var(--link-color));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.image-block-warn a.collapsible-block-link:before , .image-block-long a.collapsible-block-link:before{
    content:""
}

.image-block-warn .collapsible-block-content script , .image-block-long .collapsible-block-content script{
    display:none;
}

/*===太好了是图片框高清修复，我们有救了===*/

.scp-image-block-gallery .scp-image-block {
  position: relative;
  display: inline-block;
}

.scp-image-block-gallery  .gallery-image-size-medium {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}

.scp-image-block-gallery .scp-image-block .scp-image-block-img-position{
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  z-index: 2;
  pointer-events: none !important;
/*  background: rgba(var(--background-color));*/
}

.scp-image-block-gallery .scp-image-block:not(.scp-image-block-long,scp-image-block-warn) .scp-image-block-img-position{
    width: min-content;
}

.scp-image-block-gallery .scp-image-block .scp-image-block-img-position img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

.scp-image-block-gallery .scp-image-caption-position{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}

.scp-image-block-gallery .scp-image-caption {
  box-sizing: border-box;
  background: rgba(var(--imageblock-caption-background-color));
  color: rgba(var(--imageblock-caption-text-color));
  padding: 0.2em 1em;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}

/* warn 和 long 的高清适配 */

.image-block-warn .collapsible-block-content , .image-block-long .collapsible-block-content{
    padding-top: 20px;
}

.image-block-warn .scp-image-block-img-position , .image-block-long .scp-image-block-img-position{
    margin-top: 20px;
    top: 30px;
}

.image-block-warn .gallery-item a.with-lb , .image-block-warn .gallery-item img.gallery-image-size-medium , .image-block-long .gallery-item a.with-lb , .image-block-long .gallery-item img.gallery-image-size-medium{
    margin-bottom: -20px;
}

图片框

版本15

[[div class="scp-image-block block-{$align}" style="width:{$width};height:{$img-height};"]]
[[gallery size="medium"]]
: {$name}
[[/gallery]]
[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]

[[module css]]
.scp-image-block .gallery-item{
    float: none;
    margin: 0;
    border:none;
    transform:translateY(1px);
}

.scp-image-block.gallery-box,
.scp-image-block.gallery-item,
.scp-image-block.gallery-item table,
.scp-image-block.gallery-item tbody,
.scp-image-block.gallery-item tr,
.scp-image-block.gallery-item td,
.scp-image-block.gallery-item a,
.scp-image-block.gallery-item img {
    -webkit-width: 100% !important;
    width: 100% !important;
    -webkit-height: auto !important;
    height: auto !important;
    -webkit-max-height: 100% !important;
    max-height: 100% !important;
    -webkit-max-width: none !important;
    max-width: none !important;
    table-layout: fixed;
    object-fit: contain;
}

#page-content .scp-image-block .gallery-box a{
    box-shadow: unset !important;
}

#lightbox-container-image-box{
    width: auto !important;
    height: auto !important;
    background-color: rgba(var(--bb-black),0);
}

#lightbox-container-image-data-box{
    width: auto !important;
}

#lightbox-container-image-data-box{
    display:none !important;
}
[[/module]]

版本54

[[div class="scp-image-block-gallery"]]
[[div class="scp-image-block block-{$align}" style="width:{$width};"]]
[[gallery size="medium"]]
: {$name}
[[/gallery]]
[[div class="scp-image-block-img-position"]]
[[image {$name} class="覆盖缩略图上的图像"]]
[[/div]]
[[div class="scp-image-caption-position" style="width:100%;"]]

[[/div]]
[[div class="scp-image-caption" style="width:100%;"]]
{$caption}
[[/div]]
[[/div]]
[[/div]]

警告图片拦截组件

版本19

[[div class="scp-image-block block-{$align}" style="width:{$width};"]]

[[div class="image-block-warn"]]

[[div_ class="image-block-warn-text"]]
此图片含{$text}内容
[[/div]]

[[div class="image-block-warn-text-main"]]
本图包含限制级内容，可能不适合未满18周岁者阅读。若你符合年龄限制要求并愿意继续阅读，请点击下方的按钮继续查看。
[[/div]]

[[collapsible show="此图片含有{$text}内容，仍要观看" hide="折叠"]]

[[gallery size="medium"]]
: {$name}
[[/gallery]]

[[/collapsible]]

[[/div]]

[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]

[[module css]]

.image-block-warn *{
display:block;
}

.image-block-warn-text,.image-block-warn-text-main{
display:none;
}

/*超绝has加样式*/

@supports selector(:has(*)) {

.image-block-warn{
    display:block;
    border: solid 2px rgba(var(--warning-color));
}

.image-block-warn-text{
    display: inline-block; padding: 3px; font-size: 1.25rem; background: rgba(var(--warning-color)); color: rgba(var(--warning-text-color)); font-weight: bold;
}

.image-block-warn-text-main{
    display:block;
    margin: 3px;
}

.image-block-warn:has(.collapsible-block-folded[style="display: none;"]){
    border: none;
}

.image-block-warn:has(.collapsible-block-folded[style="display: none;"]) .image-block-warn-text,.image-block-warn:has(.collapsible-block-folded[style="display: none;"]) .image-block-warn-text-main{
    display:none;
}

}

/*折叠样式*/

.image-block-warn .collapsible-block-unfolded .collapsible-block-unfolded-link{
    margin: 0 0 0 0;
}

.image-block-warn .collapsible-block{
    margin: 0 0 0 0 !important;
}

.image-block-warn a.collapsible-block-link{
    color: rgba(var(--link-color));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.image-block-warn a.collapsible-block-link:before{
    content:""
}

/*卧槽最神奇的一季，突然爆出了个JS代码*/
/*好奇的可以复制到别的地方然后把下面的CSS去了*/
.image-block-warn .collapsible-block-content script{
    display:none;
}

/*原组件样式*/

.scp-image-block .gallery-item{
    float: none;
    margin: 0;
    border:none;
    transform:translateY(1px);
}

.scp-image-block .gallery-box , .scp-image-block .gallery-item , .scp-image-block .gallery-item table , .scp-image-block .gallery-item tbody , .scp-image-block .gallery-item tr  , .scp-image-block .gallery-item td , .scp-image-block .gallery-item a , .scp-image-block .gallery-item img{
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    max-width: 100% !important;
}

#page-content .scp-image-block .gallery-box a{
    box-shadow: unset !important;
}

#lightbox-container-image-box{
    width: auto !important;
    height: auto !important;
    background-color: rgba(var(--bb-black),0);
}

#lightbox-container-image-data-box{
    width: auto !important;
}

#lightbox-container-image-data-box{
    display:none !important;
}
[[/module]]

版本21

[[div class="scp-image-block-gallery"]]
[[div class="scp-image-block block-{$align}" style="width:{$width};"]]

[[div class="image-block-warn"]]

[[div_ class="image-block-warn-text"]]
此图片含{$text}内容
[[/div]]

[[div class="image-block-warn-text-main"]]
本图包含限制级内容，可能不适合未满18周岁者阅读。若你符合年龄限制要求并愿意继续阅读，请点击下方的按钮继续查看。
[[/div]]

[[collapsible show="此图片含有{$text}内容，仍要观看" hide="折叠"]]

[[gallery size="medium"]]
: {$name}
[[/gallery]]

[[div class="scp-image-block-img-position"]]
[[image {$name} class="覆盖缩略图上的图像"]]
[[/div]]
[[div class="scp-image-caption-position" style="width:{$width};"]]
[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]

[[/collapsible]]

[[/div]]

[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]
[[/div]]

过长图片折叠组件与警告图片拦截组件视为同结构，仅将-warn更换为-long

component
页面版本: 2, 最后编辑于: 30 Apr 2025 14:37
编辑 标签 讨论 历史记录 附件 打印 网站工具 + 选项
本页内容采用授权方式参见授权指导 失传媒体中文维基 © 2024-2026