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:

---

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:

---

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?!

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:

---

1 2 3 4 5

jQuery(document).ready(function(){ .... jQuery('.viewer img').css('left', '15px'); .... });

---

Et cela fonctionne ... quant ça veut ! :aie::aie::aie:
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 :cry:

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:

---

1 2 3

.viewer img { margin-left: 100px; }

---

Ce qui fonctionne mais ne résout pas tout. :evilred:
Je ne réussit pas à mettre cette img au centre de son parent :cry::scarymov: (cf pièce jointe) ; et, je n'arrive pas non plus à redimensionner mon image grâce au plugin.

Code:

---

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 :)

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 :aie: ).

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:

---

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>

---

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:

---

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:

---

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:

---

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:

---

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:

---

position: absolute; left: -86.4px; top: 30.75px;

---

J'ai beaucoup apprécié ton exemple, preuve que c'est possible :mrgreen:
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:

Citation:

---

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

---

Bonsoir

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

Du code ? :aie:

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 !

Salut Daniel,
Tout d'abord, pas de problème, vous restez bien plus réactif et pertinent que moi ; flatflat ;)
Plaisanteries mise à part, voici le code généré:

Code:

---

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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>- DEV -</title> <link rel="stylesheet" title="- DEV -" media="screen" type="text/css" href="style/get_css.php" /> <link rel="shortcut icon" href="favicon.ico" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />   <script type="text/javascript" src="jscripts/jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="jscripts/fct_affichage.js" ></script> <script type="text/javascript" src="jscripts/jquery.jgrowl_minimized.js" ></script> <script type="text/javascript" src="jscripts//datatable/media/js/jquery.dataTables.min.js" ></script> </head> <body> <div id="header_popup"> <a id="logo_site_popup" href="./" title="Retourner à l'accueil"></a> <a class="button_close" href="#" onclick="javascript:window.close();" title="fermer"> fermer</a><a style="float:right;" href="panier.php"><img src="images/cart-16.png" alt="Vos paniers"/></a> </div>   <noscript><div class="erreur">JavaScript doit être activé pour utiliser certaines fonctionnalités du site.<br />Il semble que ce langage soit désactivé ou qu'il ne soit pas pris en charge dans votre navigateur.</div></noscript>   <script type="text/javascript" src="jscripts/jquery.screw.js" ></script> <script type="text/javascript" src="jscripts/jquery.mousewheel.js" ></script> <script type="text/javascript" src="jscripts/jquery.iviewer.js" ></script> <script type="text/javascript" src="jscripts/jquery-ui-1.8.17.custom.min.js" ></script> <style type="text/css">@import url(style/style_formulaire.css);</style> <style type="text/css">@import url(style/style_lecture_vCit.css);</style> <style type="text/css">@import url(style/jquery.iviewer.css);</style> <style type="text/css">@import url(style/jquery.iviewer_surcharge.css);</style><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('#button_save_agencement').click(function() {   });   jQuery('#button_copy_agencement').click(function() {   }); }); </script> <fieldset class="form_agencement"> <legend>Propriétés de l'agencement</legend><form action="save_ag.php" method="post" title="Propriétés de l'agencement" id="form_agencement"> <div class="general_agencement"> <div class="proprietes_agencement"> <label for="titre">Titre</label> <input type="text" id="titre" name="titre" value="Ag temporaire" tabindex="1" size="66" maxlength="255"/> <label for="desc">Description</label> <textarea cols="50" id="description" name="description" rows="1" tabindex="2" title="Description" class="resizable">pour test HS</textarea> </div> <div class="proprietes_agencement"> <label for="chekbox_ref">Bloquer les modifications</label> <input type="checkbox" id="chekbox_ref" name="reference" /><br/> <label for="chekbox_public">Rendre publique</label> <input type="checkbox" id="chekbox_public" name="public" /> </div> <div class="button_agencement"> <input type="button" class="button" style="width: 100px" value="Enregistrer" name="save_agencement" id="button_save_agencement" /> <!-- DUPLIQUER AGENCEMENT --> <input type="button" class="button" style="width: 100px" value="Dupliquer" name="copy_agencement" id="button_copy_agencement" /> </div> </div> </form> <div class="aff_agencement_mode"> <!-- GESTION AFFICHAGE --> Lecture <input type="radio" name="mode" id="mode_simple" value="simple" checked/> <label for="mode_simple">Simple</label> <input type="radio" name="mode" id="mode_savant" value="savante"/> <label for="mode_savant">Savante</label> </div><div class="aff_agencement_show"><a href="" title="Tout afficher" onclick="alert('et hop')">Développer</a> / <a href="" title="Tout cacher" onclick="alert('plouf')">Masquer</a>&nbsp;tout</div></fieldset><div class="lecture_globale"><script type="text/javascript"> jQuery(document).ready(function(){ // Accordéon jQuery("#item_titre_11436").click(function(){ jQuery("#item_11436").slideToggle("normal"); // Affichage du gadjet en fonction de l'état des items (affiché / masqué) if (jQuery('#item_titre_gadjet_11436').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_11436').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_11436').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_11436').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_11436').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_11436').addClass('item_titre_gadjet_plus'); } else { if (jQuery('#item_titre_gadjet_11436').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_11436').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_11436').addClass('item_titre_gadjet_plus'); } } } }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_11436" class="item_titre" title=""> <div class="item_titre_gadjet" id="item_titre_gadjet_11436"></div> <div class="item_titre_titre">Philosophie</div> </div></div><div id="item_11436" class="item"><span class="screw" rel="./lecture_label.php?item=11436"></span> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#label_terme_11438").click(function(){ jQuery("#label_11438").slideToggle("normal"); }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="label_terme_11438" class="label_terme" title="terme"> <div class="label_terme_gadjet"></div> <div class="label_terme_terme">"Platon"</div> </div></div><div id="label_11438" class="label"><span class="screw" rel="./lecture_label.php?item=11438"></span></div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#label_terme_11441").click(function(){ jQuery("#label_11441").slideToggle("normal"); }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="label_terme_11441" class="label_terme" title="terme"> <div class="label_terme_gadjet"></div> <div class="label_terme_terme">"Socrate"</div> </div></div><div id="label_11441" class="label"><span class="screw" rel="./lecture_label.php?item=11441"></span></div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#label_terme_11447").click(function(){ jQuery("#label_11447").slideToggle("normal"); }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="label_terme_11447" class="label_terme" title="terme"> <div class="label_terme_gadjet"></div> <div class="label_terme_terme">"Luther"</div> </div></div><div id="label_11447" class="label"><span class="screw" rel="./lecture_label.php?item=11447"></span></div></div><script type="text/javascript"> jQuery(document).ready(function(){ // Accordéon jQuery("#item_titre_11437").click(function(){ jQuery("#item_11437").slideToggle("normal"); // Affichage du gadjet en fonction de l'état des items (affiché / masqué) if (jQuery('#item_titre_gadjet_11437').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_11437').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_11437').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_11437').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_11437').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_11437').addClass('item_titre_gadjet_plus'); } else { if (jQuery('#item_titre_gadjet_11437').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_11437').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_11437').addClass('item_titre_gadjet_plus'); } } } }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_11437" class="item_titre" title=""> <div class="item_titre_gadjet" id="item_titre_gadjet_11437"></div>   <div class="item_titre_titre">Sciences et techniques</div> </div></div><div id="item_11437" class="item"><span class="screw" rel="./lecture_label.php?item=11437"></span> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#label_terme_11457").click(function(){ jQuery("#label_11457").slideToggle("normal"); }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="label_terme_11457" class="label_terme" title="terme"> <div class="label_terme_gadjet"></div> <div class="label_terme_terme">"Sénèque"</div> </div></div><div id="label_11457" class="label"><span class="screw" rel="./lecture_label.php?item=11457"></span></div></div></div> <div id="footer"> <p>Copyright © 2007-2012&nbsp; <abbr title="L">fg</abbr>&nbsp; <abbr title="" lang="fr">f</abbr> 5611&nbsp;/&nbsp; <abbr title=""></abbr>&nbsp; <abbr title="" lang="fr"></abbr> 3385 &nbsp;-&nbsp; <a href="./mentions-legales"> Mentions légales</a> &nbsp;-&nbsp; <a href="./contact"> Contacts</a> &nbsp;-&nbsp; <a class="flag_fr" href="change_locale.php?locale=fr_FR.UTF-8" title="Site en français">Français</a> &nbsp;-&nbsp; <a class="flag_gb" href="change_locale.php?locale=en_GB.UTF-8" title="English web site">English</a> &nbsp;-&nbsp; <a class="flag_es" href="change_locale.php?locale=es_ES.UTF-8" title="Sitio en español">Español</a> &nbsp;-&nbsp; <a class="flag_it" href="change_locale.php?locale=it_IT.UTF-8" title="Sito web italiano">Italiano</a> </p> <p>Moi&nbsp;-&nbsp;Administrateurs [<a href="form_user.php">mon compte</a>] &nbsp;-&nbsp;[<a href="login.php?logout">se déconnecter</a>]&nbsp;-&nbsp;ver. 2.0</p></div><br /></body></html>

---

Mes imagettes sont chargées dynamiquement depuis la page lecture_label.php grâce au plugin jQuery, Screw. Ce dernier permet de charger des blocs au défilement de la page.

Effectivement toutes mes images sont plus grandes que leur conteneur .viewer; c'est une piste sur laquelle je vais me pencher.

Par contre, ce n'est pas moi qui est récupéré iViewer, et il n'y a aucune indication de version. Ce n'est, toutefois, pas la 0.7. Si je remplace ma version actuelle par cette dernière, l'affichage ne fonctionne plus. :(

Bonsoir

En voyant le code PHP, je me disais bien qu'il y avait des choses étranges, mais avec le code traité par le navigateur on se rend tout de suite compte de l'étendue des dégâts. Quelle salade de tags !

Un point crucial, vous devez inclure jQuery UI juste après jQuery et certainement avant les scripts qui s'en servent comme iViewver.

Pourquoi noConflict() ? La manière d'utiliser noConflict() est ... Oh oui ! Voir la FAQ : http://javascript.developpez.com/faq...uction#Symbole

Citation:

---

Mes imagettes sont chargées dynamiquement depuis la page lecture_label.php grâce au plugin jQuery, Screw

---

Oui ! Mais j'ai été incapable, dans ladite salade, de repérer le code qui initialise ou utilise le iViewer ! :koi:

Citation:

---

Envoyé par danielhagnoul

Bonsoir

En voyant le code PHP, je me disais bien qu'il y avait des choses étranges, mais avec le code traité par le navigateur on se rend tout de suite compte de l'étendue des dégâts. Quelle salade de tags !

Un point crucial, vous devez inclure jQuery UI juste après jQuery et certainement avant les scripts qui s'en servent comme iViewver.

Pourquoi noConflict() ? La manière d'utiliser noConflict() est ... Oh oui ! Voir la FAQ : http://javascript.developpez.com/faq...uction#Symbole



Oui ! Mais j'ai été incapable, dans ladite salade, de repérer le code qui initialise ou utilise le iViewer ! :koi:

---

Mon cher cuistot :zoubi: ,

jQuery UI est bien inclut après jQuery; et avant l'utilisation de iViewer.
Le noConflict(), je l'ai rajouté lors de mes multiples tests pour comprendre ce qu plantait, au cas où ... mais je reconnais qu'il n'a aucune utilité. :?
Quant au code utilisant iViewer, j'ai bien expliqué qu'il se trouvait sur la page lecture_label.php, page qui est chargée dynamiquement grâce au plugin Screw de jQuery, et qui n'apparait donc pas dans les sources autrement que

Code:

---

<span class="screw" rel="./lecture_label.php?item=..."></span>

---

Je vais essayer de tester ton idée de taille dès que je pourrais.

Bonsoir

Citation:

---

jQuery UI est bien inclut après jQuery; et avant l'utilisation de iViewer.

---

:calim2: Voir les lignes 25 et 26 du code du message n° 4.

Code:

---

1 2	<script type="text/javascript" src="jscripts/jquery.iviewer.js" ></script> <script type="text/javascript" src="jscripts/jquery-ui-1.8.17.custom.min.js" ></script>

---

Nota bene : pour cette salade, le cuisinier ce n'est pas moi !

Salut,
j'essaierais de faire

Code:

---

1 2 3

<script type="text/javascript" src="jscripts/jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="jscripts/jquery-ui-1.8.17.custom.min.js" ></script> <script type="text/javascript" src="jscripts/jquery.iviewer.js" ></script>

---

SAns doute pas de sitôt, car iviewer m'a saoulé, et j'ai d'autres impératifs plus urgent.

Citation:

---

Nota bene : pour cette salade, le cuisinier ce n'est pas moi !

---

Ca t'a vexé? J'aurais dût dire le critique; pour ma part, je reconnais que ce n'est pas un très beau plat ... :mouarf:

J'ai réduit la taille des images mais cela ne change rien.
L'image est toujours réduite proportionnellement au conteneur, et la moitié gauche hors du conteneur.
Same same

Bon, j'ai un peu plus de temps pour reprendre tout cela. :?

Tout d'abord, mon problème semble lié à l'utilisation de Screw, car j'ai repris mes pages pour m'en passer; cela résout tous mes problèmes d'affichage. :D
Par contre, les performances sont ... très mauvaises.
Par exemple l'affichage de l'agencement (=arbre avec image-iViewer et texte-xslt2 ) suivant (10 citations avec 1 citation = image + texte) prend environ 17 sec. :aie:

J'ai fait ce code hier soir, certaines améliorations sont évidentes, pour les performances; notamment l'utilisation de XML_XSLT2Processor.
Je transmet le html généré avec cette (solution très temporaire ):

Code:

---

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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title> | - DEV -</title> <link rel="stylesheet" title="- DEV -" media="screen" type="text/css" href="style/get_main_css.php" /> <link rel="shortcut icon" href="favicon.ico" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jscripts/jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="jscripts/fct_affichage.js" ></script> <script type="text/javascript" src="jscripts/jquery.jgrowl_minimized.js" ></script> <script type="text/javascript" src="jscripts//datatable/media/js/jquery.dataTables.min.js" ></script> <style type="text/css">@import url(style/jquery.iviewer.css);</style> </head> <body> <div id="header_popup"> </div> <script type="text/javascript" src="jscripts/jquery.screw.js" ></script> <script type="text/javascript" src="jscripts/jquery.mousewheel.js" ></script> <script type="text/javascript" src="jscripts/jquery.iviewer.js" ></script> <script type="text/javascript" src="jscripts/jquery-ui-1.8.17.custom.min.js" ></script> <style type="text/css">@import url(style/style_formulaire.css);</style> <style type="text/css">@import url(style/style_lecture_vCit.css);</style> <style type="text/css">@import url(style/jquery.iviewer.css);</style> <div class="lecture_globale"><script type="text/javascript"> jQuery(document).ready(function(){ // Accordéon jQuery("#item_titre_93688").click(function(){ jQuery("#item_93688").slideToggle("normal"); if (jQuery('#item_titre_gadjet_93688').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_93688').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93688').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93688').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_93688').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_93688').addClass('item_titre_gadjet_plus'); } else { if (jQuery('#item_titre_gadjet_93688').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_93688').removeClass('item_titre_gadjet_minus'); jQuery('#item_titre_gadjet_93688').addClass('item_titre_gadjet_plus'); } } } }); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93688" class="item_titre" title=""> <div class="item_titre_gadjet" id="item_titre_gadjet_93688"></div> <div class="item_titre_titre">Exaltation du bas</div>   </div></div><div id="item_93688" class="item"> <script type="text/javascript"> jQuery(document).ready(function(){   /*--- Indentation ---*/ margin_left_titre = jQuery("#item_titre_93688").css('margin-left'); margin_left_titre = parseInt(String(margin_left_titre).substring(0, margin_left_titre.length-2))+10; jQuery("#item_titre_93689").css('margin-left', margin_left_titre+'px'); width_titre = jQuery("#item_titre_93689").css('width'); width_titre = parseInt(String(width_titre).substring(0, width_titre.length-2)); width_titre = width_titre - margin_left_titre; jQuery("#item_titre_93689").css('width', width_titre+'px');   /*--- Slide Toggle ---*/ jQuery("#item_titre_93689").click(function(){   jQuery("#item_93689").slideToggle("normal");   // Accordéon // Affichage du gadjet en fonction de l'état des items (affiché / masqué) if (jQuery('#item_titre_gadjet_93689').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_93689').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93689').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93689').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_93689').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93689').removeClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93689').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_93689').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93689').removeClass('item_titre_gadjet_minus'); } } } });   //jQuery('.viewer img').css('left', '15px'); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93689" class="item_titre" title="(VI 276 Fn ; I 93 L)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93689"></div> <div class="item_titre_titre">Exaltation du Bas - n°1470 (VI 276 Fn ; I 93 L)</div> </div></div><div id="item_93689" class="item"> <script type="text/javascript"> jQuery(document).ready(function(){   jQuery("#bloc_citation_header_toggle_93689_265").click(function() {   jQuery("#bloc_citation_body_93689_265").slideToggle("normal", function() {   if (jQuery("#bloc_citation_header_93689_265").css('margin-bottom')=='5px') { jQuery("#bloc_citation_header_93689_265").css('margin-bottom', '0px'); jQuery("#bloc_citation_header_toggle_93689_265").css('background-image', 'url("../images/open.png")'); } else { jQuery("#bloc_citation_header_93689_265").css('margin-bottom', '5px'); jQuery("#bloc_citation_header_toggle_93689_265").css('background-image', 'url("../images/closed.png")'); } }); });   }); </script>   <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93689_265" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93689_265" class="bloc_citation_header_titre" title=""><a href="c-265" target="_blank" class="lecture_lien_citation">De Maistre. Consid. sur la France. [...]</a></div><div id="bloc_citation_header_toggle_93689_265" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93689_265" class="bloc_citation_body"> <script type="text/javascript">   jQuery(document).ready(function(){   jQuery("#viewer_93689_5936").iviewer({ src: "show_fragment.php?file=g226_1_f_093__r____-1.jpg", 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);}); } });   // 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>   <div class="imagette" title="g226_1_f_093__r_____1" style="height: 80px;"> <div id="viewer_93689_5936" class="viewer"></div> </div><div id="fragment_body_93689_5936" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-hand-GF-encre">législateurs</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-hand-GF-encre">l’homme ignorant bon législateur</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-1 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 1 ]</span>   </span> <span class="fragment-body"> <span class="seg-type-selection-crochet"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote"> <span class="hi-rend-underline">Les législateurs</span> ne sont jamais des savants, mais des inspirés - L’homme ignorant a priori peut être un bon législateur, mais s’agit-il de Bacon, de Locke, de Montesquieu <span class="reg--">etc.</span>, dites non sans balancer, car le talent qu’il a prouve qu’il n’a pas l’autre.</span>   <br/> <span class="bibl-norm&#xA; b5936-3-id-b5936-3">De Maistre. Consid<span class="ex--">érations</span> sur la France.</span> </span> </span> <span class="note-type-selection-hand-GF-crayon-hand-GF-crayon">]</span> </span>   </p> </div></div></div></div></div></div> <script type="text/javascript"> jQuery(document).ready(function(){   /*--- Indentation ---*/ margin_left_titre = jQuery("#item_titre_93688").css('margin-left'); margin_left_titre = parseInt(String(margin_left_titre).substring(0, margin_left_titre.length-2))+10; jQuery("#item_titre_93690").css('margin-left', margin_left_titre+'px'); width_titre = jQuery("#item_titre_93690").css('width'); width_titre = parseInt(String(width_titre).substring(0, width_titre.length-2)); width_titre = width_titre - margin_left_titre; jQuery("#item_titre_93690").css('width', width_titre+'px');   /*--- Slide Toggle ---*/ jQuery("#item_titre_93690").click(function(){   jQuery("#item_93690").slideToggle("normal");   // Accordéon // Affichage du gadjet en fonction de l'état des items (affiché / masqué) if (jQuery('#item_titre_gadjet_93690').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_93690').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93690').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93690').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_93690').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93690').removeClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93690').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_93690').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93690').removeClass('item_titre_gadjet_minus'); } } } });   //jQuery('.viewer img').css('left', '15px'); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93690" class="item_titre" title="(VI 278 v° Fn ; I 93 L)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93690"></div> <div class="item_titre_titre">La raison et le sens commun - n°1471 (VI 278 v° Fn ; I 93 L)</div> </div></div><div id="item_93690" class="item"> <script type="text/javascript"> jQuery(document).ready(function(){   jQuery("#bloc_citation_header_toggle_93690_1063").click(function() {   jQuery("#bloc_citation_body_93690_1063").slideToggle("normal", function() {   if (jQuery("#bloc_citation_header_93690_1063").css('margin-bottom')=='5px') { jQuery("#bloc_citation_header_93690_1063").css('margin-bottom', '0px'); jQuery("#bloc_citation_header_toggle_93690_1063").css('background-image', 'url("../images/open.png")'); } else { jQuery("#bloc_citation_header_93690_1063").css('margin-bottom', '5px'); jQuery("#bloc_citation_header_toggle_93690_1063").css('background-image', 'url("../images/closed.png")'); } }); });   }); </script>   <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93690_1063" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93690_1063" class="bloc_citation_header_titre" title=""><a href="c-1063" target="_blank" class="lecture_lien_citation">De Maistre. Soirées de St-Pétersbourg [...]</a></div><div id="bloc_citation_header_toggle_93690_1063" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93690_1063" class="bloc_citation_body"> <script type="text/javascript">   jQuery(document).ready(function(){   jQuery("#viewer_93690_5937").iviewer({ src: "show_fragment.php?file=g226_1_f_093__r____-2.jpg", 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);}); } });   // 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>   <div class="imagette" title="g226_1_f_093__r_____2" style="height: 80px;"> <div id="viewer_93690_5937" class="viewer"></div> </div><div id="fragment_body_93690_5937" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-hand-GF-encre">la <span class="hi-rend-underline">Raison <span class="reg--">et</span> le sens commun</span>.</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-2 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header">   <span class="title">[ 2 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote">Toutes les fois qu’elle (<span class="hi-rend-underline">la raison</span>) se trouve opposée au sens <span class="hi-rend-underline">commun</span>, nous devons la repousser comme une empoisonneuse.</span> <br/>   <span class="bibl-norm&#xA; b5937-3-id-b5937-3">De Maistre. Soirées de S<span class="ex--">ain</span>t-Pétersbourg</span> </span> </span> </p> </div></div></div></div></div></div> <script type="text/javascript"> jQuery(document).ready(function(){   /*--- Indentation ---*/ margin_left_titre = jQuery("#item_titre_93688").css('margin-left'); margin_left_titre = parseInt(String(margin_left_titre).substring(0, margin_left_titre.length-2))+10; jQuery("#item_titre_93691").css('margin-left', margin_left_titre+'px'); width_titre = jQuery("#item_titre_93691").css('width'); width_titre = parseInt(String(width_titre).substring(0, width_titre.length-2)); width_titre = width_titre - margin_left_titre; jQuery("#item_titre_93691").css('width', width_titre+'px');   /*--- Slide Toggle ---*/ jQuery("#item_titre_93691").click(function(){   jQuery("#item_93691").slideToggle("normal");   // Accordéon // Affichage du gadjet en fonction de l'état des items (affiché / masqué) if (jQuery('#item_titre_gadjet_93691').hasClass('item_titre_gadjet_plus').toString() == 'true') { jQuery('#item_titre_gadjet_93691').removeClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93691').addClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93691').hasClass('item_titre_gadjet_minus').toString() == 'true') { jQuery('#item_titre_gadjet_93691').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93691').removeClass('item_titre_gadjet_minus'); } else { if (jQuery('#item_titre_gadjet_93691').hasClass('item_titre_gadjet').toString() == 'true') { jQuery('#item_titre_gadjet_93691').addClass('item_titre_gadjet_plus'); jQuery('#item_titre_gadjet_93691').removeClass('item_titre_gadjet_minus'); } } } });   //jQuery('.viewer img').css('left', '15px'); }); </script> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93691" class="item_titre" title="(I 93 F)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93691"></div>   <div class="item_titre_titre">Le bourreau de Paris plus fort qu'A. Paré - n°1472 (I 93 F)</div> </div></div><div id="item_93691" class="item"> <script type="text/javascript"> jQuery(document).ready(function(){   jQuery("#bloc_citation_header_toggle_93691_1511").click(function() {   jQuery("#bloc_citation_body_93691_1511").slideToggle("normal", function() {   if (jQuery("#bloc_citation_header_93691_1511").css('margin-bottom')=='5px') { jQuery("#bloc_citation_header_93691_1511").css('margin-bottom', '0px'); jQuery("#bloc_citation_header_toggle_93691_1511").css('background-image', 'url("../images/open.png")'); } else { jQuery("#bloc_citation_header_93691_1511").css('margin-bottom', '5px'); jQuery("#bloc_citation_header_toggle_93691_1511").css('background-image', 'url("../images/closed.png")'); } }); });   }); </script>   <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93691_1511" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93691_1511" class="bloc_citation_header_titre" title=""><a href="c-1511" target="_blank" class="lecture_lien_citation">p.201. // Al. Dumas. La reine Margot. [...]</a></div><div id="bloc_citation_header_toggle_93691_1511" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93691_1511" class="bloc_citation_body"> <script type="text/javascript">   jQuery(document).ready(function(){   jQuery("#viewer_93691_3797").iviewer({ src: "show_fragment.php?file=g226_1_f_093__r____-3.jpg", 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);}); } });   // 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> <div class="imagette" title="g226_1_f_093__r_____3" style="height: 80px;"> <div id="viewer_93691_3797" class="viewer"></div> </div><div id="fragment_body_93691_3797" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-rend-underline">Le bourreau de Paris plus fort qu’Ambroise Paré</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-3 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 3 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote">... le docteur inconnu (le bourreau) dont la potion non <span class="hi-rend-underline">patentée</span> l’avait guéri en une seule nuit quand toutes les <span class="hi-rend-underline">drogues</span> de maître Ambroise Paré le tuaient lentement.</span> <br/> <span class="bibl-norm&#xA; b3797-3-id-b3797-3"> <span class="abbr---type-conventionnel">p.</span> 201. Al<span class="ex--">exandre</span> Dumas. La reine Margot.</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93692_1186" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93692_1186" class="bloc_citation_header_titre" title=""><a href="c-1186" target="_blank" class="lecture_lien_citation">Chateaubriand - Génie du Christ. p. 265. t 2 [...]</a></div><div id="bloc_citation_header_toggle_93692_1186" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93692_1186" class="bloc_citation_body"> <div class="imagette" title="g226_1_f_094__r_____1" style="height: 80px;"> <div id="viewer_93692_5995" class="viewer"></div> </div><div id="fragment_body_93692_5995" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-rendition-entete-page-hand-EL-encre">Exaltation du bas</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-1 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 1 ]</span> </span> <span class="fragment-body"> <span class="note-type-selection-hand-GF-crayon-hand-GF-crayon">[</span> <span class="seg-type-selection-crochet"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote">Demandez à un berger écossais s’il voudrait changer son sort contre le premier potentat de la terre ?</span> <br/> <span class="bibl-norm&#xA; b5995-3-id-b5995-3">Chateaubriand - Génie du Christ<span class="ex--">ianisme</span> <span class="abbr---type-conventionnel">p.</span> 265. <span class="reg--">t.</span> 2</span> </span> </span> <span class="note-type-selection-hand-GF-crayon-hand-GF-crayon">]</span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93693" class="item_titre" title="(I 94 L)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93693"></div> <div class="item_titre_titre">Le peuple - n°1474 (I 94 L)</div> </div></div><div id="item_93693" class="item"> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93693_1202" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93693_1202" class="bloc_citation_header_titre" title=""><a href="c-1202" target="_blank" class="lecture_lien_citation">Chateaubriand - Génie du Christ. p. 125 - T. 3 [...]</a></div><div id="bloc_citation_header_toggle_93693_1202" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93693_1202" class="bloc_citation_body"> <div class="imagette" title="g226_1_f_094__r_____2" style="height: 80px;"> <div id="viewer_93693_5996" class="viewer"></div> </div><div id="fragment_body_93693_5996" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-rendition-entete-page-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-rend-underline-hand-GF-encre">Le peuple</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-2 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 2 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote">Le peuple est bien plus sage que les philosophes.</span> <br/> <span class="bibl-norm&#xA; b5996-3-id-b5996-3">Chateaubriand - Génie du Christ<span class="ex--">ianisme</span> <span class="abbr---type-conventionnel">p.</span> 125 - <span class="abbr---type-conventionnel">T.</span> 3</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93694" class="item_titre" title="(I 94 L)">   <div class="item_titre_gadjet" id="item_titre_gadjet_93694"></div> <div class="item_titre_titre">[Exaltation du Bas. Chateaubriand] - n°1475 (I 94 L)</div> </div></div><div id="item_93694" class="item"> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93694_1187" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93694_1187" class="bloc_citation_header_titre" title=""><a href="c-1187" target="_blank" class="lecture_lien_citation"><span style="text-decoration: underline;">Chateaubriand</span> - Génie du Christ. p. 172 [...]</a></div><div id="bloc_citation_header_toggle_93694_1187" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93694_1187" class="bloc_citation_body"> <div class="imagette" title="g226_1_f_094__r_____3" style="height: 80px;"> <div id="viewer_93694_5997" class="viewer"></div> </div><div id="fragment_body_93694_5997" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-rendition-entete-page-hand-EL-encre">Exaltation du bas</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-3 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 3 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote"> <span class="noten1_g226_1_f_094__r____-type-regie-hand-GF-encre-place-above-id-n1_g226_1_f_094__r____-next-n2_g226_1_f_094__r____-hand-GF-encre">(1)</span> le pasteur du Gange tomba dans des erreurs moins grossières que le savant d’Athènes.</span> <br/> <span class="bibl-norm&#xA; b5997-3-id-b5997-3"> <span class="hi-rend-underline">Chateaubriand</span> - Génie du Christ<span class="ex--">ianisme</span> <span class="abbr---type-conventionnel">p.</span> 172</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93695" class="item_titre" title="(V 293 Fn ; I 94 L)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93695"></div> <div class="item_titre_titre">Vieilles sorcières - n°1476 (V 293 Fn ; I 94 L)</div> </div></div><div id="item_93695" class="item"> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93695_7901" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93695_7901" class="bloc_citation_header_titre" title=""><a href="c-7901" target="_blank" class="lecture_lien_citation"><span style="text-decoration: underline;">Paracelse</span>, Thesaurus alchemistae. // dans Dict. des [...]</a></div><div id="bloc_citation_header_toggle_93695_7901" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93695_7901" class="bloc_citation_body"> <div class="imagette" title="g226_1_f_094__r_____4" style="height: 80px;"> <div id="viewer_93695_5998" class="viewer"></div> </div><div id="fragment_body_93695_5998" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-rendition-entete-page-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-rend-underline-hand-GF-encre">vieilles sorcières</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-4 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 4 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="noten6_g226_1_f_094__r____-type-regie-hand-GF-encre-id-n6_g226_1_f_094__r____-prev-n5_g226_1_f_094__r____-hand-GF-encre">(6)</span> <span class="quote"> Ce n’est point dans les écoles et les académies que le médecin doit apprendre à connaître tout ce qu’il peut et doit savoir - Qu’il aille trouver les vieilles sorcières, les bohémiennes, les nécromans, les charlatans, les vieux paysans, et qu’il ap prenne d’eux seuls. Ils lui montreront mieux comment on enlève les maux, par des enchantements, que vos savants d’académie.</span> <br/> <span class="bibl-norm&#xA; b5998-3-id-b5998-3"> <span class="hi-rend-underline">Paracelse</span>, Thesaurus alchemistae. dans Dict<span class="ex--">ionnaire</span> des Sciences médic<span class="ex--">ales</span> Magnétisme</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93696" class="item_titre" title="(V 320 Fn ; I 94 L)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93696"></div> <div class="item_titre_titre">Le peuple plus fort que les savants - n°1477 (V 320 Fn ; I 94 L)</div> </div></div><div id="item_93696" class="item"> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93696_91" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93696_91" class="bloc_citation_header_titre" title=""><a href="c-91" target="_blank" class="lecture_lien_citation"><span style="text-decoration: underline;">Goërres</span> - Mystique. Vol. III. Ch. XIV. p. 252 [...]</a></div><div id="bloc_citation_header_toggle_93696_91" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93696_91" class="bloc_citation_body"> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#viewer_93696_5999").iviewer({ src: "show_fragment.php?file=g226_1_f_094__r____-5.jpg", 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);}); } }); // 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> <div class="imagette" title="g226_1_f_094__r_____5" style="height: 80px;"> <div id="viewer_93696_5999" class="viewer"></div> </div><div id="fragment_body_93696_5999" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-rendition-entete-page-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-rend-underline-hand-GF-encre">Vampirisme</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-hand-GF-encre">Le peuple plus fort que les Savants.</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-5 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 5 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote"> <span class="noten2_g226_1_f_094__r____-type-regie-hand-GF-encre-place-above-id-n2_g226_1_f_094__r____-prev-n1_g226_1_f_094__r____-hand-GF-encre">(2)</span> le peuple, avec son bon sens, a vu plus clair en cette matière <span class="add-hand-GF-encre-place-below-hand-GF-encre">(le vampirisme)</span> que les Savants avec leur esprit sceptique - <span class="noten3_g226_1_f_094__r____-type-regie-hand-GF-encre-id-n3_g226_1_f_094__r____-next-n4_g226_1_f_094__r____-hand-GF-encre">(3)</span> </span> <br/> <span class="bibl-norm&#xA; b5999-3-id-b5999-3"> <span class="hi-rend-underline">Goërres</span> - Mystique. <span class="abbr---type-conventionnel">Vol.</span> III. <span class="abbr---type-conventionnel">Ch.</span> XIV. <span class="abbr---type-conventionnel">p.</span> 252</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93697" class="item_titre" title="(VI 204 Fn ; VII 2 F)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93697"></div> <div class="item_titre_titre">Exaltation du Bas - n°1515 (VI 204 Fn ; VII 2 F)</div> </div></div><div id="item_93697" class="item"> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93697_1302" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93697_1302" class="bloc_citation_header_titre" title=""><a href="c-1302" target="_blank" class="lecture_lien_citation"><span style="text-decoration: underline;">Pascal</span> pensées. [...]</a></div><div id="bloc_citation_header_toggle_93697_1302" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93697_1302" class="bloc_citation_body"><div class="img_indisponible" title="Imagette indisponible" style="height: px;">Imagette indisponible </div><div id="fragment_body_93697_7124" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term">exaltation du bas</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-2 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 2 ]</span> </span> <span class="fragment-body"> <span class="cit-hand-GF-encre-hand-GF-encre"> <span class="quote">Les exemples des morts généreuses des Lacédémoniens et autres ne nous touchent <span class="reg---resp-LF">guère</span>. - car qu’est-ce que cela nous rapporte.</span> <br/> <span class="bibl-norm&#xA; b7124-3-id-b7124-3"> <span class="hi-rend-underline">Pascal</span> <span class="reg--">P</span>ensées.</span> </span> </span> </p> </div></div></div></div></div></div> <div class="ligne_image_text"><div class="img_blank" title=""></div><div id="item_titre_93698" class="item_titre" title="(I 93 F)"> <div class="item_titre_gadjet" id="item_titre_gadjet_93698"></div> <div class="item_titre_titre">Mettre à la fin - n°1516 (I 93 F)</div> </div></div><div id="item_93698" class="item"> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#bloc_citation_header_toggle_93698_1894").click(function() { jQuery("#bloc_citation_body_93698_1894").slideToggle("normal", function() { if (jQuery("#bloc_citation_header_93698_1894").css('margin-bottom')=='5px') { jQuery("#bloc_citation_header_93698_1894").css('margin-bottom', '0px'); jQuery("#bloc_citation_header_toggle_93698_1894").css('background-image', 'url("../images/open.png")'); } else { jQuery("#bloc_citation_header_93698_1894").css('margin-bottom', '5px'); jQuery("#bloc_citation_header_toggle_93698_1894").css('background-image', 'url("../images/closed.png")'); } }); }); }); </script> <div class="ligne_citation"><div class="img_blank" title=""></div><div class="citation"><div id="bloc_citation_header_93698_1894" class="bloc_citation_header" title=""><div id="bloc_citation_header_titre_93698_1894" class="bloc_citation_header_titre" title=""><a href="c-1894" target="_blank" class="lecture_lien_citation">(Lettres orig. de Mirabeau à Sophie - // recueillies par Manuel – 1792) [...]</a></div><div id="bloc_citation_header_toggle_93698_1894" class="bloc_citation_header_toggle"></div><div class="bloc_citation_header_metadonnees" title="">PP Edition normalisée</div></div><div id="bloc_citation_body_93698_1894" class="bloc_citation_body"> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#viewer_93698_5938").iviewer({ src: "show_fragment.php?file=g226_1_f_093__r____-4.jpg", 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);}); } });   // 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> <div class="imagette" title="g226_1_f_093__r_____4" style="height: 80px;"> <div id="viewer_93698_5938" class="viewer"></div> </div><div id="fragment_body_93698_5938" class="bloc_fragment_body" title=""><div class="bloc_fragment_body_marques" title="Marques et notes en marges"></div><div class="bloc_fragment_body_tei" title="Transcription"><?xml version="1.0" encoding="UTF-8"?> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-EL-encre-rend-underline-hand-EL-encre">Exaltation du bas</span> <span xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="term-hand-GF-encre-hand-GF-encre">exaltation du Bas</span> <p xmlns:dbp="http://mon_site/ns/1.0" xmlns="http://www.w3.org/1999/xhtml" class="-type-fragment-n-4 fragment&#xA;&#x9;&#x9;&#x9;&#x9;"> <span class="fragment-header"> <span class="title">[ 4 ]</span> </span> <span class="fragment-body"> <span class="seg-type-selection-traitVertical-hand-GF-encre-hand-GF-encre"> <span class="cit-hand-EL-encre-hand-EL-encre"> <span class="quote">Sois bien sûre, mon adorable Fanfan, quand tu entendras dire que <span class="hi-rend-underline">bon sens</span> vaut mieux que l’<span class="hi-rend-underline">esprit</span> et le génie, que l’homme qui parle ainsi est un sot ou un envieux plein d’orgueil, qui insinue modestement qu’il a <span class="add-place-above">au fond plus</span> d’esprit que les hommes les plus illustres de tous les siècles -</span> <br/> <span class="bibl-norm&#xA; b5938-3-id-b5938-3">(Lettres orig<span class="ex--">inales</span> de Mirabeau à Sophie - recueillies par Manuel – 1792)</span> </span> </span> <span class="note-type-regie-hand-GF-encre-hand-GF-encre">mettre à la Fin</span> </span> </p> </div></div></div></div></div></div></div></div> <pre class="info" title="Information privée">Temps du chargement = 16,671 sec. </pre> <div id="footer"></div> </body></html>

---

Mais puisqu'on en est là , et que j'ai enfin le temps de me pencher sur la conception d'une solution correcte ;) , que me conseillerais - tu pour améliorer les performances et l'affichage?
L'exemple montre l'affichage d'un petit agencement mais certains pourront comprendre plusieurs centaines de citations.
De ce que je connais,
- je pourrais faire mes transformations xslt2 par scripts et cron lancé tous les soirs, et ainsi ne charger dans ma page que leurs résultats;
- pré-charger les images, bien que je ne vois pas encore comment:( ;
- je me demandais si il ne serait pas possible d'ajouter une petite animation le temps du chargement de l'arbre ?! Mais je ne sais pas encore comment m'y prendre...

Enfin, j'écoute vos conseils. Merci.

La transformation XSLT2 est assez lente, voici ce que donne le chrono pour chaque boucle sur mes citations; pour en afficher une:

Citation:

---

Temps pour Xquery = 0,012 sec.
Temps pour file_exists() = 0 sec.
Temps pour préparation XSLT2 = 0 sec.
Temps pour transformation XSLT2 = 1,152 sec.

---

La transformation XSLT2 prend environ 1 seconde, le reste est négligeable.
Si je prend la solution de pré-transformer mes xml, pour n'avoir qu'a récupérer le résultat avec une requête SQL; cette page se charge en 6 sec. .
C'est déjà assez lent, il me faudrait donc trouver une solution qui permette d'afficher une animation "chargement en cours" le temps de reconstruire l'agencement OU charger dynamiquement des blocs de l'agencement au scroll vertical. Autres idées?

Bonsoir

Je reviens doucement en forme après avoir été KO, mais là j'ai comme une envie d'une période de convalescence dans un pays lointain ! :mouarf:

Je note que c'était "screw" qui posait problème.

Concernant le code du message numéro 13, je vois que jQuery UI est toujours ajouté après iViewer.

Quelques conseils sur ce code :

• attention à vos déclarations de variables ;
• lorsqu'un sélecteur jQuery est utilisé plus d'une fois il faut utiliser une variable, exemple : var jObj = $( selector ); ;
• lorsque plusieurs méthodes sont appelées sur le même sélecteur, n'oubliez pas le chaînage.

Comme je le disais au tout début de cette discussion vous utiliser un plugin peu usité et non maintenu (un répertoire de bogues connus et a priori non corrigé). Je n'ai absolument pas le temps d'étudier et de modifier le code de ce plugin pour améliorer ses performances.

Pour le reste, on sort largement du domaine jQuery avec PHP, SQL, XML et XSLT.

Bonjour,
Je reviens faire un petit point sur cette discussion.
Mon problème de performance n'est pas complètement réglé mais voici les choix que nous avons fait:
- xslt1
- j'ai viré Screw
- j'utilise le plugin Loupe plutôt qu' iViewer



PS: j'ai bien noté les conseils :)