User:Hagindaz/gallery.css
Jump to navigation
Jump to search
Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.
- Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
- Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5;
- Konqueror: simply click the Reload button, or press F5;
- Opera users may need to completely clear their cache in Tools→Preferences.
Warning: Malicious code can compromise your account. Page preview will cause your web browser to execute this page's content as code under some skins, including Monobook. If you have any questions about any code you plan to add, you can ask at the appropriate reading room. |
Documentation for this script can be added at User:Hagindaz/gallery. |
/**
* A style and set of classes for the <gallery> tag.
*
* A good default is:
* <gallery heights=180px widths=240px class=landscape>
* Example.png | An example image
* …
* </gallery>
*
* The size of the boxes containing images is determined by the class. Within
* its box, images are bounded by their limiting axis.
*
* For a fixed height of 180px and a variable width, don't include a class,
* and set a large width so that each image is bounded by its height:
* <gallery heights=180px widths=360px>…</gallery>
*
* The possible classes are:
* <gallery heights=180px widths=180px class=square>…</gallery>
* <gallery heights=180px widths=240px class=landscape>…</gallery>
* <gallery heights=240px widths=180px class=portrait>…</gallery>
* <gallery heights=240px widths=240px class=big-square>…</gallery>
* <gallery heights=240px widths=320px class=big-landscape>…</gallery>
* <gallery heights=320px widths=240px class=big-portrait>…</gallery>
* <gallery heights=180px widths=320px class=wide>…</gallery>
* <gallery heights=320px widths=180px class=long>…</gallery>
*
* To display the caption under each image, use the text-under class:
* <gallery heights=180px widths=240px class='landscape text-under>
* …
* </gallery>
*
* See [[Outline of U.S. History/Bridge to the 21st Century]] for an example.
*
* This file is available under CC0 1.0, viewable at
* http://creativecommons.org/publicdomain/zero/1.0/.
*/
.gallery, .gallery .thumb,
.gallery .thumb > div {
margin: 0 ! important;
padding: 0 ! important;
}
.gallerybox, .gallerybox > div, .gallerybox .thumb {
width: auto ! important;
}
.gallerybox {
vertical-align: bottom;
position: relative;
margin: 5px 0;
}
.gallerybox .gallerytext {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: white;
background-color: rgba(249, 249, 249, 0.8);
border: 1px solid #CCC;
border-top: 0;
overflow: visible;
}
.gallerybox:hover .gallerytext {
background-color: white;
border: 1px solid white;
border-top: 1px solid #CCC;
}
.gallery .gallerytext > p {
margin: 0.2em;
}
.gallery .gallerytext:empty {
display: none;
}
/* Styling of thumb */
.gallery .thumb {
height: 180px;
min-width: 135px ! important;
overflow: hidden;
}
.gallery.square .thumb {
width: 180px ! important;
}
.gallery.landscape .thumb {
width: 240px ! important;
}
.gallery.portrait .thumb {
width: 180px ! important;
height: 240px;
}
.gallery.big-square .thumb {
width: 240px ! important;
height: 240px;
}
.gallery.big-landscape .thumb {
width: 320px ! important;
height: 240px;
}
.gallery.big-portrait .thumb {
width: 240px ! important;
height: 320px;
}
.gallery.wide .thumb {
width: 320px ! important;
}
.gallery.long .thumb {
width: 180px ! important;
height: 320px;
}
/* /Styling of thumb */
/* Styling for gallery text when below image */
.gallery.text-under .gallerytext {
position: static;
background-color: transparent;
border: 0;
}
.gallery.text-under .gallerytext {
width: 125px ! important;
}
.gallery.portrait.text-under .gallerytext,
.gallery.square.text-under .gallerytext,
.gallery.long.text-under .gallerytext {
width: 170px ! important;
}
.gallery.landscape.text-under .gallerytext,
.gallery.big-square.text-under .gallerytext,
.gallery.big-portrait.text-under .gallerytext {
width: 230px ! important;
}
.gallery.wide.text-under .gallerytext,
.gallery.big-landscape.text-under .gallerytext {
width: 310px ! important;
}
/* /Styling for gallery text when below image */