Discussion :

[tigunn]

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