Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.12.2015, 17:18
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Подгрузить картинку после вызова модального окна.
Добрый день!

Задача стоит приблизительно следующая:

На странице есть 6 модальных окон, которые содержат большие и тяжелые изображения. Грузить их сразу нет никакого смысла, поэтому хочу подгружать их только при вызове модалки.

Модальное окно:

<div data-wow-delay="0.2s" class="grid_4 wow fadeInRight">
			        <div class="single_image" onclick="document.getElementById('win1').style.display='block';$('html,body').css('overflow','hidden');">
                        <img src="http://livedemo00.template-help.com/wt_55108/images/page-4_img01.jpg" alt="">
                        <div class="image_overlay">
                            <a href="">View Full Project</a>
                            <h2>drawing</h2>
                            <h4>with pencil colors</h4>
                        </div>
                    </div>
              </div>

<div class="dm-overlay" id="win1" onclick="document.getElementById('win1').style.display='none';$('html,body').css('overflow','auto');">
        <div class="dm-table">
            <div class="dm-cell">
                <div class="dm-modal cyan">
                    <a href="#close" class="close"></a>
                    <h3>Модальный блок №3 абсолютно по центру.(тест)</h3>
                        <img src="http://sdlweb.ru/img/09-Villa.jpg">
                    <p>Окно выводится строго по центру, тест</p>
                </div>
            </div>
        </div>
</div>


Я новичок, сильно не ругайте!
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2015, 17:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
Загрузка картинки лучшего качества по клику
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2015, 17:39
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

огромное спасибо за ответ, но это не совсем то, что бы я хотел.
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2015, 17:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
что мешает прописать в картинках маленький прелоадер а по клику менять прелоадер на большую картинку?
Ответить с цитированием
  #5 (permalink)  
Старый 28.12.2015, 17:47
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Не вижу в этом выход. Можно ведь просто подгружать аяксом при клике в мою модалку?
Ответить с цитированием
  #6 (permalink)  
Старый 28.12.2015, 18:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от DartV
Можно ведь просто подгружать аяксом при клике в мою модалку?
бред какой-то ...
<div data-wow-delay="0.2s" class="grid_4 wow fadeInRight">
			        <div class="single_image" onclick="var d = document.getElementById('win1');d.querySelector('img').src='http://sdlweb.ru/img/09-Villa.jpg';d.style.display='block';$('html,body').css('overflow','hidden');return false;">
                        <img src="http://livedemo00.template-help.com/wt_55108/images/page-4_img01.jpg" alt="">
                        <div class="image_overlay">
                            <a href="">View Full Project</a>
                            <h2>drawing</h2>
                            <h4>with pencil colors</h4>
                        </div>
                    </div>
              </div>

<div class="dm-overlay" id="win1" onclick="document.getElementById('win1').style.display='none';$('html,body').css('overflow','auto');return false;">
        <div class="dm-table">
            <div class="dm-cell">
                <div class="dm-modal cyan">
                    <a href="#close" class="close"></a>
                    <h3>Модальный блок №3 абсолютно по центру.(тест)</h3>
                        <img src="http://pampinta.com/imgs/img_loader.gif">
                    <p>Окно выводится строго по центру, тест</p>
                </div>
            </div>
        </div>
</div>
Ответить с цитированием
  #7 (permalink)  
Старый 28.12.2015, 18:13
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Что бред? )

Придумал вот такую реализацию для себя:

<script>
      function content_dop_img() {
        document.getElementById('content_dop_img').innerHTML = '<img src="http://sdlweb.ru/img/09-Villa.jpg">';
      }
    </script>
<div id="content_dop_img"></div>


Всё ли верно я сделал? Повторюсь, я только начал изучать JS!
Ответить с цитированием
  #8 (permalink)  
Старый 28.12.2015, 18:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
как проще всего смотрите 6 пост ... зачем грузить что-то кроме src?
Ответить с цитированием
  #9 (permalink)  
Старый 28.12.2015, 18:22
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Сообщение от рони Посмотреть сообщение
DartV,
как проще всего смотрите 6 пост ... зачем грузить что-то кроме src?
Отлично! Спасибо большое.

Ну и ещё вопрос, как это все содержимое onclick убрать из html кода непосредственно в файл js?

Последний раз редактировалось DartV, 28.12.2015 в 18:31.
Ответить с цитированием
  #10 (permalink)  
Старый 28.12.2015, 18:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
$(function() {
    var $overlay = $(".dm-overlay");
    $(".single_image").on("click", function(event) {
        event.preventDefault();
        $overlay.show().find("img")[0].src = "http://sdlweb.ru/img/09-Villa.jpg";
        $("html,body").css({
            "overflow": "hidden"
        })
    });
    $overlay.on("click", function(event) {
        event.preventDefault();
        $overlay.hide();
        $("html,body").css({
            "overflow": "auto"
        })
    })
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подгрузить js после загрузки страницы? FRIE Общие вопросы Javascript 5 15.12.2012 00:02
Убрать картинку через 10 секунд после запуска сайта douglasdenovitz Общие вопросы Javascript 9 24.09.2012 23:40
Ресайз окна в мобильном устройстве после поворота StrSprut Мобильный JavaScript 2 21.09.2012 12:32
Определение scrollTop после обновления окна cartrege Events/DOM/Window 0 31.08.2012 11:07
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 19:19