Галерея Javascript работает только один раз

Я создал простую галерею изображений, используя W3.css и javascript. Каждое изображение представляет собой w3-карту с текстом под ней и занимает одну треть экрана (с использованием w3-third). Я получил javascript, чтобы увеличить изображение и перенести его спереди (так видно) на клик и вернуть его во второй клик. Прогресс, как только изображение возвращается, щелкает его, ничего не делает. Вот код для gallery.html (без заголовка, поскольку он не имеет ничего общего с галереей)Галерея Javascript работает только один раз

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Strona Główna</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<link rel="stylesheet" 
href="http://www.w3schools.com/lib/w3-theme-light-green.css"> 

<script type="text/javascript" src="js/closeAll.js"></script> 
<!-- <link rel="Shortcut icon" href="../img/facin.ico" /> --> 
</head> 
<body> 

<div class="w3-container w3-theme-l3"> 
    <div class="w3-row"> 
      <div class="w3-container w3-third"> 
       <div class=" w3-container w3-card w3-sand"> 
        <img 
         src="https://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg" 
         alt="img1" style="width: 100%;" onclick="onClick(this)"> 
        <div class="w3-container"> 
         <p>image 1</p> 

        </div> 
       </div> 
      </div> 
      <div class="w3-container w3-third w3-sand"> 
       <div class="w3-container w3-card"> 
        <img 
         src="http://www.techalliance.ca/wp-content/uploads/2011/11/sample-image-300X300.jpg" 
         alt="img2" style="width: 100%" onclick="onClick(this)"> 
        <div class="w3-container"> 
         <p>image 2</p> 
        </div> 
       </div> 
      </div> 
      <div class="w3-container w3-third"> 
       <div class="w3-container w3-card w3-sand"> 
        <img 
         src="http://www.freevectors.net/files/large/FloralFrameWithSampleText.jpg" 
         alt="img3" style="width: 100%" onclick="onClick(this);"> 
        <div class="w3-container"> 
         <p>img3</p> 
        </div> 
       </div> 
      </div> 
     </div> 

</div> 

<footer class="w3-container w3-theme w3-text-black-opacity w3-small"> 
    <br> 
    <div align="center">Copyright&copy; killermenpl 2015. All rights 
     reserved</div> 
    <div class="w3-container w3-tiny"> 
     Uses 
     <a href="http://www.w3schools.com/w3css/">W3.css</a> 
    </div> 
</footer> 
</div> 
</body> 
</html>

А вот код для galeria.js

function onClick(element) { 
//alert("onclick"); 
// if (element.tagName != "img") { 
// alert("not an image"); 
// return; 
// } 

if (!element.dataset.zoom) { 
    element.dataset.zoom = "0"; 
} 

if (element.dataset.zoom == "0") { 
    element.dataset.zoom = "1"; 
    element.dataset.zindex = element.style.zIndex; 

    element.style.position = "relative"; 
    element.style.zIndex = 100; 

    element.style.width = "300%"; 
    element.style.height = "300%"; 

    //alert("zoom!"); 
} else { 
    //alert("zoom!"); 
    element.style.zIndex = element.dataset.zindex; 

    element.dataset.zoom == "0"; 

    element.style.width = "100%"; 
    element.style.height = "100%"; 
} 
}

Это, вероятно, что-то глупо что каждый должен знать, но я новичок в javascript и новичок в css. Кроме того, я знаю, что изображения не выравниваются по середине экрана при увеличении. Я добавлю его позже.

источник

2015-11-22 killermenpl

где 'OnClick()' присвоить любому событию – Ramanlfc

я скопировал мой index.html вместо gallery.html. Виноват. Фиксация его прямо сейчас. Нет большой разницы. В основном каждый имеет 'onclick = 'onClick (this);" ' – killermenpl

Изменить эту строку в else заявлении:

element.dataset.zoom == "0";

к этому:

element.dataset.zoom = "0";

для выполнения заданий, вы должны использовать '=' вместо '=='.

И если вы хотите, чтобы изображения увеличивались по центру, вы должны использовать атрибут CSS3 trasform: scale(x,y); и масштабировать элемент. например:

element.style.transform = "scale(1.5,1.5)";

и для Webkit браузеров:

element.style.webkitTransform = "scale(1.5,1.5)";

источник

2015-11-22 14:38:40

Спасибо! Я знал, что это нечто тривиальное. Я думаю, мне нужно получить новую клавиатуру, так как я заметил, что один из них один раз регистрирует один клик дважды. – killermenpl

Галерея Javascript работает только один раз

ответ

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