2.18 Ajout d'effets + masque du thème
This commit is contained in:
Fred Tempez
parent
79318d0408
commit
844acd8c8a
@ -19,6 +19,21 @@ class gallery extends common {
|
||||
const SORT_ASC = 'SORT_ASC';
|
||||
const SORT_DSC = 'SORT_DSC';
|
||||
const SORT_HAND = 'SORT_HAND';
|
||||
const GALLERY_VERSION = '2.18';
|
||||
|
||||
public static $directories = [];
|
||||
|
||||
public static $firstPictures = [];
|
||||
|
||||
public static $galleries = [];
|
||||
|
||||
public static $galleriesId = [];
|
||||
|
||||
public static $pictures = [];
|
||||
|
||||
public static $picturesId = [];
|
||||
|
||||
public static $thumbs = [];
|
||||
|
||||
public static $actions = [
|
||||
'config' => self::GROUP_MODERATOR,
|
||||
@ -51,64 +66,65 @@ class gallery extends common {
|
||||
];
|
||||
|
||||
public static $galleryThemeSize = [
|
||||
'9em' => 'Très petite (9em)',
|
||||
'12em' => 'Petite (12em)',
|
||||
'15em' => 'Moyenne (15em)',
|
||||
'18em' => 'Grande (18em)',
|
||||
'21em' => 'Très grande (21em)'
|
||||
'9em' => 'Très petite',
|
||||
'12em' => 'Petite',
|
||||
'15em' => 'Moyenne',
|
||||
'18em' => 'Grande',
|
||||
'21em' => 'Très grande'
|
||||
];
|
||||
|
||||
public static $galleryThemeLegendHeight = [
|
||||
'.125em' => 'Très petite (.125 em)',
|
||||
'.25em' => 'Petite (.25em)',
|
||||
'.375em' => 'Moyenne (.375em)',
|
||||
'.5em' => 'Grande (.5em)',
|
||||
'.625em' => 'Très grande (.625em)'
|
||||
'.125em' => 'Très petite',
|
||||
'.25em' => 'Petite',
|
||||
'.375em' => 'Moyenne',
|
||||
'.5em' => 'Grande',
|
||||
'.625em' => 'Très grande'
|
||||
];
|
||||
|
||||
public static $galleryThemeBorder = [
|
||||
'0em' => 'Aucune',
|
||||
'.1em' => 'Très petite (.1em)',
|
||||
'.4em' => 'Petite (.2em)',
|
||||
'.5em' => 'Moyenne (.5em)',
|
||||
'.8em' => 'Grande (.8em)',
|
||||
'1.2em' => 'Très grande (1.2em)'
|
||||
'.1em' => 'Très petite',
|
||||
'.4em' => 'Petite',
|
||||
'.5em' => 'Moyenne',
|
||||
'.8em' => 'Grande',
|
||||
'1.2em' => 'Très grande'
|
||||
];
|
||||
|
||||
public static $galleryThemeOpacity = [
|
||||
'1' => 'Aucun ',
|
||||
'.9' => 'Très Discrète (.9)',
|
||||
'.8' => 'Discrète (0.8)',
|
||||
'.7' => 'Moyenne (0.7)',
|
||||
'.6' => 'Forte (0.6)',
|
||||
'.5' => 'Très forte (0.5)'
|
||||
'.9' => 'Très Discrète',
|
||||
'.8' => 'Discrète',
|
||||
'.7' => 'Moyenne',
|
||||
'.6' => 'Forte',
|
||||
'.5' => 'Très forte'
|
||||
];
|
||||
|
||||
public static $galleryThemeMargin = [
|
||||
'0em' => 'Aucune',
|
||||
'.1em' => 'Très petite (.1em)',
|
||||
'.3em' => 'Petite (.3em)',
|
||||
'.6em' => 'Moyenne (.6em)',
|
||||
'.9em' => 'Grande (.9em)',
|
||||
'1.2em' => 'Très grande (1.2em)'
|
||||
'.1em' => 'Très petite',
|
||||
'.3em' => 'Petite',
|
||||
'.6em' => 'Moyenne',
|
||||
'.9em' => 'Grande',
|
||||
'1.2em' => 'Très grande'
|
||||
];
|
||||
|
||||
public static $directories = [];
|
||||
|
||||
public static $firstPictures = [];
|
||||
|
||||
public static $galleries = [];
|
||||
|
||||
public static $galleriesId = [];
|
||||
|
||||
public static $pictures = [];
|
||||
|
||||
public static $picturesId = [];
|
||||
|
||||
public static $thumbs = [];
|
||||
|
||||
const GALLERY_VERSION = '2.17';
|
||||
public static $galleryThemeRadius = [
|
||||
'0px' => 'Aucun',
|
||||
'5px' => 'Très léger',
|
||||
'10px' => 'Léger',
|
||||
'15px' => 'Moyen',
|
||||
'25px' => 'Important',
|
||||
'50px' => 'Très important'
|
||||
];
|
||||
|
||||
public static $galleryThemeShadows = [
|
||||
'0px' => 'Aucune',
|
||||
'1px 1px 5px' => 'Très légère',
|
||||
'1px 1px 10px' => 'Légère',
|
||||
'1px 1px 15px' => 'Moyenne',
|
||||
'1px 1px 25px' => 'Importante',
|
||||
'1px 1px 50px' => 'Très importante'
|
||||
];
|
||||
|
||||
/**
|
||||
* Tri de la liste des galeries
|
||||
@ -584,11 +600,13 @@ class gallery extends common {
|
||||
'thumbHeight' => $this->getinput('galleryThemeThumbHeight'),
|
||||
'thumbMargin' => $this->getinput('galleryThemeThumbMargin'),
|
||||
'thumbBorder' => $this->getinput('galleryThemeThumbBorder'),
|
||||
'ThumbBorderColor' => $this->getinput('galleryThemeThumbBorderColor'),
|
||||
'thumbBorderColor'=> $this->getinput('galleryThemeThumbBorderColor'),
|
||||
'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'),
|
||||
'thumbShadows' => $this->getinput('galleryThemeThumbShadows'),
|
||||
'thumbRadius' => $this->getinput('galleryThemeThumbRadius'),
|
||||
'legendHeight' => $this->getinput('galleryThemeLegendHeight'),
|
||||
'legendAlign' => $this->getinput('galleryThemeLegendAlign'),
|
||||
'legendTextColor'=> $this->getinput('galleryThemeLegendTextColor'),
|
||||
'legendTextColor' => $this->getinput('galleryThemeLegendTextColor'),
|
||||
'legendBgColor' => $this->getinput('galleryThemeLegendBgColor')
|
||||
]
|
||||
]);
|
||||
@ -603,6 +621,8 @@ class gallery extends common {
|
||||
$content = str_replace('#thumbBorder#',$this->getinput('galleryThemeThumbBorder'),$content );
|
||||
$content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content );
|
||||
$content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$content );
|
||||
$content = str_replace('#thumbShadows#',$this->getinput('galleryThemeThumbShadows'),$content );
|
||||
$content = str_replace('#thumbRadius#',$this->getinput('galleryThemeThumbRadius'),$content );
|
||||
$content = str_replace('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content );
|
||||
$content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content );
|
||||
$content = str_replace('#legendTextColor#',$this->getinput('galleryThemeLegendTextColor'),$content );
|
||||
|
||||
@ -7,10 +7,12 @@ class theme extends gallery {
|
||||
'thumbMargin' => '.6em',
|
||||
'thumbBorder' => '.1em',
|
||||
'thumbOpacity' => '.7',
|
||||
'ThumbBorderColor' => 'rgba(221, 221, 221, 1)',
|
||||
'thumbBorderColor' => 'rgba(221, 221, 221, 1)',
|
||||
'thumbRadius' => '5px',
|
||||
'thumbShadows' => '1px 1px 5px',
|
||||
'legendHeight' => '.375em',
|
||||
'legendAlign' => 'center',
|
||||
'legendTextColor'=> 'rgba(255, 255, 255, 1)',
|
||||
'legendTextColor' => 'rgba(255, 255, 255, 1)',
|
||||
'legendBgColor' => 'rgba(0, 0, 0, .6)'
|
||||
];
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
position: relative;
|
||||
-webkit-transition: opacity .3s ease-out;
|
||||
transition: opacity .3s ease-out;
|
||||
border-radius: var(--thumbRadius);
|
||||
box-shadow: var(--thumbShadows) ;
|
||||
}
|
||||
.galleryPicture:hover,
|
||||
.galleryGalleryPicture:hover {
|
||||
@ -35,7 +37,7 @@
|
||||
.colPicture {
|
||||
width : var(--thumbWidth);
|
||||
max-width: 50%;
|
||||
margin: var(--thumbMargin);
|
||||
padding: var(--thumbMargin);
|
||||
}
|
||||
|
||||
@media (max-width: 432px) {
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
--thumbHeight: #thumbHeight#;
|
||||
--thumbBorder: #thumbBorder#;
|
||||
--thumbBorderColor: #thumbBorderColor#;
|
||||
--thumbRadius: #thumbRadius#;
|
||||
--thumbShadows: #thumbShadows#;
|
||||
}
|
||||
.galleryName,
|
||||
.galleryGalleryName {
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
--thumbHeight: 15em;
|
||||
--thumbBorder: .1em;
|
||||
--thumbBorderColor: rgba(221, 221, 221, 1);
|
||||
--thumbRadius: 5px;
|
||||
--thumbShadows: 1px 1px 5px;
|
||||
}
|
||||
.galleryName,
|
||||
.galleryGalleryName {
|
||||
@ -33,6 +35,8 @@
|
||||
position: relative;
|
||||
-webkit-transition: opacity .3s ease-out;
|
||||
transition: opacity .3s ease-out;
|
||||
border-radius: var(--thumbRadius);
|
||||
box-shadow: var(--thumbShadows) ;
|
||||
}
|
||||
.galleryPicture:hover,
|
||||
.galleryGalleryPicture:hover {
|
||||
@ -59,7 +63,7 @@
|
||||
.colPicture {
|
||||
width : var(--thumbWidth);
|
||||
max-width: 50%;
|
||||
margin: var(--thumbMargin);
|
||||
padding: var(--thumbMargin);
|
||||
}
|
||||
|
||||
@media (max-width: 432px) {
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
--thumbHeight: 15em;
|
||||
--thumbBorder: .1em;
|
||||
--thumbBorderColor: rgba(221, 221, 221, 1);
|
||||
--thumbRadius: 5px;
|
||||
--thumbShadows: 1px 1px 5px;
|
||||
}
|
||||
.galleryName,
|
||||
.galleryGalleryName {
|
||||
@ -33,6 +35,8 @@
|
||||
position: relative;
|
||||
-webkit-transition: opacity .3s ease-out;
|
||||
transition: opacity .3s ease-out;
|
||||
border-radius: var(--thumbRadius);
|
||||
box-shadow: var(--thumbShadows) ;
|
||||
}
|
||||
.galleryPicture:hover,
|
||||
.galleryGalleryPicture:hover {
|
||||
@ -59,7 +63,7 @@
|
||||
.colPicture {
|
||||
width : var(--thumbWidth);
|
||||
max-width: 50%;
|
||||
margin: var(--thumbMargin);
|
||||
padding: var(--thumbMargin);
|
||||
}
|
||||
|
||||
@media (max-width: 432px) {
|
||||
|
||||
@ -17,50 +17,68 @@
|
||||
<div class="block">
|
||||
<h4>Configuration des vignettes</h4>
|
||||
<div class="row">
|
||||
<div class="col4">
|
||||
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
|
||||
'label' => 'Alignement des vignettes sur la page :',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbAlign'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [
|
||||
'label' => 'Largeur des vignettes :',
|
||||
'label' => 'Largeur',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbWidth'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col4">
|
||||
<div class="col5">
|
||||
<?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [
|
||||
'label' => 'Hauteur des vignettes :',
|
||||
'label' => 'Hauteur',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbHeight'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col3">
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
|
||||
'label' => 'Alignement',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbAlign'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col5">
|
||||
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
|
||||
'label' => 'Marges autour des vignettes :',
|
||||
'label' => 'Marges',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col3">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
|
||||
'label' => 'Epaisseur des bordures',
|
||||
'label' => 'Bordures',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col3">
|
||||
<div class="col5">
|
||||
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
|
||||
'label' => 'Opacité au survol',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::select('galleryThemeThumbRadius', $module::$galleryThemeRadius, [
|
||||
'label' => 'Bords arrondis',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbRadius'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col5">
|
||||
<?php echo template::select('galleryThemeThumbShadows', $module::$galleryThemeShadows, [
|
||||
'label' => 'Ombres',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbShadows'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col5 offset4">
|
||||
<?php echo template::text('galleryThemeThumbBorderColor', [
|
||||
'class' => 'colorPicker',
|
||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||
'label' => 'Couleur de la bordure',
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'ThumbBorderColor'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col3">
|
||||
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
|
||||
'label' => 'Opacité au survol',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'thumbBorderColor'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
@ -72,34 +90,34 @@
|
||||
<div class="block">
|
||||
<h4>Configuration des légendes</h4>
|
||||
<div class="row">
|
||||
<div class="col6">
|
||||
<?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
|
||||
'label' => 'Hauteur des légendes :',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'legendHeight'])
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::text('galleryThemeLegendTextColor', [
|
||||
'class' => 'colorPicker',
|
||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||
'label' => 'Texte',
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'legendTextColor'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col6">
|
||||
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
|
||||
'label' => 'Alignement des légendes dans les vignettes :',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
|
||||
<div class="col5">
|
||||
<?php echo template::text('galleryThemeLegendBgColor', [
|
||||
'class' => 'colorPicker',
|
||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||
'label' => 'Fond',
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col6">
|
||||
<?php echo template::text('galleryThemeLegendTextColor', [
|
||||
'class' => 'colorPicker',
|
||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||
'label' => 'Couleur du texte de légende',
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'legendTextColor'])
|
||||
<div class="col5 offset1">
|
||||
<?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
|
||||
'label' => 'Hauteur',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'legendHeight'])
|
||||
]); ?>
|
||||
</div>
|
||||
<div class="col6">
|
||||
<?php echo template::text('galleryThemeLegendBgColor', [
|
||||
'class' => 'colorPicker',
|
||||
'help' => 'Le curseur horizontal règle le niveau de transparence.',
|
||||
'label' => 'Couleur du fond de la légende',
|
||||
'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor'])
|
||||
<div class="col5">
|
||||
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
|
||||
'label' => 'Alignement:',
|
||||
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
|
||||
]); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user