Блог

Главная - Вопросы по программированию - Добавить div с помощью метода добавления jquery в div

Добавить div с помощью метода добавления jquery в div

#javascript #jquery #html #css #image

#javascript #jquery #HTML #css #изображение

Вопрос:

Это может быть очень глупый вопрос, я новичок в javascript, я создаю галерею с помощью http://photoswipe.com / библиотека js , я загружаю библиотеку js с официального сайта, я использовал приведенный пример index.html страница Нормальная, работает нормально. Но моя проблема, когда я добавляю div $('.gallery-row').append('<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>'); при <div class="gallery-row"></div> использовании метода добавления jquery из функции загрузки. Моя проблема: изображение отображается, но когда я нажимаю на изображение, оно не открывается с помощью swipe div. Я трачу весь свой день, но ничего не получил.

мой код:

 <!DOCTYPE html>
<html>
<head>
  <title>PhotoSwipe</title>
  <meta name="author" content="Code Computerlove -  http://www.codecomputerlove.com/"  />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />
  <link href="styles.css" type="text/css" rel="stylesheet" />
  <link href="photoswipe.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
  <script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
    // Set up PhotoSwipe with all anchor tags in the Gallery container 
    document.addEventListener('DOMContentLoaded', function(){
        Code.photoSwipe('a', '#Gallery');
      }, false);
    function load(){
      //append div from this function 
      $('.gallery-row').append('<div class="gallery-item"><a href="images/full /003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');
    }
    </script>
  </head>
  <body onLoad="load()">
    <div id="Header">
      <a href="http://www.codecomputerlove.com"><img   src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove"  /></a>
    </div>
    <div id="MainContent">
      <div class="page-content">
        <h1>PhotoSwipe</h1>
      </div>
      <div id="Gallery">
        <div class="gallery-row">
          <!--
            <div class="gallery-item"><a href="images/full/001.jpg"><img  src="images/thumb/001.jpg" alt="Image 001" /></a></div>
            <div class="gallery-item"><a href="images/full/002.jpg"><img  src="images/thumb/002.jpg" alt="Image 002" /></a></div>
            <div class="gallery-item"><a href="images/full/003.jpg"><img  src="images/thumb/003.jpg" alt="Image 003" /></a></div>
          -->
        </div>
      </div>
    </div>  
  </body>
</html>

Ответ №1:

Попробуйте выполнить append в DOMContentLoaded обработчике, прежде чем вызывать Code.photoSwipe . Кроме того, jQuery предоставляет более короткий способ записи этого:

 <script>
$(function() {
    $('.gallery-row').append('<div class="gallery-item"><a href="images/full /003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');
    Code.photoSwipe('a', '#Gallery');
});
</script>

Когда вы это сделаете, удалите onload="load()" из своего <body> тега.

Комментарии:

1. Я просто отмечу, что я пытался создать скрипку, но, по крайней мере, скрипт photoSwipe, используемый на их демонстрационной странице, использует такие вещи, как live() и $.browser с jQuery 1.5.2, и на сайте говорится, что новая версия находится в стадии разработки. Я не тестировал загрузку скрипта, чтобы узнать, получил ли я обновленную версию или нет, но по-прежнему кажется, что плагин старый и устаревший. Просто говорю?

2. спасибо за ответ, наконец, он работает, и я хочу поблагодарить вас оооооочень много 🙂

3. @Barmar еще один мой вопрос: когда мы нажимаем на изображение, изображение открывается в PhotoSwipe div. мой вопрос, как получить URL-адрес изображения в этом div.

4. Я не знаю, навскидку, это кажется специфичным для PhotoSwipe, о котором я никогда раньше не слышал.

Ответ №2:

Возможно, это дополнительное пространство в href для вашего тега a? Попробуйте изменить «изображения / полные /003.jpg » чтобы «images/full/003.jpg «

Ответ №3:

Я думаю, вам нужно это сделать :

 document.addEventListener('DOMContentLoaded', function(){

        Code.photoSwipe('a', '#Gallery');

    }, false);

После добавления

После некоторого теста DOMContentLoaded запускается перед onload

Комментарии:

1. Не имеет значения, куда вы это помещаете, потому что оно запускается при загрузке DOM, а не при его добавлении.

2. После некоторого теста DOMContentLoaded запускается перед onload