More actions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<includeonly> | <includeonly> | ||
<ul class="template gallery" {{#if:{{{perrow|}}}|style="width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}}px"}}> | <ul class="template gallery" id="{{{id|mygallery}}}" {{#if:{{{perrow|}}}|style="width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}+10)*{{{perrow}}}}}px"}}> | ||
{{#if:{{{caption|}}}|<li class="gallerycaption">{{{caption}}}</li>}} | {{#if:{{{caption|}}}|<li class="gallerycaption">{{{caption}}}</li>}} | ||
{{#forargs:|k|v|{{#rmatch:{{#var:k}}|^\d+$|{{#ifeq:{{#expr:{{#var:k}} mod 2}}|1|<li class="gallerybox"><div class="thumb">[[{{#var:v}}]]</div><div class="gallerytext"><p>|{{#var:v}}</p></div></li>}}}}}} | {{#forargs:|k|v|{{#rmatch:{{#var:k}}|^\d+$|{{#ifeq:{{#expr:{{#var:k}} mod 2}}|1|<li class="gallerybox"><div class="thumb">[[{{#var:v}}]]</div><div class="gallerytext"><p>|{{#var:v}}</p></div></li>}}}}}} | ||
Line 8: | Line 8: | ||
|{{#vardefineecho:gallery | |{{#vardefineecho:gallery | ||
|{{#css: | |{{#css: | ||
ul.gallery.template{ | ul#{{{id|mygallery}}}.gallery.template{ | ||
margin:2px;padding:2px; | margin:2px;padding:2px; | ||
} | } | ||
ul.gallery.template li.gallerycaption{ | ul#{{{id|mygallery}}}.gallery.template li.gallerycaption{ | ||
font-weight:bold;text-align:center;word-wrap:break-word | font-weight:bold;text-align:center;word-wrap:break-word | ||
} | } | ||
ul.gallery.template li.gallerybox{ | ul#{{{id|mygallery}}}.gallery.template li.gallerybox{ | ||
vertical-align:top;display:inline-flex;flex-direction:column; | vertical-align:top;display:inline-flex;flex-direction:column; | ||
} | } | ||
ul.gallery.template li.gallerybox div.thumb{ | ul#{{{id|mygallery}}}.gallery.template li.gallerybox div.thumb{ | ||
width:{{{width|150px}}}; | width:{{{width|150px}}}; | ||
height:{{{height|150px}}}; | height:{{{height|150px}}}; | ||
Line 27: | Line 27: | ||
align-items:center;margin:4px; | align-items:center;margin:4px; | ||
} | } | ||
ul.gallery.template li.gallerybox div.thumb img{ | ul#{{{id|mygallery}}}.gallery.template li.gallerybox div.thumb img{ | ||
width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-10)}}px; | width:{{#expr:({{#rmatch:{{{width|150px}}}|(\d+)|$1}}-10)}}px; | ||
height:{{#expr:({{#rmatch:{{{height|150px}}}|(\d+)|$1}}-10)}}px; | height:{{#expr:({{#rmatch:{{{height|150px}}}|(\d+)|$1}}-10)}}px; | ||
object-fit:contain;margin:0 auto; | object-fit:contain;margin:0 auto; | ||
} | } | ||
ul.gallery.template div.gallerytext{ | ul#{{{id|mygallery}}}.gallery.template div.gallerytext{ | ||
overflow:hidden;font-size:94%;padding:2px 4px;word-wrap:break-word;text-align:center; | overflow:hidden;font-size:94%;padding:2px 4px;word-wrap:break-word;text-align:center; | ||
} | } | ||
}}}}}} | }}}}}} | ||
</includeonly> | </includeonly> | ||
<noinclude> | <noinclude> | ||
<!-- 简述模板作用 --> | <!-- 简述模板作用 --> |
Revision as of 18:49, 1 August 2024
标签 <gallery> 的替代品,支持gif动图
使用方法
调用参数
{{gallery|caption=<caption>|width=<width>|height=<height>|perrow=<perrow> |file1|title1 |file2|title2 … |fileN|titleN }}
必填
- file:图片名
选填
- caption:gallery的标题
- width:宽(单位:px)
- height:高(单位:px)
- perrow:每行显示数量
- title:图片提示文字
示例2
你所写的
{{gallery|caption=标题|width=300px|height=200px|perrow=2 |file:Main MPI3508.jpg|文字描述 |file:4.0-HDMI-004.jpg|可以指向[[首页]] |file:4.0-HDMI-004.jpg| }}
显示内容
- 标题
文字描述
可以指向首页