Problème d'affichage d'images onclick avec script

Galerie d'images Jquiery

Sujet résolu

Anonyme

26 juillet 2017 à 16:43:36

Bonjour à tous !

Voila, je débute et j'ai un souci de mise en page. Je m'explique.. je souhaite avoir sur la gauche de l'écran une série de petites images (style mosaïque), et quand on clique sur l'une d'elle celle-ci s'affiche en plus grand sur la partie droite de l'écran.

J'ai trouvé un script très bien pour ça. MAIS j'ai des images en portrait ET en paysage. C'est là que je commence à galèrer. Je voudrai que ma page soit fixe, or elle ne l'est pas. Je voudrai que mes petites images soit fixes, or elles bougent quand je passe d'une image portrait à une image paysage. Pouvez-vous me dire ce qui ne va pas avec mon code ? Merci beaucoup !

VOICI LE SCRIPT : (dans <body>)

$(document).ready(function () {

$("#col1").on('click', function(){

$('#gallery li').removeClass().addClass('column-1');

});

$("#col2").on('click', function(){

$('#gallery li').removeClass().addClass('column-2');

});

$("#col3").on('click', function(){

$('#gallery li').removeClass().addClass('column-3');

});

$(".thumb").on('click', function(){

var largeImage = $(this).attr("src");

$(".largeImage").attr({src: largeImage});

});

$(function() {

$("#gallery").sortable();

$("#gallery").disableSelection();

});

$(function() {

$( "#image" ).resizable();

});

$("#reset").on('click', function(){

$('#image').removeAttr('style');

});

$('#turn').on('click', function(){

var angle = ($('#image').data('angle') + 90) || 90;

$('#image').css({'transform': 'rotate(' + angle + 'deg)'});

$('#image').data('angle', angle);

});

</script>

LE CSS :

html {

width: 100%;

height: 100%;

}

body {

width: 100%;

height: 100%;

margin: 0;

padding:0;

}

#M {

width: 100%;

}

section {

position: relative;

float:left;

}

#gallery {

margin: 10px;

padding: 0;

overflow: hidden;

}

#gallery li {

list-style: none;

float: left;

}

#gallery li img {

margin: 10px;

}

#image-box {

float: left;

}

#image-box img {

border: 0;

background-color: #FFF;

float:left;

}

.column-1 {

width: 50%;

text-align: left;

}

.column-2 {

width: 33,33%;

text-align: left;

}

.thumb {

cursor: pointer;

width: 240px;

}

.largeImage {

overflow:hidden;

background-size:contain;

}

Et le HTML :

</ul></section></td>

</div></section></td>

</tr>

</table>

Cbourree

26 juillet 2017 à 17:09:01

Pourrais-tu afin de faciliter la lecture utiliser les balises code '</>' du forum ?

Et pourquoi pas même envisager un jsFiddle qu'on puisse essayé et voir ce qu'il se passe ?

Anonyme

26 juillet 2017 à 18:06:39

Ok, voici le code avec les balises :

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

<script type="text/javascript">

$(document).ready(function () {

$("#col1").on('click', function(){

    $('#gallery li').removeClass().addClass('column-1');

});

$("#col2").on('click', function(){

    $('#gallery li').removeClass().addClass('column-2');

});

$("#col3").on('click', function(){

    $('#gallery li').removeClass().addClass('column-3');

});

$(".thumb").on('click', function(){

    var largeImage = $(this).attr("src");

    $(".largeImage").attr({src: largeImage});

});

$(function() {

    $("#gallery").sortable();

    $("#gallery").disableSelection();

});

$(function() {

    $( "#image" ).resizable();

});

$("#reset").on('click', function(){

$('#image').removeAttr('style');

});

$('#turn').on('click', function(){

    var angle = ($('#image').data('angle') + 90) || 90;

    $('#image').css({'transform': 'rotate(' + angle + 'deg)'});

    $('#image').data('angle', angle);

});

});

</script>

html {

    width: 100%;

    height: 100%;

}

body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding:0;

}  

#M {

width: 100%;

}

section {

  position: relative;

  float:left;

}

#gallery {

  margin: 10px;

  padding: 0;

  overflow: hidden;

}

#gallery li {

  list-style: none;

  float: left;

}

#gallery li img {

  margin: 10px;

}

#image-box {

float: left;

}

#image-box img {

  border: 0;

  background-color: #FFF;

  float:left;

}

.column-1 {

  width: 50%;

  text-align: left;

}

.column-2 {

  width: 33,33%;

  text-align: left;

}

.thumb {

  cursor: pointer;

  width: 240px;

}

.largeImage {

  overflow:hidden;

  background-size:contain;

}

<table width="100%" border="0">

  <tr id="M">

    <td><section>

<ul id="gallery">

 <li class="column-2"><img class="thumb" src="cagoule.jpg" /></li>

 <li class="column-2"><img src="animatehombre.jpg" height="161" class="thumb" /></li>

<li class="column-2"><img class="thumb" src="cagoule2.jpg" /></li>

<li class="column-2"></li>

</ul></section></td>

    <td><section>

<div id="image-box"><img class="largeImage" src="cagoule.jpg" alt="">

 </div></section></td>

  </tr>

</table>

Est-ce que c'est mieux ?

Je ne sais pas ce qu'est un jsFiddle...

Anonyme

27 juillet 2017 à 0:06:48

Pourrais tu faire un zip de tout le dossier car sans les images on ne te seras d'aucune aide

Anonyme

1 août 2017 à 12:51:58

J'ai mis en ligne le code avec les images. Lien : http://learoch.com/animatehombre.html

Alors...Qu'est-ce qui cloche ?

Anonyme

5 août 2017 à 12:58:31

Salut ! Pour info, j'ai réussi à résoudre mon problème avec FLEXBOX !