2016-05-22 3 views
0

Я учусь сделать галерею изображений, и когда я нажимаю на миниатюру, она ничего не делает. Bellow - это мой код, я пытаюсь сделать томе, чтобы он работал, могу ли я получить некоторую помощь? HTML:Функция Onclick ничего не делает в галерее изображений

 <script src="galerijaSlika.js"></script> 
     <img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg"> 
     <div id="sveSlike" onClick="promjeniSliku(event)"> 
      <img src="Slike/infogamer_galerija/info1.jpg"> 
      <img src="Slike/infogamer_galerija/info2.jpg"> 
      <img src="Slike/infogamer_galerija/info3.jpg"> 
      <img src="Slike/infogamer_galerija/info4.jpg"> 
      <img src="Slike/infogamer_galerija/info5.jpg"> 
      <img src="Slike/infogamer_galerija/info6.jpg"> 
      <img src="Slike/infogamer_galerija/info7.jpg"> 
      <img src="Slike/infogamer_galerija/info8.jpg"> 
      <img src="Slike/infogamer_galerija/info9.jpg"> 
      <img src="Slike/infogamer_galerija/info10.jpg"> 
      <img src="Slike/infogamer_galerija/info11.jpg"> 
      <img src="Slike/infogamer_galerija/info12.jpg"> 
     </div> 

Javascript:

function promjeniSliku(event){ 
    event = event || window.event; 
    var trazeniElement = event.target || event.srcElement; 
    if(trazeniElement == "IMG"){ 
      document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src"); 

    } 
} 
+0

Возможно ли, что 'event' является нулевым или не определено, в каком случае' trazeniElement! = "IMG" '? У вас возникли ошибки в консоли браузера? – Marc

+0

@Marc, когда я удаляю if, он работает, но если я нажимаю между картинками, изображение не отображается, но отображается сломанный логотип. И я не получаю никаких ошибок в консоли. –

+0

Изменение щенков котятам и спине: https://jsfiddle.net/hsLebj5g/ (Исправлено назначение onClick через jQuery и проверяется имя tagName и nodeName для нечувствительности к регистру для «img») –

ответ

3

Ваш опечатка является:

if(trazeniElement == "IMG"){ 

Правильный тест должен быть:

if (trazeniElement.tagName == "IMG") { 

Подробнее см MDN

function promjeniSliku(event){ 
 
    event = event || window.event; 
 
    var trazeniElement = event.target || event.srcElement; 
 
    if (trazeniElement.tagName == "IMG") { 
 
    document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src"); 
 
    } 
 
}
<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg"> 
 
<div id="sveSlike" onClick="promjeniSliku(event)"> 
 
    <img src="Slike/infogamer_galerija/info1.jpg"> 
 
    <img src="Slike/infogamer_galerija/info2.jpg"> 
 
    <img src="Slike/infogamer_galerija/info3.jpg"> 
 
    <img src="Slike/infogamer_galerija/info4.jpg"> 
 
    <img src="Slike/infogamer_galerija/info5.jpg"> 
 
    <img src="Slike/infogamer_galerija/info6.jpg"> 
 
    <img src="Slike/infogamer_galerija/info7.jpg"> 
 
    <img src="Slike/infogamer_galerija/info8.jpg"> 
 
    <img src="Slike/infogamer_galerija/info9.jpg"> 
 
    <img src="Slike/infogamer_galerija/info10.jpg"> 
 
    <img src="Slike/infogamer_galerija/info11.jpg"> 
 
    <img src="Slike/infogamer_galerija/info12.jpg"> 
 
</div>

0

Я получил эту работу. Мне пришлось менять изображения вокруг, и чтобы получить более крупный предмет в изображении galeria, я должен был заменить строку, не стесняйтесь удалить эту часть.

function promjeniSliku(event) { 
 
    var target = event.target; 
 
    if (target.tagName == 'IMG') { 
 

 
    var src = target.src.replace(/100/g, '500'); 
 
    document.getElementById('glavnaSlika').src = src; 
 
    } 
 

 
}
<img id="glavnaSlika" src="//lorempixel.com/500/500/cats/1"> 
 
<div id="sveSlike" onclick="promjeniSliku(event)"> 
 
    <img src="//lorempixel.com/100/100/cats/1" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/2" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/3" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/4" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/5" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/6" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/7" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/8" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/9" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/10" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/11" alt="" /> 
 
    <img src="//lorempixel.com/100/100/cats/12" alt="" /> 
 

 
</div>