Как сделать появление блока как на images.google.com?

Question

[Никита Иванов]

Добрый день!
Встала задача сделать на странице загрузку контента через аякс так, как это выглядит, при клике на картинку, на images.google.com

Костыльно это сделать получилось, но хочется же красоты.
Надеюсь, удалось донести то, что я имел в виду

UPD
Извиняюсь за скудность своего описания проблемы.
Смотрите, дизайнер прислал макет, в котором при загрузке страницы, есть такие блоки


При клике, например, по первому блоку "Канада", должен подгрузиться контент отобразиться таким образом



Дело в том, что я видел такой эффект только на images.google.com
Надеюсь, что теперь стало понятнее:)

Костыльно я сделал таким образом:

<div class="row">
            <div class="col-md-4 col-sm-4">
                <a href="#canada"></a>
            </div>
        </div>

 <div class="row">
 <div id="canada">
<-- здесь контент подгружается при клике -->
</div>
</div>

#canada {
 height: 0;
 overflow: hidden;
}
#canada:target {
    height: auto;
}

Comments

[Шаров Дмитрий]

Нет не удалось.
Покажите что уже готово, что бы вам могли подсказать как нужно реализовать это "безкостыльно"

Answer 1

[Денис Инешин]

1. Кликаем по картинке, в новом блоке показываем её, только увеличенную например на 500%.
2. Поверх картинки отдельным слоем показываем какой-нибудь прелоадер.
3. Создаем через JS новое изображение, добавляем ему слушатель onLoad
4. Ждем полной загрузки картинки, потом вставляем её в DOM вместо слоя с прелоадером.
5. Profit!

P.S. Если нужно отслеживать время до загрузки то поможет: stackoverflow.com/questions/22502943/jquery-ajax-p...

Comments

[Никита Иванов]

я уточнил проблему
Дело в том, что нужно подгружать не картинку, а текст и карусель

[Денис Инешин]

Никита Иванов: телепатия не сработала)

Answer 2

[Никита Иванов]

Случайно наткнулся на такой плагин
сегодня попробую, если все получится - отмечу решением

icalialabs.github.io/furatto_addons/expandingThumbnail