Image

Bonjour, j'ai un petit script qui me permet de change une image!

et t'il possible de faire pour que l'on puisse aussi cliquer sur la grande image et d'avancé d'une image et arriver a la 3 eme bien retour a la premiere ?

Merci

<script type="text/javascript">
<!--
var ChangeImage = function ChangeImage(Url)
{
document.getElementById('affiche-image').innerHTML = '<img src="'+Url+'" />';
}
-->
</script>

<span id='affiche-image'>
<img src='../admin/logo/img_offre/$row_offre[id_offre].jpg' alt='' />
</span>

<li><img src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>.jpg" alt="" onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>.jpg');"/></li>

<li><img src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-2.jpg" alt="" onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-2.jpg');"/></li>

<li><img src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-3.jpg" alt="" onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-3.jpg');"/></li>

Modifié par bibi67 (11 Mar 2014 - 19:57)

Bonjour bibi67,

bibi67 a écrit :
... et t'il possible de faire pour que l'on puisse aussi cliquer sur la grande image et d'avancé d'une image et arriver a la 3 eme bien retour a la premiere ? ...

Si je comprends bien, vous souhaitez faire un slider automatique : arrivé à la dernière image, le slider redémarre à partir de la première image ?

Voulez-vous exploiter des boutons fléchés < et >, pour passer respectivement à l'image précédente ou suivante ?

NB : essayez d'être plus clair dans votre questionnement, j'ai dû relire plusieurs fois votre phrase pour essayer d'en comprendre le sens

Oui exacte mais pas besoin de des boutons fléchés < et >, je veux juste pouvoir cliquez sur la grande image !

Rebonjour,

Donc, pour bien préciser le fonctionnement attendu, vous voulez :

[Source 1] - quand on clique sur une des images de la liste ...

<li>
    <img
      src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>.jpg" alt=""
      onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>.jpg');"/>
</li>
<li>
    <img
      src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-2.jpg" alt=""   
      onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-2.jpg');"/>
</li>
<li>
    <img
      src="../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-3.jpg" alt=""  
      onClick="ChangeImage('../admin/logo/img_offre/<?php echo $row_offre["id_offre"]; ?>-3.jpg');"/
</li>

[Source 2] - ... la fonction JS ChangeImage() change l'image de #affiche-image.

<span id='affiche-image'>
    <img src='../admin/logo/img_offre/<?php echo $row_offre[id_offre]; ?>.jpg' alt='' />
</span>

... et quand on clique sur l'image de #affiche-image, on passe automatiquement à l'image suivante (en repartant sur la première quand on est sur la dernière image) ?

Si c'est cela, c'est entièrement possible.

Mais avant d'aborder une solution, une dernière question :
- Avez-vous la possibilité d'utiliser une librairie complémentaire comme jQuery ou MooTools, ou êtes-vous limité au JS brut ?

Rebonjour

Oui exactement ce que je cherche

on peu bien entendu utiliser une librairie complémentaire!

Merci

ReBonjour
Je tourne encore en rond vous avez une solution ?

Merci

Bonsoir bibi67,

Je me suis pris au jeu de cet exercice .
Je pense que ce petit code jQuery que je vous aie écrit devrait répondre à votre besoin fonctionnel (fonctionnement décrit juste précédement).
Vous avez à votre disposition la démo sur Codepen.

<ul id="images-list">
  <li>
    <a href="#">
      <img src="http://i.istockimg.com/file_thumbview_approve/9244102/2/stock-photo-9244102-skier-making-jump.jpg" />
    </a>
  </li>
  <li>
    <a href="#">
      <img src="http://i.istockimg.com/file_thumbview_approve/9280231/2/stock-photo-9280231-expert-skier-flying-over-ski-slope.jpg" />
     </a>
  </li>
  <li>
    <a href="#">
      <img src="http://i.istockimg.com/file_thumbview_approve/21993130/2/stock-photo-21993130-young-skier.jpg" />
    </a>
  </li>
</ul>

<a href="#" id="affiche-image">
  <img src="" />
</a>

$(function(){
  var
  // Récupération de tous les liens de la liste
  $aImgList = $('#images-list a'),
      
  // Récupération du lien de la zone d'affichage
  $aAffiche = $('#affiche-image'),
  
  // Initialisation
  index = {
    max     : $aImgList.length, // limite d'index
    current : 0 // index courant
  },
      
  // Fonction d'activation et d'affichage de l'image courante
  currentImageOn = function() {
    // Déclenchement de l'événement "click" du lien-image courant
    $aImgList.eq(index.current).trigger('click');
  };
  
  $aImgList
  .each(function(i){
    // Attribution d'un index à chaque lien
    $(this).attr('data-index', i);
  })
  // Au clic sur un des liens-image...
  .click(function(e){
    e.preventDefault();
    
    var
    // Récupération du lien-image cliqué en cours
    $a = $(this),
    // Récupération du src de l'image du lien cliqué
    src = $a.find('img').attr('src');

    // Récupération de l'index du lien cliqué
    index.current = $a.attr('data-index');
    
    // Désactivation de tous les liens images de la liste
    $aImgList.removeClass('active');
    // Activation du lien image en cours
    $a.addClass('active');

    $aAffiche
    .find('img')
    .hide() // L'image est cachée
    .attr('src', src) // Application du nouveau src
    .fadeIn('fast'); // Apparition de l'image avec fondu
  });
  
  // Au clic sur la zone d'affichage principal...
  $aAffiche.click(function(e){
    e.preventDefault();
    
    // Icrémentation et test de la limite atteinte
    if(++index.current >= index.max)
      index.current = 0;
    
    // Affichage de l'image courante
    currentImageOn();
  });
  
  // Initialisation : premier affichage de l'image courante
  currentImageOn();
});

Maintenant la question est la suivante : êtes-vous à l'aise avec jQuery et est-ce que ce code ne sera pas trop compliqué pour vous ?

Vous avez l'API de jQuery dispo avec toutes les fonctions détaillées.

En l'attente de votre feedback, bon code...

est ce que ceci peut-être une piste qui vous convient : http://codepen.io/gcyrillus/pen/ksvaw

Le principe .
HTML :
activer la prise de focus au click ou la touche tab de la balise image avec l'attribut tabindex.
CSS:
usage de :focus et du selecteur + pour styliser la balise (l'image) suivante dans le flux pour lui appliquer un style et la mettre en avant plan.

Cette idée de base permet de nombreuses variantes, avec ou sans transitions http://codepen.io/gc-nomade/pen/jIbHA , http://codepen.io/gcyrillus/pen/nvfHy , http://codepen.io/gc-nomade/pen/emuiE . pour le visuel, faudra voir avec votre graphiste

Bonjour, Merci @Guiwint c'est bien ce que je veux !!

Sur votre site codepen ca marche super mais une fois chez moi ca marche pas

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans titre</title>
<script type="text/javascript" src="js/image.js"></script>
<style type="text/css">
#images-list a {
	display: inline-block;
	border: 1px solid blue;
}
#images-list a.active {
	border-color: red;
}
#images-list img {
	display: block;
	width: 80px;
	height: auto;
}
#affiche-image {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}
#affiche-image img {
	display: block;
}
</style>
</head>

<body>
<ul id="images-list">
  <li> <a href="#"> <img src="admin/logo/img_offre/2176.jpg" /> </a> </li>
  <li> <a href="#"> <img src="admin/logo/img_offre/2176.jpg" /> </a> </li>
  <li> <a href="#"> <img src="admin/logo/img_offre/2176.jpg" /> </a> </li>
</ul>
<a href="#" id="affiche-image"> <img src="" /> </a>
</body>
</html>

Bonjour bibi67,

Il ne vous manque plus que la bibliothèque jQuery avant image.js :

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/image.js"></script>

Sinon à la première lecture, il ne me semble pas qu'il y ait d'erreur CSS ou HTML dans votre code.

Bonne soirée et bon code...
Modifié par Guiwint (14 Mar 2014 - 17:40)