Changeset 107905 in spip-zone


Ignore:
Timestamp:
Dec 7, 2017, 2:38:10 PM (2 years ago)
Author:
arno@…
Message:

Calcul plus compliqué pour garantir l’alignement horizontal des <slide>: tous les éléments doivent avoir la même hauteur, avec une largeur max qui est la colonne de texte, le tout sans être plus haut que le ratio de l’écran…

Location:
_plugins_/medias_responsive_mod
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • _plugins_/medias_responsive_mod/paquet.xml

    r106800 r107905  
    22        prefix="medias_responsive_mod"
    33        categorie="outil"
    4         version="1.9.3"
     4        version="1.10.0"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.2.*]"

  • _plugins_/medias_responsive_mod/squelettes/css/medias_responsive.css

    r104550 r107905  
    185185        transform: translate3d(0%,0,0);
    186186}
    187 input.portfolio_slide_radio.sel0:checked ~ .label_ligne_0 { display: block; }
    188 input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate3d(-101%,0,0); }
    189 input.portfolio_slide_radio.sel1:checked ~ .label_ligne_1 { display: block; }
    190 input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate3d(-202%,0,0); }
    191 input.portfolio_slide_radio.sel2:checked ~ .label_ligne_2 { display: block; }
    192 input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate3d(-303%,0,0); }
    193 input.portfolio_slide_radio.sel3:checked ~ .label_ligne_3 { display: block; }
    194 input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate3d(-404%,0,0); }
    195 input.portfolio_slide_radio.sel4:checked ~ .label_ligne_4 { display: block; }
    196 input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate3d(-505%,0,0); }
    197 input.portfolio_slide_radio.sel5:checked ~ .label_ligne_5 { display: block; }
    198 input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate3d(-606%,0,0); }
    199 input.portfolio_slide_radio.sel6:checked ~ .label_ligne_6 { display: block; }
    200 input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate3d(-707%,0,0); }
    201 input.portfolio_slide_radio.sel7:checked ~ .label_ligne_7 { display: block; }
    202 input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate3d(-808%,0,0); }
    203 input.portfolio_slide_radio.sel8:checked ~ .label_ligne_8 { display: block; }
    204 
     187ul.portfolio_slide .spip_doc_intitules {
     188        text-align: center;
     189}
    205190ul.portfolio_slide:after {
    206191        content: " ";
    … …  
    224209        margin-right: -100%;
    225210}
    226 ul.portfolio_slide li+li { transform:translate3d(101%,0,0); }
    227 ul.portfolio_slide li+li+li { transform:translate3d(202%,0,0); }
    228 ul.portfolio_slide li+li+li+li { transform:translate3d(303%,0,0); }
    229 ul.portfolio_slide li+li+li+li+li { transform:translate3d(404%,0,0); }
    230 ul.portfolio_slide li+li+li+li+li+li { transform:translate3d(505%,0,0); }
    231 ul.portfolio_slide li+li+li+li+li+li+li { transform:translate3d(606%,0,0); }
    232 ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate3d(707%,0,0); }
    233 ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate3d(808%,0,0); }
    234 
    235 
    236 [dir=rtl] ul.portfolio_slide li+li { transform:translate3d(-101%,0,0); }
    237 [dir=rtl] ul.portfolio_slide li+li+li { transform:translate3d(-202%,0,0); }
    238 [dir=rtl] ul.portfolio_slide li+li+li+li { transform:translate3d(-303%,0,0); }
    239 [dir=rtl] ul.portfolio_slide li+li+li+li+li { transform:translate3d(-404%,0,0); }
    240 [dir=rtl] ul.portfolio_slide li+li+li+li+li+li { transform:translate3d(-505%,0,0); }
    241 [dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li { transform:translate3d(-606%,0,0); }
    242 [dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate3d(-707%,0,0); }
    243 [dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate3d(-808%,0,0); }
    244 [dir=rtl] input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate3d(101%,0,0); }
    245 [dir=rtl] input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate3d(202%,0,0); }
    246 [dir=rtl] input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate3d(303%,0,0); }
    247 [dir=rtl] input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate3d(404%,0,0); }
    248 [dir=rtl] input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate3d(505%,0,0); }
    249 [dir=rtl] input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate3d(606%,0,0); }
    250 [dir=rtl] input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate3d(707%,0,0); }
    251 [dir=rtl] input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate3d(808%,0,0); }
    252 
     211ul.portfolio_slide .spip_img { padding-bottom: 75%; background-size: contain; display: block; width: 100%;  background-repeat: no-repeat; background-position: bottom center;}
     212@media (orientation: portrait) {
     213        ul.portfolio_slide .spip_img { padding-bottom: 134%;}
     214}
     215
     216
     217input.portfolio_slide_radio.sel0:checked ~ .label_ligne_0 { display: block; }
     218input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate3d(-102%,0,0); }
     219input.portfolio_slide_radio.sel1:checked ~ .label_ligne_1 { display: block; }
     220input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate3d(-204%,0,0); }
     221input.portfolio_slide_radio.sel2:checked ~ .label_ligne_2 { display: block; }
     222input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate3d(-306%,0,0); }
     223input.portfolio_slide_radio.sel3:checked ~ .label_ligne_3 { display: block; }
     224input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate3d(-408%,0,0); }
     225input.portfolio_slide_radio.sel4:checked ~ .label_ligne_4 { display: block; }
     226input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate3d(-510%,0,0); }
     227input.portfolio_slide_radio.sel5:checked ~ .label_ligne_5 { display: block; }
     228input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate3d(-612%,0,0); }
     229input.portfolio_slide_radio.sel6:checked ~ .label_ligne_6 { display: block; }
     230input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate3d(-714%,0,0); }
     231input.portfolio_slide_radio.sel7:checked ~ .label_ligne_7 { display: block; }
     232input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate3d(-816%,0,0); }
     233input.portfolio_slide_radio.sel8:checked ~ .label_ligne_8 { display: block; }
     234input.portfolio_slide_radio.sel9:checked ~ ul.portfolio_slide { transform: translate3d(-918%,0,0); }
     235input.portfolio_slide_radio.sel9:checked ~ .label_ligne_9 { display: block; }
     236input.portfolio_slide_radio.sel10:checked ~ ul.portfolio_slide { transform: translate3d(-1020%,0,0); }
     237input.portfolio_slide_radio.sel10:checked ~ .label_ligne_10 { display: block; }
     238
     239ul.portfolio_slide li+li { transform:translate3d(102%,0,0); }
     240ul.portfolio_slide li+li+li { transform:translate3d(204%,0,0); }
     241ul.portfolio_slide li+li+li+li { transform:translate3d(306%,0,0); }
     242ul.portfolio_slide li+li+li+li+li { transform:translate3d(408%,0,0); }
     243ul.portfolio_slide li+li+li+li+li+li { transform:translate3d(510%,0,0); }
     244ul.portfolio_slide li+li+li+li+li+li+li { transform:translate3d(612%,0,0); }
     245ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate3d(714%,0,0); }
     246ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate3d(816%,0,0); }
     247ul.portfolio_slide li+li+li+li+li+li+li+li+li+li { transform:translate3d(918%,0,0); }
     248ul.portfolio_slide li+li+li+li+li+li+li+li+li+li+li { transform:translate3d(1020%,0,0); }
     249
     250
     251[dir=rtl] ul.portfolio_slide li+li { transform:translate3d(-102%,0,0); }
     252[dir=rtl] ul.portfolio_slide li+li+li { transform:translate3d(-204%,0,0); }
     253[dir=rtl] ul.portfolio_slide li+li+li+li { transform:translate3d(-306%,0,0); }
     254[dir=rtl] ul.portfolio_slide li+li+li+li+li { transform:translate3d(-408%,0,0); }
     255[dir=rtl] ul.portfolio_slide li+li+li+li+li+li { transform:translate3d(-510%,0,0); }
     256[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li { transform:translate3d(-612%,0,0); }
     257[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li { transform:translate3d(-714%,0,0); }
     258[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li+li { transform:translate3d(-816%,0,0); }
     259[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li+li+li { transform:translate3d(-918%,0,0); }
     260[dir=rtl] ul.portfolio_slide li+li+li+li+li+li+li+li+li+li+li { transform:translate3d(-1020%,0,0); }
     261[dir=rtl] input.portfolio_slide_radio.sel1:checked ~ ul.portfolio_slide { transform: translate3d(102%,0,0); }
     262[dir=rtl] input.portfolio_slide_radio.sel2:checked ~ ul.portfolio_slide { transform: translate3d(204%,0,0); }
     263[dir=rtl] input.portfolio_slide_radio.sel3:checked ~ ul.portfolio_slide { transform: translate3d(306%,0,0); }
     264[dir=rtl] input.portfolio_slide_radio.sel4:checked ~ ul.portfolio_slide { transform: translate3d(408%,0,0); }
     265[dir=rtl] input.portfolio_slide_radio.sel5:checked ~ ul.portfolio_slide { transform: translate3d(510%,0,0); }
     266[dir=rtl] input.portfolio_slide_radio.sel6:checked ~ ul.portfolio_slide { transform: translate3d(612%,0,0); }
     267[dir=rtl] input.portfolio_slide_radio.sel7:checked ~ ul.portfolio_slide { transform: translate3d(714%,0,0); }
     268[dir=rtl] input.portfolio_slide_radio.sel8:checked ~ ul.portfolio_slide { transform: translate3d(816%,0,0); }
     269[dir=rtl] input.portfolio_slide_radio.sel9:checked ~ ul.portfolio_slide { transform: translate3d(918%,0,0); }
     270[dir=rtl] input.portfolio_slide_radio.sel10:checked ~ ul.portfolio_slide { transform: translate3d(1020%,0,0); }
     271

  • _plugins_/medias_responsive_mod/squelettes/javascript/portfolio_slide.js

    r104568 r107905  
    99}
    1010
     11
     12function calculer_portfolio_slide() {
     13        var ratio_ecran = $( document ).height() / $( document ).width() * 100;
     14        $(".portfolio_slide").each(function() {
     15                        var ratio_max = ratio_ecran;
     16                        $(this).find(".spip_img").each(function(){
     17                                if ($(this).attr("data-italien-l")) {
     18                                        var ratio = $(this).attr("data-italien-h") / $(this).attr("data-italien-l") * 100;
     19                                        ratio_max = Math.min(ratio, ratio_max);
     20                                }
     21                        });
     22                        $(this).find(".spip_img").css("padding-bottom", ratio_max+"%");
     23        });
     24}
    1125
    1226function activer_porfolio_slide() {
    … …  
    5973
    6074$(document).ready( activer_porfolio_slide );
     75$(document).ready( calculer_portfolio_slide );
     76$(window).on("resize", calculer_portfolio_slide );

  • _plugins_/medias_responsive_mod/squelettes/modeles/slide.html

    r104547 r107905  
    2222<[(#GET{a})] href="#FICHIER"[ title="(#TITRE|supprimer_numero|texte_backend)"] class="fond mediabox" type="#MIME_TYPE" data-photo-w="#LARGEUR" data-photo-h="#HAUTEUR" >
    2323]
    24                 [(#FICHIER|image_responsive{160/320/640/1200/1920})]
     24                [<span class='spip_img' (#FICHIER|background_responsive{160/320/640/1200/1920})></span>]
    2525
    2626[(#ENV{lien}|?{</a>,</[(#GET{a})]>})]
Note: See TracChangeset for help on using the changeset viewer.