11523 sujets

JavaScript, DOM et API Web HTML5

Affichage d'images par thumb + loupe

Bonjour à tous,

J'affiche, tour à tour, des images dans un cadre unique, par clic sur miniatures. Le tout en provenance de la Bdd.
Tout va bien
J'ajoute ensuite une loupe : elle zoome sur l'image 1, quelle que soit l'image affichée.
Je ne sais pas comment corriger ça

Vous l'avez compris, je ne suis pas développeur.

Si vous souhaitez m'aider, voici le code

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rien</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  var liens = photos.getElementsByTagName('a') ;
  var big_photo = document.getElementById('big_pict') ;

  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  for (var i = 0 ; i < liens.length ; ++i) {
    liens[i].onclick = function() {
      big_photo.src = this.href; 
      big_photo.alt = this.title;
      titre_photo.firstChild.nodeValue = this.title;
      return false;
    };
  }
}
window.onload = displayPics;
</script>
    
<script type="text/javascript" src="js2/ddpowerzoomer.js"></script>  

<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
 $('#big_pict').addpowerzoom()
})
</script>
    
</head>

<body style="background:#fff;">

        <div id="galerie">
			<ul id="galerie_mini">
			
<?php
//connection bdd
$db = mysql_connect('...');
mysql_select_db('...',$db);
//sélection et affichage du contenu de la table cont
$sql = 'SELECT DISTINCT id, image, thumb, legende, descr, mat, num  FROM sm ORDER BY num DESC';
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());

while($data = mysql_fetch_array($req))
{
$image=$data['image'];
$thumb=$data['thumb'];
$legende=htmlspecialchars(mysql_real_escape_string($data['legende']));
?>
        <li>
            <a href="<?php echo $image ?>" title="<?php echo $legende ?>"><img src="<?php echo $thumb ?>" width="60px"/></a>
		</li>
<?php
}
mysql_close()
?>
		<dl id="photo">
    <dt><?php echo $legende ?></dt>
    <dd><img id="big_pict" src="<?php echo $image ?>" style="width:300px; height:300px" alt="<?php echo $legende ?>" /></dd>
			</ul>
		</div>


Merci de votre aide précieuse
Kaspar[/i]
Modifié par kaspar (01 May 2015 - 12:26)
A priori ton code sert la même id pour toutes les images, ce pourquoi c'est toujours l'image 1 qui est affichée. Essaie d'ajouter un compteur pour modifier l'id et le nom des éléments qui se répètent pour qu'ils ne se ressemblent pas.
Hmmmm je pense que ta balise <dl> n'est pas fermée.
AMHA le block DL devrait être sous chaque photo non ?

Je ferais qqch comme ca:

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rien</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    function displayPics() {
      var photos = document.getElementById('galerie_mini');
      var liens = photos.getElementsByTagName('a');
      var big_photo = document.getElementById('big_pict');

      var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0];
      for (var i = 0; i < liens.length; ++i) {
        liens.onclick = function() {
          big_photo.src = this.href;
          big_photo.alt = this.title;
          titre_photo.firstChild.nodeValue = this.title;
          return false;
        };
      }
    }
    window.onload = displayPics;
  </script>

  <script type="text/javascript" src="js2/ddpowerzoomer.js"></script>



</head>

<body style="background:#fff;">

  <div id="galerie">
    <ul id="galerie_mini">

      <?php
      //connection bdd
      $db=m ysql_connect( '...');
      mysql_select_db( '...',$db);
      //sélection et affichage du contenu de la table cont
      $sql='SELECT DISTINCT id, image, thumb, legende, descr, mat, num  FROM sm ORDER BY num DESC' ; $req=m ysql_query($sql)
      or die( 'Erreur SQL !<br>'.$sql. '<br>'.mysql_error());
      $i = 0;
      while($data=m ysql_fetch_array($req)) {
        $i++;
        $image=$data[ 'image'];
        $thumb=$data[ 'thumb'];
        $legende=htmlspecialchars(mysql_real_escape_string($data[ 'legende']));
      ?>
      <li>
        <a href="<?php echo $image ?>" title="<?php echo $legende ?>"><img src="<?php echo $thumb ?>" width="60px"/></a>
      </li>
      <dl id="photo<?php echo $i; ?>">
        <dt>
          <?php echo $legende; ?>
        </dt>
        <dd>
          <img id="big_pictphoto<?php echo $i; ?>" src="<?php echo $image; ?>" style="width:300px; height:300px" alt="<?php echo $legende; ?>" />
        </dd>
      </dl>
      <script type="text/javascript">
        jQuery(document).ready(function($) { //fire on DOM ready
          $('#big_pict<?php echo $i; ?>').addpowerzoom()
        })
      </script>
      <?php
      }
      mysql_close();
      ?>
    </ul>
  </div>


Mais peut-être que j'ai rien compris Smiley cligne
Merci de votre aide, c'est sympa d'avoir répondu Smiley smile

Ponsfrilus, merci pour le code qui fonctionne, mais le cadre d'affichage doit être unique pour l'ensemble des images, et c'est bien là le problème, puisqu'il y a en quelque sorte un conflit entre les deux scripts.
Ne pourrait-on les fusionner en un seul, ou connaissez vous un script à partir duquel je pourrais travailler ?

Kustolovic j'ai suivi vos conseils.

Merci
Re-bonjour à tous,
Je me suis basé sur les codes et conseils donnés précédemment, mais c'est toujours la même image qui est éditée par la loupe.
Je ne comprends pas pourquoi.
J'ai donc un groupe de thumbnails qui, lorsque l'on clique dessus affichent dans un conteneur commun l'image agrandie. Au survol de l'image, la loupe affiche l'image zoomée. Devrait afficher ...
Avez vous une suggestion ?
D'avance, merci


$i=0;
	while($data = mysql_fetch_array($req))
	{
$i++;
$image=$data['image'];
$thumb=$data['thumb'];
$legende=htmlspecialchars(mysql_real_escape_string($data['legende']));

	?>
        <li>
        <a href="<?php echo $image ?>" title="<?php echo $legende ?>"><img src="<?php echo $thumb ?>" width="50px"/></a>
		</li>
	<?php
	}
mysql_close()
	?>
		<figure id="photo">
    <dt><?php echo $legende ?></dt>
    <dd><img id="big_pict<?php echo $i ?>" src="<?php echo $image ?>" style="width:300px; height:300px" />
	</dd>
		</figure>
		
		
		<script type="text/javascript">
function displayPics()
{
  var photos = document.getElementById('galerie_mini') ;
  var liens = photos.getElementsByTagName('a') ;
  var big_photo = document.getElementById('big_pict<?php echo $i ?>') ;
  var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
  for (var i = 0 ; i < liens.length ; ++i) {
    liens[i].onclick = function() {
      big_photo.src = this.href;
      big_photo.alt = this.title;
      titre_photo.firstChild.nodeValue = this.title;
      return false;
    };
  }
}
window.onload = displayPics;
</script>	

<script type="text/javascript">
	jQuery(document).ready(function($){
	$('#big_pict<?php echo $i ?>').addpowerzoom()
	})
</script>
upload/43490-thumbvuelo.jpg [/i]
Sujet clos
Aller à