Показать увеличенное изображение из миниатюр в javascript

У меня есть 4 эскиза слева, и когда я нажимаю на один из них, я хочу показать большое изображение справа на экране.Показать увеличенное изображение из миниатюр в javascript

Моя проблема в том, что по какой-то причине она показывает 8 маленьких миниатюр (сначала 4, а затем 4 раза). Первые четыре не могут быть изменены. Последние четыре являются кликабельными и правильно показывают большее изображение.

Итак, откуда берутся первые четыре миниатюры, и как я могу избавиться от них?

У меня есть прозрачное изображение (Picture.gif), которое является более крупным изображением, которое изменяется и показывает большие версии миниатюр.

Мой HTML:

<body onLoad="init()"> 

     <table class="planes"> 

     <tr> 
     <td> 
     <ul>    
     <div id="thumb"> 
      <li><img src="img/Plane1.jpg" alt="Plane1"></li> 
      <li><img src="img/Plane2.jpg" alt="Plane2"></li> 
      <li><img src="img/Plane3.jpg" alt="Plane3"></li> 
      <li><img src="img/Plane4.jpg" alt="Plane4"></li> 
     </div> 
     </ul> 
     </td> 
     <td>      
     <img class="pic" id="main" src="img/Picture.gif" alt=""> 
     </td> 
     </tr> 
    </table>

Мой JavaScript:

var images= new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'); 
var imgList = new Array(); 

function init() 
{ 
    for (var i=0; i<images.length; i++) 
    { 
     imgList[i] = new Image(); 
     imgList[i].src = images[i]; 
     document.getElementById('thumb').appendChild(imgList[i]); 
     imgList[i].addEventListener("click", swap, false) 
    } 
} 


function swap(evtObj) 
{ 
    var imgfile = evtObj.target.getAttribute('src'); 
    var mainTag = document.getElementById('main'); 
    mainTag.src = imgfile; 
}

источник

2014-10-02 user2939293

Первые 4 изображения являются те, у вас есть в вашем статический HTML код. Следующие 4 являются динамикой, генерируемой javascrip. Просто удалите изображения внутри большого пальца с вашего html-кода.

источник

2014-10-02 09:35:00 GramThanos

В этой строке:

document.getElementById('thumb').appendChild(imgList[i]);

Вы Добавляя изображения в список «большого пальца» снова. Но это те, которые вы хотите сохранить, поскольку к ним подключен eventListener.

Для достижения желаемого результата необходимо удалить теги из своего html-кода.

<li><img src="img/Plane1.jpg" alt="Plane1"></li> 
<li><img src="img/Plane2.jpg" alt="Plane2"></li> 
<li><img src="img/Plane3.jpg" alt="Plane3"></li> 
<li><img src="img/Plane4.jpg" alt="Plane4"></li>

источник

2014-10-02 09:35:41 Matt

Благодарим Вас за ваша помощь! Это именно то, что проблема была – user2939293

Еще один вопрос: как я могу выровнять четыре миниатюры друг под другом, когда у меня нет списка? (У меня был css, который помещал изображения друг под друга по вертикали). – user2939293

Вы можете удалить 'div' с id' thumb' и поместить этот идентификатор на элемент 'ul'.Затем создайте элемент 'li', используя' document.createElement ('li') 'и добавьте изображение к нему, а затем добавьте' li' в элемент 'ul'. – Matt

Изображения как в вашем html, так и в javascript.

В строке document.getElementById('thumb').appendChild(imgList[i]); добавляется каждое изображение, указанное в массиве изображений вашего javascript на страницу.

Я предлагаю вам удалить их в свой html - просто удалите теги <li> и изображения, которые в них находятся.

После вынимания ненужных тегов, ваш HTML должен выглядеть примерно так:

<body onLoad="init()"> 

     <table class="planes"> 

     <tr> 
     <td>   
     <div id="thumb"> 
     </div> 
     </td> 
     <td>      
     <img class="pic" id="main" src="img/Picture.gif" alt=""> 
     </td> 
     </tr> 
    </table>

источник

2014-10-02 09:36:13 Hecksa

Благодарим за помощь. Но как я могу выровнять четыре миниатюры друг под другом сейчас, когда у меня нет списка? (У меня был css, который помещал изображения друг под друга по вертикали). – user2939293

Вы все равно сможете использовать CSS - попробуйте работать с правилами '# thumb' и' #thumb img', это должно быть полезно. Если у вас возникли какие-либо проблемы с этим, задайте здесь отдельный вопрос, чтобы другие люди могли узнать и о решении. – Hecksa

Во-первыхи, div не может быть ребенком ul и вторым вы не должны реально использовать таблицы для разметки (если сделав шаблон электронной почты).

Если вы просто пытаетесь изменить ГКЗ основного изображения на щелчку миниатюр, вы можете использовать следующие ЯШ:

var images = new Array('img/Plane1.jpg', 'img/Plane2.jpg', 'img/Plane3.jpg', 'img/Plane4.jpg'), 
    thumbnails = document.getElementById('thumb').getElementsByTagName('img'), 
    mainImage = document.getElementById('main'); 

for (i = 0; i < thumbnails.length; i++) { 
    setClickFunction(i); 
} 

function setClickFunction(currentIndex) { 
    thumbnails[currentIndex].onclick = function() { 
     mainImage.src = images[currentIndex]; 
    }; 
}

Example

Using links for your large images instead of an array

источник

2014-10-02 09:52:41 Pete

Показать увеличенное изображение из миниатюр в javascript

ответ

Смежные вопросы