IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

plusieurs iViewer sur une même page ajax


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut plusieurs iViewer sur une même page ajax
    Bonjour,
    Je développe une interface de lecture mi-text (=fragment), mi-image (=imagette).
    La page s'organise ainsi:
    - construction d'un arbre objet (item qui peut avoir pour fils d'autres instances d'item, bref récursif) ;
    - un conteneur <div></div> ou sera affiché l'arbre;
    - un appel à une méthode récursive pour son affichage:
    -|- dans celle-ci, on utilise le plugin jQuery Screw pour appeler une page (label.php) en ajax qui va afficher les fragments a récupérer dans la base de données pour chaque item.

    Pour chaque item, on utilise des fonctions jQuery comme slideToggle(); a chaque boucle je fais donc :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/javascript"> 
    jQuery(document).ready(function(){
    	jQuery("#item_titre_<?php echo $item_en_cours->getId() ?>").click(function(){
    		jQuery("#item_<?php echo $item_en_cours->getId() ?>").slideToggle("normal");
     
    	});
    });
    </script>
    Ce qui fonctionne très bien.

    Par contre, pour afficher un fragment et son imagette (affichage géré dans label.php) c'est une autre histoire. La partie texte (fragment) ça va.
    Mais je n'arrive pas à utiliser jQuery.iViewer comme il faut sur cette page !?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <script type="text/javascript"> 
    	jQuery(document).ready(function(){
    		jQuery("#fragment_titre_<?php echo $id_item.'_'.$fragment_en_cours->getId() ?>").click(function(){
    			jQuery("#fragment_body_<?php echo $id_item.'_'.$fragment_en_cours->getId() ?>").slideToggle("normal")
    			});  
    		});
     
    		jQuery("#viewer_<?php echo $id_item.'_'.$fragment_en_cours->getId() ?>").iviewer({
                  src: "show_img.php?file=<?php echo $file_name ?>",
                  update_on_resize: true,
                  zoom_delta:-1.2,
                  initCallback: function () {
                      var object = this;
                      jQuery("#in").click(function(){ object.zoom_by(1);});
                      jQuery("#out").click(function(){ object.zoom_by(-1);});
                      jQuery("#fit").click(function(){ object.fit();});
                      jQuery("#orig").click(function(){  object.set_zoom(100); });
                      jQuery("#update").click(function(){ object.update_container_info(); });
                   }
             });
    	});
    	</script>
    <?php
    echo '<div class="ligne_image_text">';
    echo '<div class="imagette" style="height: '.$taille_div_img.'px;">
    				<div id="viewer_'.$id_item.'_'.$fragment_en_cours->getId().'" class="viewer"></div>
    			</div>';
    Peu importe le paramétrage de iviewer mes imagettes sont toujours affichées de la même façon (toute petite et la moitié gauche hors de la div imagette - cf image jointe).
    Je comprend pas pourquoi ?!?


    Le problème ? un style css : "left: -89px;" sur <img> mais ce n'est pas de mon fait; d'où cela vient est la bonne question?!
    Images attachées Images attachées  

  2. #2
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut
    Je reviens vers vous, vous faire part de mes avancements:
    Donc le problème vient d'une propriété css (non déclarée dans mes css) pour <img> , left: -89px;

    Ne trouvant où, comment, pourquoi; j'ai voulu résoudre le problème avec Jquery.css() pour remodifier cette propriété, une fois le dom chargé.
    J'ai donc ajouté:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    jQuery(document).ready(function(){
    ....
    jQuery('.viewer img').css('left', '15px');
    ....
    });
    Et cela fonctionne ... quant ça veut !
    Plusieurs cas: aucune img n'est replacée, une sur deux l'est, elles le sont toutes sauf celles-qui n'apparaissent qu'après le scroll vertical, elles le sont toutes.

    Je ne suis pas magicien, et mon code non plus; que se passe t-il?
    SVP i need help

  3. #3
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut
    Je n'aime guère les monologues, mais ne pouvant plus éditer mon post précédent; je suis obligé de vous donner les derniers rebondissements ainsi :

    J'ai surchargé la css fournie avec le plugin iviewer avec cette déclaration:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .viewer img {
    	margin-left: 100px;
    }
    Ce qui fonctionne mais ne résout pas tout.
    Je ne réussit pas à mettre cette img au centre de son parent (cf pièce jointe) ; et, je n'arrive pas non plus à redimensionner mon image grâce au plugin.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    jQuery("#viewer_<?php echo $id_item.'_'.$fragment_en_cours->getId() ?>").iviewer({
                  src: "show_fragment.php?file=<?php echo $file_name ?>",
                  update_on_resize: false,
                  ui_disabled: false,
                  zoom_delta:1.2,
                  initCallback: function () {
                      var object = this;
                      jQuery("#in").click(function(){ object.zoom_by(1);});
                      jQuery("#out").click(function(){ object.zoom_by(-1);});
                      object.fit() ; // N'A AUCUNE INFLUENCE !! grrrrr!
                   }
             });

    ps: j'espère (follement) susciter un minimum d'intérêt et obtenir un peu d'aide sur cette solution ou sur une autre; c'est très important pour moi. merci
    Images attachées Images attachées  

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Je me permets de vous dire qu'a mon avis, si vous tenez un monologue, c'est que personne ne comprend vos codes et explications ou que personne ne connaît ce widget UI. Ce qui était mon cas.

    Vous donnez des fragments de code PHP plutôt que le code affiché dans votre navigateur, vous parlez de problème CSS sur du code que l'on ne connaît pas.

    Pour appréhender un page web un peu complexe, vu les interdépendances, les codes CSS, HTML et JS sont nécessaires. Un lien vers votre page de test permettrait d'avoir une vue d'ensemble.

    On parle bien du widget jQuery UI iviewer https://github.com/can3p/iviewer/wiki, http://test.dpetroff.ru/jquery.iviewer/test/ ?

    Et de la version 0.7 ? https://github.com/can3p/iviewer/zipball/master

    La liste des bogues : https://github.com/can3p/iviewer/issues (certaines sont très anciennes ).

    Vous utilisez bien le CSS de iViewver en plus de celui de UI ?

    À toute fin utile, voici le code de ma page de test :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
    	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
    	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
        <link rel="stylesheet" href="../iViewer/jquery.iviewer.css">
    	<style>
    		.viewer { position:relative; width:50%; height:500px; border:1px solid black; }
    		.wrapper { overflow:hidden; }
    	</style>
    </head>
    <body>
    	<h1>Forum jQuery</h1>
    	<h2>Test du widget UI iViewer <br> http://www.developpez.net/forums/d1183244/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/plusieurs-iviewer-meme-page-ajax/</h2>
    	<section class="conteneur">
            <!-- wrapper div is needed for opera because it shows scroll bars for reason -->
            <div class="wrapper">
                <span>
                    <a id="in" href="#">+</a>
                    <a id="out" href="#">-</a>
                    <a id="fit" href="#">fit</a>
                    <a id="orig" href="#">orig</a>
                    <a id="update" href="#">update</a>
                </span>
                <div id="viewer" class="viewer"></div>
                <br />
                <div id="viewer2" class="viewer"></div>
                <br />
                <p><a href="#" id="chimg">Change Image</a></p>
            </div>
    	</section>
    	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
    		<time datetime="2012-02-28T22:18:29.601+01:00" pubdate>2012-02-28T22:18:29.601+01:00</time>
    		<span itemprop="name">Daniel Hagnoul</span>
    		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
    		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
    		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
    		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
    	</footer>
    	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/i18n/jquery-ui-i18n.min.js"></script>
    	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
    	<script charset="utf-8" src="../lib/jquery.mousewheel.min.js"></script>
    	<script charset="utf-8" src="../iViewer/jquery.iviewer.min.js"></script>
    	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
    	<script>	
    "use strict";
     
    $(function(){
    	var iv1 = $("#viewer").iviewer({
    		src: "http://danielhagnoul.developpez.com/images/imageTest.png", 
    		update_on_resize: false,
    		zoom_animation: false,
    		onMouseMove: function(ev, coords) { },
    		onStartDrag: function(ev, coords) { return false; }, //this image will not be dragged
    		onDrag: function(ev, coords) { }
    	});
     
    	$("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
    	$("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
    	$("#fit").click(function(){ iv1.iviewer('fit'); }); 
    	$("#orig").click(function(){ iv1.iviewer('set_zoom', 100); }); 
    	$("#update").click(function(){ iv1.iviewer('update_container_info'); });
     
    	var iv2 = $("#viewer2").iviewer({
    		src: "http://danielhagnoul.developpez.com/images/badge.jpg"
    	});
     
    	$("#chimg").click(function(){
    		iv2.iviewer('loadImage', "http://danielhagnoul.developpez.com/images/avatarDVJH.jpg");
    		return false;
    	});
    });
     
    $(window).load(function(){
     
    });
    	</script>
    </body>  
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éclairé Avatar de tigunn
    Homme Profil pro
    Développeur de bug
    Inscrit en
    Janvier 2003
    Messages
    608
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur de bug

    Informations forums :
    Inscription : Janvier 2003
    Messages : 608
    Par défaut
    Bonjour,

    Tout d'abord merci de ton intérêt .
    J'étais resté assez vague dans mes précédents post car je n'avais pas vraiment d'idée sur l'origine du problème.

    Donc sur une page mère:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <?php
    $session = new Session();
     
    $html = new html();
    $html->page_title = $titre_page;
    $html->body_open('header_popup.php');
     
    $html->addJavascriptLibrary('jquery.screw.js');
    $html->addJavascriptLibrary('jquery.iviewer.js');
    $html->addJavascriptLibrary('jquery.mousewheel.js');
    $html->addJqueryUI();
     
    $html->importCSS('style_formulaire.css');
    $html->importCSS('style_lecture_vCit.css');
    $html->importCSS('jquery.iviewer.css');
    $html->importCSS('jquery.iviewer_surcharge.css');
    ?>
    <script type="text/javascript">	
    jQuery(document).ready(function($){
    	jQuery.noConflict();
       jQuery('body').screw({
       		loadingHTML: '<div class="div_en_chargement"><img alt="Loading ..." src="images/ajax-loader.gif"/><span class="text_chargement_en_cours">Chargement en cours ...</span></div>'
       });
       //jQuery('.viewer img').css('left', '15px');
    });
    </script>
    <?php
    //      AFFICHAGE 
    echo '<div class="lecture_globale">';
                    //      definitions
                    $nb_items = 0;
                    $num_item=0;
                    $nb_items = $agencement_en_cours->getNbItems();
                    //      Parcours de tous les items
                    //------------------------------
                    while ($num_item < $nb_items) {
                            $item_en_cours = $agencement_en_cours->getItem($num_item);
    ?>
    <script type="text/javascript"> 
    jQuery(document).ready(function(){
    	//	Accordéon
    	jQuery("#item_titre_<?php echo $item_en_cours->getId() ?>").click(function(){    
    		jQuery("#item_<?php echo $item_en_cours->getId() ?>").slideToggle("normal");
    	});
    	//jQuery('.viewer img').css('left', '15px');
    });
    </script>
    <?php
    			echo '<div class="ligne_image_text">';
    				/*###	IMG - TITRE	###*/
    				echo '<div class="img_blank" title=""></div>';
    				/*###	ITEM - TITRE	###*/
    				echo '<div id="item_titre_'.$item_en_cours->getId().'" class="item_titre" title="'.$item_en_cours->getDescription().'">
    					<div class="item_titre_gadjet" id="item_titre_gadjet_'.$item_en_cours->getId().'"></div>
    					<div class="item_titre_titre">'.$item_en_cours->getTitre().'</div>
    				</div>';
    			echo '</div>';
    			echo '<div id="item_'.$item_en_cours->getId().'" class="item">';
    			agencement_item::afficheItem($item_en_cours, $num_item);
    			echo '</div>';
    			$num_item++;
    			unset($item_en_cours);
    		}
     
    echo '</div>';
    $html->body_close();
    La méthode récursive pour afficher un item et ses fils:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
     
    	/**
    	 * Affiche un item (selon son type), ses fils et les fragments, citations liés
    	 *
    	 * @param	agencement_item		$item_en_cours
    	 * @param 	int 				$num_item
    	 */
    	public static function afficheItem($item_en_cours, $num_item) {
    		$_SESSION['lbl_'.$item_en_cours->getId()] = serialize($item_en_cours);
    		echo '<span class="screw" rel="./lecture_label.php?item='.$item_en_cours->getId().'&lbl='.$item_en_cours->getId().'"></span>';
    		//	Récuperer les items fils
    		//---------------------------
    		$nb_items_fils = $item_en_cours->getNbItems();
    		$num_item_fils=0;
    		while ($num_item_fils < $nb_items_fils) {
    			$item_fils = $item_en_cours->getItem($num_item_fils);
    			switch ($item_fils->getTypeItem()) {
    				case 'citation' :
    				case 'fragment' :
    					//	ne rien faire
    					break;
    				case 'terme' :
    					//	Méthode JQuery pour accordéon
    					?>
    					<script type="text/javascript"> 
    					jQuery(document).ready(function(){
    						jQuery("#label_terme_<?php echo $item_fils->getId() ?>").click(function(){
    							jQuery("#label_<?php echo $item_fils->getId() ?>").slideToggle("normal");
    						});
    						//jQuery('.viewer img').css('left', '15px');
    					});
    					</script>
    					<?php
                                            echo '<div class="ligne_image_text">';
                                                    /*###   IMG - TITRE     ###*/
                                                    echo '<div class="img_blank" title=""></div>';
                                                    /*###   LABEL - TERME   ###*/
                                                    echo '<div id="label_terme_'.$item_fils->getId().'" class="label_terme" title="'.$item_fils->getTypeItem().'">
                                                            <div class="label_terme_gadjet"></div>
                                                            <div class="label_terme_terme">"'.$item_fils->getTitre().'"</div>
                                                    </div>';
                                            echo '</div>';
                                            echo '<div id="label_'.$item_fils->getId().'" class="label">';
                                                    $_SESSION['lbl_'.$item_fils->getId()] = serialize($item_fils);
                                                    echo '<span class="screw" rel="./lecture_label.php?item='.$item_fils->getId().'&lbl='.$item_fils->getIdTerme().'"></span>';
                                            echo '</div>';
                                            break;
                                    case 'titre' :
                                    default:
                                            ?>
    					<script type="text/javascript"> 
    					jQuery(document).ready(function(){
    						/*---	Slide Toggle	---*/
    						jQuery("#item_titre_<?php echo $item_fils->getId() ?>").click(function(){
    							jQuery("#item_<?php echo $item_fils->getId() ?>").slideToggle("normal");
    							});
    						//jQuery('.viewer img').css('left', '15px');
    					});
    					</script>
    					<?php
    					echo '<div class="ligne_image_text">';
    						/*###	IMG - TITRE	###*/
    						echo '<div class="img_blank" title=""></div>';
    						/*###	ITEM - TITRE	###*/
    						echo '<div id="item_titre_'.$item_fils->getId().'" class="item_titre" title="'.$item_fils->getDescription().'">
    							<div class="item_titre_gadjet" id="item_titre_gadjet_'.$item_fils->getId().'"></div>
    							<div class="item_titre_titre">'.$item_fils->getTitre().'</div>
    						</div>';
    					echo '</div>';
    					echo '<div id="item_'.$item_fils->getId().'" class="item">';
    					agencement_item::afficheItem($item_fils, $num_item_fils);
    					echo '</div>';
    					break;
    			}
    			$num_item_fils++;
    		}
    	}
    La page, lecture_label.php, appelée dynamiquement avec Screw (plugin jQuery ):
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <?php
    require_once('../classes/exist_phpapi.inc');
    $session = new Session();
     
    $id_lbl = null;
    $id_item = null;
    $mode = 'simple';
     
    if (isset($_GET['lbl'])) {
            $id_lbl = $_GET['lbl'];
    }
    if (isset($_GET['item'])) {
            $id_item = $_GET['item'];
    }
    if (isset($_GET['mode'])) {
            $mode = $_GET['mode'];
    }
    //      Désérialisé l'item en cours
    $item_en_cours=unserialize($_SESSION['lbl_'.$id_item]);
     
    $num_item = 0;
    $id_item=0;
    $nb_items = $item_en_cours->getNbItems();               // nombre de citation associés à l'item en cours 
     
    while ($num_item < $nb_items) {
            $liste_fragments = array();
     
            // Pour chaque item de type citation
            $item_cit = $item_en_cours->getItem($num_item);
            $id_item = $item_en_cours->getId();
     
            if ($item_cit->getTypeItem() == 'citation') {
                    $citation_en_cours = $item_cit->getCitation();
                    $fragment_ref = $citation_en_cours->getFragmentReference();
                    $liste_fragments[]=$fragment_ref;
                    //      Affichage
                    //------------
                    ?>
    		<script type="text/javascript"> 
    		jQuery(document).ready(function(){
    			jQuery("#bloc_citation_header_titre_<?php echo $id_item.'_'.$citation_en_cours->getId() ?>").click(function() {
    				jQuery("#bloc_citation_body_<?php echo $id_item.'_'.$citation_en_cours->getId() ?>").slideToggle("normal", function() {
    					if (jQuery("#bloc_citation_body_<?php echo $id_item.'_'.$citation_en_cours->getId() ?>").css('margin-bottom')=='5px') {
    				    	jQuery("#bloc_citation_body_<?php echo $id_item.'_'.$citation_en_cours->getId() ?>").css('margin-bottom', '0px');
    				    }
    				    else {
    				    	jQuery("#bloc_citation_body_<?php echo $id_item.'_'.$citation_en_cours->getId() ?>").css('margin-bottom', '5px');
    				    }
    				});
    			});
    		});
    		</script>
    		<?php
    		echo '<div class="ligne_citation">';
    			echo '<div class="img_blank" title=""></div>';
    			// aff du bloc citation
    			echo '<div class="citation">';
    				//	Header
    				echo '<div id="bloc_citation_header_'.$id_item.'_'.$citation_en_cours->getId().'" class="bloc_citation_header" title="'.$citation_en_cours->getCommentaire().'">';
    					//	titre
    					echo '<div id="bloc_citation_header_titre_'.$id_item.'_'.$citation_en_cours->getId().'" class="bloc_citation_header_titre" title="'.$fragment_ref->getNotesGenerales().'">';
    					echo bibliography::afficheTitreRaccourciOuComplet($fragment_ref->getIntituleObjet(), '', true);
    					echo '</div>';
    					//	Toggle des fragments
    					echo '<div id="bloc_citation_header_toggle_'.$id_item.'_'.$citation_en_cours->getId().'" class="bloc_citation_header_toggle"></div>';
    					//	infos connexes
    					echo '<div class="bloc_citation_header_metadonnees" title="'.$fragment_ref->getNotesGenerales().'">';
    					echo $fragment_ref->fragment->getStadeTypologiePourAffichage();
    					echo ' Edition normalisée';
    					echo '</div>';
    				echo '</div>';
    				//	Body
    				$id_cit=$citation_en_cours->getId();
    				echo '<div id="bloc_citation_body_'.$id_item.'_'.$id_cit.'" class="bloc_citation_body">';
    				foreach ($liste_fragments as $k_liste => $fragment_en_cours) {
    						include('lecture_fragment.php');
    				}
    				echo '</div>';
    			echo '</div>';
    		echo '</div>';
    	}
    	$num_item++;
    }
    La page lecture_fragment.php chargée d'afficher les imagettes de chaque fragment et leur texte, par une transformation xslt:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    <?php
    require_once('../classes/exist_phpapi.inc');
    //	definition de la cote et du numéro de fragment
    $ref_bib_doc = $fragment_en_cours->fragment->getCote();
    $ref_bib_cote = $ref_bib_doc;
    $ref_bib_num_frag = $fragment_en_cours->fragment->getNumeroFragment();
    $affichage_possible=true;
    $affichage_possible_img=true;
    $file_name = null;
    if (($ref_bib_doc=='') || ($ref_bib_num_frag=='')) {
    	$affichage_possible=false;
    	$affichage_possible_img=false;
    }
    else {
    	$file_name=$ref_bib_doc.'-'.$ref_bib_num_frag.'.jpg';
    	$path_img=PATH_APPLICATION.'/files/fragments/'.$ref_bib_doc.'/'.$file_name;
    	if (!file_exists($path_img)) {
    		$affichage_possible_img=false;
    	}
    	else {
    		$taille_div_img=80;		//	TODO : temporaire
    	}
    	$ref_bib_doc .= '-ver3.xml';
    	$fragment='';
     
    	$db_xml = new xqueryBP();
    $fragment=$db_xml->getFragmentSelonSaCoteEtSonNumero($ref_bib_doc, $ref_bib_num_frag);// retourne une partie du doc xml
    	if ($fragment=='') {
    		$fragment='<item><fragment></fragment></item>';
    		$affichage_possible=false;
    	}
    	$xml=new DOMDocument();
    	$xml->loadXML('<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="'.PATH_APPLICATION.'/templates/affichage_fragment_diplo.xsl"?>'.$fragment);
    	$xsl=new DOMDocument();
    	$xsl->load(PATH_APPLICATION.'/templates/affichage_fragment_diplo.xsl', LIBXML_NOCDATA);
    	$proc = new XSLTProcessor();
    	$proc->importStylesheet($xsl);
    	//===
    	$xml2=new DOMDocument();
    	$xml2->loadXML('<?xml version="1.0"?><?xml-stylesheet type="text/xsl" href="'.PATH_APPLICATION.'/templates/affichage_fragment_norm.xsl"?>'.$fragment);
    	$xsl2=new DOMDocument();
    	$xsl2->load(PATH_APPLICATION.'/templates/affichage_fragment_norm.xsl', LIBXML_NOCDATA);
    	$proc2 = new XSLTProcessor();
    	$proc2->importStylesheet($xsl2);
    }
    </script>';	
    /*###	IMG - TITRE	###*/
    if ($affichage_possible_img) {
    	?>
    	<script type="text/javascript"> 
    	jQuery(document).ready(function(){
    		jQuery("#viewer_<?php echo $id_item.'_'.$fragment_en_cours->getId() ?>").iviewer({
                  src: "show_fragment.php?file=<?php echo $file_name ?>",
                  update_on_resize: true,
                  ui_disabled: false,
                  zoom_delta:1.2,
                  initCallback: function () {
                      var object = this;
                      jQuery("#in").click(function(){ object.zoom_by(1);});
                      jQuery("#out").click(function(){ object.zoom_by(-1);});
                   }
             });
             //	Pour chaque viewer, masquer les icones fit, orig et update
             jQuery('.iviewer_zoom_status').css('display', 'none');
             jQuery('.iviewer_zoom_fit').css('display', 'none');
             jQuery('.iviewer_zoom_zero').css('display', 'none');
             //	Placer les icônes in et out sur la droite du bloc .viewer
             jQuery('.iviewer_zoom_in').css('position', 'relative').css('float', 'right').css('margin-right', '28px').css('top', '8px');
             jQuery('.iviewer_zoom_out').css('position', 'relative').css('float', 'right').css('margin-right', '5px').css('top', '42px');
    	});
    	</script>
    	<?php
    	echo '<div class="imagette" title="'.$ref_bib_cote.'_'.$ref_bib_num_frag.'" style="height: '.$taille_div_img.'px;">
    				<div id="viewer_'.$id_item.'_'.$fragment_en_cours->getId().'" class="viewer"></div>
    			</div>';
    }
    else {
    	echo '<div class="img_indisponible" title="'.gettext('Imagette indisponible').'" style="height: '.$taille_div_img.'px;">'
    	.gettext('Imagette indisponible').'
    			</div>';
    }
    /*###	FRAGMENT - LECTURE SIMPLE	###*/
    //	Body
    	echo '<div id="fragment_body_'.$id_item.'_'.$fragment_en_cours->getId().'" class="bloc_fragment_body" title="'.$fragment_en_cours->getNotesGenerales().'">';
    	//	marques & notes en marge
    	echo '<div class="bloc_fragment_body_marques" title="'.gettext('Marques et notes en marges').'">';
    	//	CONTENU
    	echo '</div>';
    	//	marques & notes en marge
    	echo '<div class="bloc_fragment_body_tei" title="'.gettext('Transcription').'">';
    		if ($affichage_possible==true) {
    			echo $proc->transformToXml($xml);
    		}
    		else {
    			echo 'Voir la transcription';
    		}
    	echo '</div>';
    echo '</div>';
    Maintenant les css:
    J'utilise la css fournie avec iViewer, c-a-d jquery.iviewer.css; plus toutes celle en pièce jointe.
    1er problème (css sans doute) : je suis obligé de surchargé ma css iviewer pour que mes balises <img> contenue dans .iviewer ne soit pas complètement à gauche et tronquée.Pour l'instant, elle ont pour style:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    position: absolute; left: -86.4px; top: 30.75px;
    J'ai beaucoup apprécié ton exemple, preuve que c'est possible
    2ème problème: pourquoi ne puis-je pas redimensionner mon img a la taille de mon div imagette?

    Je ne peux pas te donner le lien en local du site, mais j'espère que ces codes seront utiles (et que je n'ai pas, par mégarde, supprimer trop de code pour le rendre lisible).

    @danielhagnoul >> Merci encore pour ton exemple très bien fait.
    pêle-mêle:
    On parle bien du widget jQuery UI iviewer https://github.com/can3p/iviewer/wiki, http://test.dpetroff.ru/jquery.iviewer/test/ ?
    oui
    Et de la version 0.7 ? https://github.com/can3p/iviewer/zipball/master
    non, quelle version, je ne sais pas
    Vous utilisez bien le CSS de iViewver en plus de celui de UI ?. j'utilise la css de iviewer mais pas celle de ui
    Fichiers attachés Fichiers attachés

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Désolé pour le manque de réactivité, je suis "en bataille" avec du SVG.

    Du code ?

    Je disais déjà plus haut : "Vous donnez des fragments de code PHP plutôt que le code affiché dans votre navigateur..."

    Avec ma page de test, lorsque l'on provoque un agrandissement trop important avec la molette de la souris, l'image disparaît vers la gauche.

    Si je charge une image trop grande par rapport à la taille de l'iViewver (.viewer { position:relative; width:50%; height:500px; border:1px solid black; }) elle s'affiche en réduction (25% de sa taille normale) mais si je l'agrandis elle disparaît aussi vers la gauche.

    De même, si je clique sur le bouton "1:1" elle disparaît à gauche, si je clique sur le bouton suivant elle revient à 25% de sa taille originale.

    Idée : la taille de votre image est supérieure à celle de votre iViewer et par le choix de vos options vous provoquez l'affichage en taille réelle ce qui entraîne la disparition à gauche. La version de l'iViewer n'est pas la 0.7 ! J'ai comparé le code de ma version avec celle que vous avez postée !

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [ODS PDF] Plusieurs tableau sur une même page
    Par PAULOM dans le forum ODS et reporting
    Réponses: 0
    Dernier message: 06/05/2010, 10h43
  2. Plusieurs graphiques sur une même page
    Par Iloon dans le forum Macros et VBA Excel
    Réponses: 10
    Dernier message: 08/07/2008, 14h59
  3. Plusieurs formulaires sur une même page
    Par patsak dans le forum Langage
    Réponses: 3
    Dernier message: 11/06/2008, 16h14
  4. [JpGraph] Plusieurs graphes sur une même page
    Par Dam1en dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 28/12/2007, 23h13
  5. [C#][SVG] Combinaison de plusieurs graphe sur une même page
    Par doudoustephane dans le forum ASP.NET
    Réponses: 2
    Dernier message: 22/11/2006, 09h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo