[partage exemple] image qui ouvre un dialog "iframe" design

ajja17orange · Mai 13, 2020, 8:01

<html> 
<head>
<style>
.swapmenu2::-webkit-scrollbar {display: none; }
div.swapmenu2 {
	background-color: transparent; 
	white-space: nowrap;
	overflow-y: hidden;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}
div.swapmenu2 a {
	padding: 15px;
	text-decoration: none;
	opacity: 1;
    padding-top: 10px;
}
div.swapmenu2 a:hover {
	text-decoration: none;
	opacity: 0.7;
}
.swapmenu2 li {
	display: inline-block;
	list-style: none;
	opacity: 1;
}
.swapmenu2 li>a {display: inline-block;}
.swapmenu2 img {
	filter: drop-shadow(8px 6px 6px gray);
	height:105px; /** taille des images **/
}
.dialogStyle .ui-dialog-titlebar-close {
    display: none;
}
.dialogStyle .ui-dialog-titlebar {
	font-family: "Roboto-Regular", cursive, sans-serif;
}
  </style>
</head>
<body>
<div>
 <div class="swapmenu2">
<!--   
perso/design/portable/salon.png
 https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png
-->

 <li><a data-title="Salon" data-src="/index.php?v=d&p=plan&plan_id=6&fullscreen=1">
   <img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png"/>
   </a>
</li> 
       <!-- 
perso/design/portable/salle_manger.png
https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png
-->
      <li><a data-title="Salle à manger" data-src="/index.php?v=d&p=plan&plan_id=7&fullscreen=1">
  <img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png"/>
  </a></li>

                </div> 
          <script>
$(function () {
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div class='modal'></div>").append(iframe).appendTo("body").dialog({
              classes: {
            "ui-dialog": "custom-dial"
        },
        autoOpen: false,
        modal: true,
        resizable: false,
      width: "auto",
      height: "auto",
      resizable: false,
    draggable: false,
      dialogClass:"dialogStyle",
      closeText: "fermer",
      hide: { effect: "fade"},
       show: { effect: "fade"},
         closeOnEscape: true, // touche echap 
    buttons: [{
        text: "Sortir",
        click: function() {
          iframe.attr("src", "");
$( this ).dialog( "close" );
        }
    }]
    });

$("body").on("click",".ui-widget-overlay",function() {
     $('.modal').dialog( "close" );
});
  
    $(".swapmenu2 a").on("click", function () {

        var src = $(this).attr("data-src");
        var title = $(this).attr("data-title");
        iframe.attr({
            width: 330,
            height: 440,
            src: src,
			allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
});


  </script>
  </div>
  </body></html>

dans le design configuré « largeur 330, hauteur= x (scrollable) » un petit html

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  ::-webkit-scrollbar {display: none; }

</style>

pour sortir
le bouton « sortir » ou clic sur l’opacité « hors dialog » ou touche echap

source image

ajja17orange · Mai 13, 2020, 11:00

pour un effet flou

« 2,3 lignes »
la totalité du code

<html> 
<head>
<style>
.swapmenu2::-webkit-scrollbar {display: none; }
div.swapmenu2 {
	background-color: transparent; 
	white-space: nowrap;
	overflow-y: hidden;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 85%;
}
div.swapmenu2 a {
	padding: 15px;
	text-decoration: none;
	opacity: 1;
    padding-top: 10px;
}
div.swapmenu2 a:hover {
	text-decoration: none;
	opacity: 0.7;
}
.swapmenu2 li {
	display: inline-block;
	list-style: none;
	opacity: 1;
}
.swapmenu2 li>a {display: inline-block;}
.swapmenu2 img {
	filter: drop-shadow(8px 6px 6px gray);
	height:105px; /** taille des images **/
}
.dialogStyle .ui-dialog-titlebar-close {
    display: none;
}
.dialogStyle .ui-dialog-titlebar  {
	font-family: "Roboto-Regular", cursive, sans-serif;
}
.blur-it {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}


  </style>
</head>
<body>
<div>
 <div class="swapmenu2">
<!--   
perso/design/portable/salon.png
 https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png
-->

 <li><a data-title="Salon" data-src="/index.php?v=d&p=plan&plan_id=6&fullscreen=1">
   <img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salon.png"/>
   </a>
</li> 
       <!-- 
perso/design/portable/salle_manger.png
https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png
-->
      <li><a data-title="Salle à manger" data-src="/index.php?v=d&p=plan&plan_id=7&fullscreen=1">
  <img src="https://raw.githubusercontent.com/ajja17/Design/master/image/salle_manger.png"/>
  </a></li>

                </div> 
          <script>
$(function () {
  var modal= $('body > :not(.ui-dialog):not(.ui-widget-overlay');
  
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>');
    var dialog = $("<div class='modal'></div>").append(iframe).appendTo("body").dialog({
              classes: {
            "ui-dialog": "custom-dial"
        },
        autoOpen: false,
        modal: true,
        resizable: false,
      width: "auto",
      height: "auto",
      resizable: false,
    draggable: false,
      dialogClass:"dialogStyle",
      closeText: "fermer",
      hide: { effect: "fade"},
       show: { effect: "fade"},
         closeOnEscape: true, // touche echap 
      
    buttons: [{
        text: "Sortir",
        click: function() {
          iframe.attr("src", "");
$( this ).dialog( "close" );
           modal.removeClass('blur-it');
        }
    }]

    });

$("body").on("click",".ui-widget-overlay",function() {
     $('.modal').dialog( "close" );
           modal.removeClass('blur-it');

});
  
    $(".swapmenu2 a").on("click", function () {
           modal.toggleClass('blur-it');
        var src = $(this).attr("data-src");
        var title = $(this).attr("data-title");
        iframe.attr({
            width: 330,
            height: 440,
            src: src,
			allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        });
        dialog.dialog("option", "title", title).dialog("open");
    });
});


  </script>
  </div>
  </body></html>

ajja17orange · Septembre 4, 2020, 9:28

un equipement html
« bouton rouge »
dans l’iframe « autre design »
qui ferme le dialog
dialog = parent
iframe = enfant

a partir de l’enfant fermer le parent

        <button type="button" id="close" class="btn btn-danger pull-right" aria-hidden="true">Close</button>
<script>
  var modal= window.parent.$('body > :not(.ui-dialog):not(.ui-widget-overlay');

  $( "#close" ).click(function() {
 window.parent.$('.modal').dialog( "close" );
     modal.removeClass('blur-it');

});
</script>

Sans titre2

sACLe · Septembre 25, 2020, 10:49

Merci pour ce partage, c’est top !
Je n’ai pas de cas en tête où je pourrais reprendre ça mais ça m’intéresse !
Peut-être les caméras que je n’ai pas forcément envie de voir et charger en permanence sur le dashboard.

ajja17orange · Septembre 25, 2020, 9:58

si ça peu t’inspirer

en faite je ne l’utilise que sur un design mobile
(bien que se que tu vois est sur pc et dashboard)
la raison vu la dimension il prends le plein écran sur mobile

design menu
de sommaire :

Accès aux équipements des diffèrentes piéces
Pilotage, Contrôle et Gestion d’appareils et dispostifs
menu latéral (swipe pour cacher/afficher) avec info

et plusieurs info globale (si je descend meteo, programme tv,…)

et cela pointent sur des dialogue (design,) d’infos détaillées, et d’actions

sur ma vieille v3

et pour test sur v4

la raison
simple, accès par différent menu, peu consommateur de data, rapidité (le design menu reste dessous pour un retour plus rapide)
ses differentes couchent de design font une appli personnalisable.

sACLe · Septembre 28, 2020, 10:10

Ca me donne vraiment envie de me lancer dans un design mobile. On durait du Homy .
L’application Jeedom n’est ni commode ni esthétique donc je n’ai jamais misé dessus. Un tel design change la donne
Pas certain que je fasse aussi esthétique cependant