Блог

Главная - Вопросы по программированию - проблема с порядком укладки галереи изображений jquery

проблема с порядком укладки галереи изображений jquery

#jquery #animation

#jquery #Анимация

Вопрос:

ОК.Галерея изображений имеет миниатюры с правой стороны. Они наклонены в перспективе, и между ними есть пробел. При нажатии или наведении курсора мыши на миниатюру она перемещается влево и быстро исчезает, создавая впечатление, что когда появляется реальное изображение, оно такое же, но масштабированное и без угла.

Я пытаюсь найти способ вернуть миниатюру, скрытую за большой картинкой, обратно под стопку. Вот код:

HTML:

 <!DOCTYPE html >
<html lang="en">
<head>  
<meta charset="utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="plug.css">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="plug.js"></script>
</head>
<body>
  <div id="content">
     <img id="thumb"src="pics/tu1.png" width="355" height="335"alt="">
     <img id="thumb2"src="pics/tu2.png" width="355" height="335"alt="">
     <img id="thumb3"src="pics/tu3.png" width="355" height="335"alt="">
     <img id="thumb4"src="pics/tu4.png" width="355" height="335"alt="">
     <img id="pic"src="pics/slider3.jpg" width="510" height="768" alt="">
     <img id="pic2"src="pics/slider2.jpg" width="510" height="768" alt="">
     <img id="pic3"src="pics/slider1.jpg" width="510" height="768" alt="">
     <img id="pic4"src="pics/home.jpg" width="510" height="768" alt="">
  </div>
</body>
</html>

CSS:

 img#pic {
  position:absolute;
  display: none;
}

img#pic2 {
  position:absolute;
  display: none;
}

img#pic3 {
  position:absolute;
  display: none;
}

img#pic4 {
  position:absolute;
  display: none;
}

img#thumb {
  position:absolute;
  top:410px;
  left:470px;
  z-index:20;
}

img#thumb2 {
  position:absolute;
  top:410px;
  left:525px;
  z-index: 19;
}

img#thumb3 {
   position:absolute;
   top:400px;
   left:580px;
   z-index: 18;
}

img#thumb4 {
   position:absolute;
   top:400px;
   left:635px;
   z-index: 17;
}

#content { 
   position:relative;
   width:1000px;
   height:768px;
   top:200px;
   left:100px;
   border:2px solid black;
   text-align: left;
}

JS:

 $(document).ready(function() {

$('#thumb').click(function() {
    $('#thumb').animate({
        left:'-=350'
    },250,"linear",function() {
        $('#thumb').hide();
        $('#pic').show();
    });
});


$('#thumb2').click(function() {
    $('#thumb2').animate({
        left:'-=350'
    },250,"linear",function(){
        $('#thumb2').hide();
        $('#pic2').show();
    });
});

$('#thumb3').click(function() {
    $('#thumb3').animate({
        left:'-=350'
    },250,"linear",function(){
        $('#thumb3').hide();
        $('#pic3').show();
    });
});

$('#thumb4').click(function() {
    $('#thumb4').animate({
        left:'-=350'
    },250,"linear",function(){
        $('#thumb4').hide();
        $('#pic4').show();
    });
});

})

Ответ №1:

Вот лучшая основа для работы:http://jsfiddle.net/marijnvdwerf/Cn8qe/1 Для удобства обслуживания я внес некоторые изменения в ваш html / css / javascript; я добавил контейнер для больших пальцев и полноразмерных фотографий, а также добавил событие к каждому элементу в #thumbs . Функция проверяет индекс выбранного элемента и показывает элемент в #pics с тем же индексом. Я бы рекомендовал установить перекрытие больших пальцев в #thumbs img , чтобы оно было одинаковым для каждого изображения (также намного проще, если вы решите, что вам нужно 10 фотографий вместо 4).