Проблема создания pic-viewer с чистым JavaScript

Я изучаю основы JavaScript в курсе в школе. Это потому, что я хочу иметь большое понимание JavaScript, когда я погружаюсь в разные библиотеки.Проблема создания pic-viewer с чистым JavaScript

Мне удалось создать функцию, которая порождает <div>, который скрыт с изображением внутри него (я обманул «чистый» JavaScript с помощью функции fadeIn, как вы видите).

Проблема в том, что я хочу, чтобы функция была динамичной и работала не только для одного элемента. Теперь я не понимаю, как это сделать.

Любая помощь или мысли будут оценены.

<div id="hiddenElement"> 
     <img src="#" alt="image" class="maxImg"/> 
    </div> 

    var hiddenElement = document.getElementById('hiddenElement'); 
    anchor.addEventListener('click', spawnImage, false); 


    function spawnImage() { 
      $(hiddenElement).fadeIn('slow', function() { 
       hiddenElement.style.display = 'block'; 
      });

выглядит, как это сейчас: http://oscarlandstrom.se/javascript/pic.html

источник

2011-09-20 Oscar

Вы хотите сказать, вы хотите, чтобы объединить эту функцию Тогда вы можете передать DIV и обратно идентификаторы, как функции parametrs:

function spawnImage(divId, backId) { 
      $(divId).fadeIn('slow', function() { 
       document.getElementById('divId').style.display = 'block'; 
      }); 
      $(backId).fadeIn('slow', function() { 
       document.getElementById('backId').style.display = 'block'; 
      });

При загрузке страничный звонок примерно так:

spawnImage(fistDivId, backId); 
spawnImage(secondDivId, backId);

источник

2011-09-20 10:22:42 Kate

Im нерест изображение с EventListener. И я хочу, чтобы это работало не просто как один элемент. addEventListener ('click', spawnImage, false); – Oscar

Таким образом, вы можете установить cl ass = "spawn" для всех элементов, которые вы хотите сохранить. (class = "spawn" - это пустой класс, используемый только для отметки элементов). Затем следует установить на события нагрузки, как:

$(document).ready(function() { 
    var spawnedElamants = getElementsByClassName("spawn"); 
    for(var i=0; i<spawnedElamants.length; i++) 
    { 
    spawnImage(spawnedElamants[i].id, backId); 
    } 
});

источник

2011-09-20 10:44:53 Kate

Я постараюсь сделать эту работу. В противном случае я вернусь с дополнительными вопросами. Спасибо за помощь и быстрый ответ :) – Oscar

Убедитесь, что:

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="sheet.css" /> 
     <script src="js.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    </head> 
    <body> 
     <div id="bkgFade"></div> 
     <div id="container"> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor" class="minImg"/> 
      </div> 
      <div class="imgWrap"> 
       <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" id="anchor2" class="minImg"/> 
      </div> 
     </div> 
     <div id="hiddenElement"> 
      <img src="http://www.morrharet.se/images/morrharet.jpg" alt="image" class="maxImg"/> 
     </div> 
    </body> 
</html> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var minImgs = document.getElementsByClassName("minImg"); 
     var maxImgs = document.getElementsByClassName("maxImg"); 
     var bkgFade = document.getElementById('bkgFade'); 
     for(var i=0; i<minImgs.length; i++) 
     { 
      minImgs[i].addEventListener('click', spawnImage, false);  
     } 
     for(var i=0; i<maxImgs.length; i++) 
     { 
      maxImgs.addEventListener('click', despawnImage, false); 
     } 
     } 
    ) 

    function spawnImage() { 
     $(hiddenElement).fadeIn('slow', function() { 
      hiddenElement.style.display = 'block'; 
     }); 

     $(bkgFade).fadeIn('slow', function() { 
      bkgFade.style.display = 'block'; 

     }); 
    } 

    function despawnImage() { 
     $(hiddenElement).fadeOut('slow', function() { 
      document.getElementById('hiddenElement').style.display = 'none'; 
     }); 
     $(bkgFade).fadeOut('slow', function() { 
      document.getElementById('bkgFade').style.display = 'none'; 

     }); 
    } 
</script>

источник

2011-09-20 11:53:47 Kate

Если у меня есть разные образы, как я могу поместить их в hiddenElement по лучшей практике? – Oscar

может каким-то образом вставить maxImgs в hiddenElement? – Oscar

Как «hiddenElement» - div скрыт независимо от того, как вы помещаете в него изображения. '

'. Для всех изображений с классом «maxImg» будет установлен клик-прослушиватель - despawnImage. – Kate

Проблема создания pic-viewer с чистым JavaScript

ответ

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