Changeset 45231 in spip-zone


Ignore:
Timestamp:
Mar 7, 2011, 12:38:10 PM (9 years ago)
Author:
jean-marc.viglino@…
Message:

[MAJ] Effet Thickbox pour l'affichage des images sans quitter la carte (img_geoportail)

Location:
_plugins_/spip_geoportail
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/spip_geoportail/css/geoportail_carte.css

    r45201 r45231  
    4242
    4343/** Popup sur la carte **/
    44 #popup
     44#popup, .gpPopup
    4545{       font-size:1em;
    4646        /* background: transparent url(popup.png) no-repeat bottom right; */
    4747        background-color:#FFC!important;
     48        border:0!important;
    4849}
    4950#popup p
    5051{       margin:0;
     52        padding:0;
    5153}
    52 #popup .titre
     54#popup .titre, .gpPopup .gpPopupContent .gpPopupHead
    5355{       font-size:1em;
    5456        font-weight:bold;
    5557        margin:0;
     58        background:transparent;
    5659}
    5760#popup .spip_logos
     
    7578}
    7679
    77 #popup .olPopupCloseBox 
     80#popup .olPopupCloseBox, .gpPopupCloseBox
    7881{       background:transparent url(close.png) no-repeat scroll 0 0;
    7982        overflow:hidden;
    8083}
    81 #popup .olPopupCloseBox:hover
     84#popup .olPopupCloseBox:hover, .gpPopupCloseBox:hover
    8285{       background:transparent url(close.png) no-repeat scroll 0 -17px
    8386}
     87
     88/** Affichage des images */
     89#jqDialog.viewer
     90{       border:0;
     91}
     92#jqDialog.viewer .jqCloseButton
     93{       top:-5px;
     94        right:-5px;
     95}
     96#jqDialog.viewer .jqDialogBlock
     97{       margin:0!important;
     98        padding:0!important;
     99}
     100#jqDialog.viewer .jqDialogInner
     101{       border:10px solid white;
     102        margin:0;
     103        padding:0;
     104}
     105       
  • _plugins_/spip_geoportail/js/Layer/Locator.js

    r44741 r45231  
    4141                // Style du calque :
    4242                var symbolizer = OpenLayers.Util.applyDefaults(
    43                         {pointRadius: 20, graphicXOffset: -6, graphicYOffset: -35},
     43                        { pointRadius: 20, graphicXOffset: -6, graphicYOffset: -35, cursor:'move'},
    4444                        OpenLayers.Feature.Vector.style["default"]);
    4545                this.styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 20}});
  • _plugins_/spip_geoportail/js/geoportail.js

    r45201 r45231  
    119119                        {       // Style de la couche
    120120                                var symbolizer = OpenLayers.Util.applyDefaults(
    121                                                 { pointRadius: 10, graphicXOffset: -2, graphicYOffset: -17 },
     121                                                { pointRadius: 10, graphicXOffset: -2, graphicYOffset: -17, cursor:'pointer' },
    122122                                                OpenLayers.Feature.Vector.style["default"]);
    123123                                var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 15, graphicXOffset: -4, graphicYOffset: -26}});
     
    516516                        feature.style.graphicXOffset = -size;
    517517                        feature.style.graphicYOffset = -size;
     518                        feature.style.cursor = 'pointer';
    518519                        // Alignement
    519520                        align = align.split('-');
     
    858859                        // Style d'affichage par defaut
    859860                        OpenLayers.Feature.Vector.style['default'].fillOpacity = 1;
    860                         OpenLayers.Feature.Vector.style['default'].cursor = 'pointer';
    861861                        OpenLayers.Feature.Vector.style['select'].fillOpacity = 1;
    862862                }
     
    955955        },
    956956
     957        showImg : function (link, width, height)
     958        {       jQuery.jqDialog("",
     959                        {       dialog: "<img src='"+link+"' width='100%'/>",
     960                                classe:'viewer',
     961                                width: width,
     962                                height: height,
     963                                clickout:true,
     964                                undo: false,
     965                                ok: false
     966                        });
     967        },
     968       
    957969        // Fonction d'affichage d'un popup sur une carte
    958970        popupFeature: function(feature)
     
    963975                var att = feature.attributes;
    964976                var lien = null;
    965                 if (att.url) lien = "<a href='" + att.url + "'>";
     977                if (att.url)
     978                {       // Affichage des images
     979                        if (att.extension in {'jpg':'','gif':'','png':''}) lien = "<a href=\"javascript:jQuery.geoportail.showImg('" + att.url + "',"+att.width+","+att.heigth+")\">";
     980                        else lien = "<a href='" + att.url + "'>";
     981                }
    966982                if (att.logo) html += att.logo;
    967983                if (att.img) html += (lien ? lien : "") + "<img src='"+att.img+"' class='spip_logos' />" + (lien ? "</a>" : "");
  • _plugins_/spip_geoportail/js/jquery.dialog.js

    r39814 r45231  
    4343                        +"style='position:absolute; background-color:black; z-index:2000; display:block; ' >"
    4444                        +"</div>").width(wt).height(ht).css("left",0).css("top",0).css("opacity",0.4).appendTo("body");
     45                // Fermer si clickout
     46                if (param.clickout) back.click(jQuery.jqDialog.action);
     47               
     48                // Fenetre proportionnelle
     49                var dw=param.width;
     50                var dh=param.height;
     51                var prop="";
     52                if (dw && dh)
     53                {       if (dw>$(window).width()*0.9)
     54                        {       dw = Math.round($(window).width()*0.9);
     55                                dh = Math.round(param.height * dw / param.width );
     56                        }
     57                        if (dh>$(window).height()*0.9)
     58                        {       dh = Math.round($(window).height()*0.9);
     59                                dw = Math.round(param.width * dh / param.height);
     60                        }
     61                        prop = "width:"+dw+"px; height:"+dh+"px; ";
     62                }
    4563               
    4664                if (jQuery('#jqDialog').length != 0) jQuery('#jqDialog').remove();
    4765                var dialog = "<div class='"+param.classe+"' id=jqDialog "
    48                         +"style='position:absolute; z-index:2001; display:block; ' >"
    49                         +"<div class='jqCloseButton' onclick='javascript:jQuery.jqDialog.action(\"undo\")'></div>"
     66                        +"style='position:absolute; z-index:2001; display:block; "+prop+"' >"
     67                        +"<div class='jqCloseButton' onclick='javascript:jQuery.jqDialog.action(\"undo\")' style='position:absolute; z-index:1'></div>"
    5068//                      +"<input type=image class='jqCloseButton' onclick='javascript:jQuery.jqDialog.action(\"undo\")' value='' />"
    51                         +"<p>"+title+"</p>"
    52                         +"<div class=jqDialogBlock ><table width=100% border=0><tr valign=top>";
    53                 if (param.icon) dialog += "<td width=1%><img class=jqDialogImg src='"+param.icon+"' style='float:left' /></td>"
    54                 dialog += "<td><div class=jqDialogInner style='padding-bottom:1em;' >"+param.dialog+"</div></td></tr></table>"
    55                         +"<div style='text-align:right; '>";
     69                        +(title ? "<p>"+title+"</p>" : "")
     70                        +"<div class=jqDialogBlock >";
     71                if (param.icon)
     72                {       dialog += "<table width=100% border=0 ><tr valign=top>"
     73                                        + "<td width=1%><img class=jqDialogImg src='"+param.icon+"' style='float:left' /></td><td>";
     74                }
     75                if (param.dialog) dialog += "<div class=jqDialogInner>"+param.dialog+"</div>"
     76                if (param.icon) dialog += "</tr></table>"
     77                dialog += "<div class=button style='text-align:right; '>";
    5678                if (param.ok) dialog += "<input class=jqDialogButton onclick='javascript:jQuery.jqDialog.action(\"ok\")' type=button value='"+param.ok.replace("\'","&acute;")+"' />";
    5779                if (param.no) dialog += "<input class=jqDialogButton onclick='javascript:jQuery.jqDialog.action(\"no\")' type=button value='"+param.no.replace("\'","&acute;")+"' />";
     
    104126                classe  : 'jqDialog',           // Dialog class (for css manipulation)
    105127                dialog  : '...',                        // The dialog
     128                width   : null,                         // Dialog size (proportion)
     129                height  : null,                         //
     130                clickout: false,                        // Close de dialog when clickout
    106131                callback : function(action)     // Function to callback when closing
    107132                {       // NB: $('#jqDialog') is not destroy at this step,
  • _plugins_/spip_geoportail/modeles/geoportail_articles.html

    r45201 r45231  
    1717{       // Definition des styles pour l'affichage sous forme de punaises
    1818        var symbolizer = OpenLayers.Util.applyDefaults(
    19                         {pointRadius: 10, graphicXOffset: -2, graphicYOffset: -17},
     19                        {pointRadius: 10, graphicXOffset: -2, graphicYOffset: -17, cursor:'pointer'},
    2020                        OpenLayers.Feature.Vector.style["default"]);
    2121        var styleMap = new OpenLayers.StyleMap({"default": symbolizer, "select": {pointRadius: 15, graphicXOffset: -4, graphicYOffset: -26}});
  • _plugins_/spip_geoportail/modeles/geoportail_auteurs.html

    r45201 r45231  
    1212{       
    1313        // Definition des styles pour l'affichage sous forme de punaises
    14         var styleMap = new OpenLayers.StyleMap({"default": {pointRadius: 6, graphicXOffset: -6, graphicYOffset: -6}, "select": {pointRadius: 10, graphicXOffset: -10, graphicYOffset: -10}});
     14        var styleMap = new OpenLayers.StyleMap({"default": {pointRadius: 6, graphicXOffset: -6, graphicYOffset: -6, cursor:'pointer'}, "select": {pointRadius: 10, graphicXOffset: -10, graphicYOffset: -10}});
    1515        // Affichage en fonction de l'attribut statut
    1616        var lookup = {
  • _plugins_/spip_geoportail/modeles/img_geoportail.html

    r45201 r45231  
    1414<BOUCLE_doc(DOCUMENTS){geoposition}{id_document}>
    1515<script language=javascript>
    16     var att = { classe:'document', id_document:#ID_DOCUMENT, name:"[(#TITRE|attribut_html)]", extension:"#EXTENSION", taille:"#TAILLE", logo:"[(#LOGO_DOCUMENT|#URL_DOCUMENT)]", url:"#URL_DOCUMENT", description:"[(#DESCRIPTIF|addslashes|replace{\n,''}|replace{\r,''})]" };
     16    var att = { classe:'document', id_document:#ID_DOCUMENT, name:"[(#TITRE|attribut_html)]", extension:"#EXTENSION", taille:"[(#TAILLE|taille_en_octets)]", width:"#LARGEUR", heigth:"#HAUTEUR", img:"[(#LOGO_DOCUMENT||extraire_attribut{src})]", url:"#URL_DOCUMENT", description:"[(#DESCRIPTIF|addslashes|replace{\n,''}|replace{\r,''})]" };
    1717        // Afficher
    1818        [(#SET{largeur,[(#LOGO_DOCUMENT||image_reduire{40}|largeur|plus{[(#ENV{bord,4})]})]})]
Note: See TracChangeset for help on using the changeset viewer.