chargement dynamique dans une Modal Dialog JQuery

Introduction

J'avais besoin pour 2 pages d'avoir à charger dynamiquement pour l'une une image, tandis que pour l'autre une URL.

J'aurais pu me servir d'un autre plugin pour le faire, mais je me suis dis qu'en utilisant déjà la librairie JQuery et JQuery UI, il serait absurde de rajouter des appels de fichiers et du code JavaScript, ce qui pour moi allége la page en code.

Pour avoir un aperçu voici ce que cela donne avec les images (Voir DEMO), pour les URL je ne peux pas vous le montrer car cela se trouve dans mon Back Office.

 

1- Chargement dynamique d'images

Pour réaliser ceci, vous avez besoin d'une part de la librairie JQuery et de JQuery UI d'autre part.
De plus pour l'affichage des imagettes sur la page, vous avez le choix d'utiliser l'affichage des images à la proportionnelle avec soit avec ce script (http://j-reaux.developpez.com/tutoriel/php/fonctions-redimensionner-image/) .
Prenons pour l'exemple que vous ayez une image de (500x400) avec soit l'un ou l'autre type de redimensionnement vous pouvez les afficher avec une dimension inférieur par exemple de (150x100), votre image ne sera pas déformée, mais sera affichée proportionnellement.

 

Comment utiliser l'affichage des miniatures à partir d'une grande image

Voici comment utiliser le code d'affichage de (Mr j-reaux) :
<img alt="" <?php fctaffichimage('votre_dossier/votre_image.jpg', 150, 150) ?> />
Vous pouvez aussi utiliser une donnée dynamique correspondant à un champ de votre base de données.

Ce code ne sert qu'à l'affichage.

 

Comment afficher dynamiquement une image dans une boite modale avec JQuery

D'abord le code JavaScript avec les commentaires, que vous placerez dans la partie (<head> et </head>)

        <script>
          $(document).ready(function() {
                 
            $('body a.d').click(function(event){
                 
              event.preventDefault();
              PreviewImage($(this).attr('href'));
              titre = $(this).attr("title");                                   
            });                          
          });	
          PreviewImage = function(uri) {
            //Obtenir les Elements HTML 
            imageDialog = $("#dialog");
            imageTag = $('#image');
            //Diviser l'URI afin que nous puissions obtenir le nom de fichier
            uriParts = uri.split("/");
          
          //Réglez l'image src
            imageTag.attr('src', uri);
          //Une fois l'image chargée, afficher la boîte de dialogue
            imageTag.load(function(){
              $('#dialog').dialog({
                modal: true,
                resizable: false,
                draggable: false,
                width: 'auto',
                //title: uriParts[uriParts.length - 1]
                title: titre
              });
            });  
          }	
        </script>
        

Voyons maintenant le code HTML, un clic sur l'image affichera la grande image dans la boite de dialogue JQuery.
Ci-dessous le code de (j-reaux)

<a class="d" id="image1" href="appli_datatable/config/config1.png" title="Tableau de base"><img alt="" <?php fctaffichimage('appli_datatable/config/config1.png', 150, 150) ?> /></a>

Puis à la fin de votre page avant la fermeture du (body) incluer ce code ci-dessous.

<div id="dialog" title="An Image!" style="display: none;">
<img id="image" src=""/>
</div>

2 - Chargement dynamique d'URL

A présent voyons comment charger un fichier dans une boite de dialog modale JQuery.
Pour commencer voyons le code JavaScript à placer dans la partie (head) de votre page.

<script type="text/javascript">
function showUrlInDialog(url){
  titre = $("a.d").attr("title");
  var tag = $("<div></div>");
  $.ajax({
    url: url,
    success: function(data) {
      tag.html(data).dialog({
		  modal: true,
		  resizable: false,
		  draggable: true,
		  width: 'auto',
		  height: 500,
		  title: titre,
		  buttons: {
                "Fermer": function() {
                    $( this ).dialog( "close" );
                }
		  }
	  }).dialog('open');
    }
  });
  setTimeout(function(){tag.dialog("close")},10000);
}
</script>

Maintenant voyons le code HTML du lien.
Le code est assez simple, on attribut un diése dans le (href), un (title) puis l'attribut (onclick) appellant la fonction () avec comme paramètre le nom du fichier, c'est tout. Ce type de code peut être employé pour plusieurs liens dans la même page si vous avez bien sur plusieurs page à afficher dans la boite de dialogue modale JQuery.

<a class="d" href="#" title="Fichier individuel" onclick="showUrlInDialog('votre_fichier.php'); return false;">Afficher</a>

 

Conclusion

Voilà je pense que ces deux petits script sympas peuvent être utilent et être utilisés sans adjonction d'autre plugins, si on utilise déjà JQuery et JQuery UI.

 

Bon dev