Jump to content

Snippets/Circle or Oval Gallery

From mediawiki.org
How to use Snippets
List of Snippets
Circle or Oval Gallery
Language(s): CSS
Compatible with: MediaWiki 1.22+ (all)

Description

[edit]

Enables an end user to post an image or image gallery that is a circle or oval shape (depends on the height width ratio since Mediawiki preserves the ratio). Tested in the Foreground skin, but should work in all Mediawiki skins. Will work with all Mediawiki galleries, Semantic Mediawiki Galleries, the Javascript Slideshow Extension, Snippets/Sliding Image, Text or Gallery, Snippets/Sliding Image Gallery, Snippets/Pinterest Like Gallery, and I assume all other Gallery types. Additionally, it can be combined with Snippets/Image Expand on Hover to expand the image.

Visual Example

[edit]

Circular Gallery:

Usage

[edit]

The circle or oval gallery CSS can be used with any Mediawiki Gallery or Image just enclose the gallery or image between the divisors:<div class="circular"> </div>.


Example:

<div class="circular">
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>
</div>


Code

[edit]

Circle or Oval Image and/or Gallery.css

/* CSS Sliding Image Gallery for Mediawiki
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites.
 */

.circular img {
border-radius: 50%;
}