Смена картинки по клику

В материале рассмотрим один прекрасный эффект, как До и После, который выполнен на чистых CSS, где при наведении идет смена картинки. Его реализация может быть на разной тематике, главное, что отлично все работает, где можно поставить на любой сайт. Но безусловно, больше касаться будет темы услуг, где можно увидеть, как изначально было, и потом уже после какого то времени, что все преподносится на оригинальном эффекте.

Ранее все делалась на скриптах и плагинах, но сейчас при стилистике CSS3, стало возможно делать на них, что не нужно кроме стилей подключать, где реализация стала намного проще. Если рассматривать HTML код, то думаю здесь все понятно для всех, все очень просто, выставили контейнеры, где были помещены ссылки на картинки, что будут меняться.

Где первая идет по умолчанию, вторая уже появится, когда наведение клик на снимок, где сразу сработает смена. Теперь с помощью CSS, здесь зразу можно задать ширину и высоту, все на ваше усмотрение, главное, чтоб корректно смотрелось. Потом нужно присвоить изображению или фото, что идет ДО и ПОСЛЕ ширину как данные, это для того, чтоб сразу стало абсолютное позиционирование, где будут картинки друг на друга налаживаться, и все по размеру, не так, что одна больше, другая при появлении меньше станет.


a.nusakop_sagusqinas <
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 648px;
height: 428px;
>

a.nusakop_sagusqinas img <
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,648px,428px,0);
>

a.nusakop_sagusqinas img:nth-of-type(2) <
z-index: 1;
>

Читайте также:  Стим установка microsoft vc redist

a.nusakop_sagusqinas:hover img:nth-of-type(1) <
clip: rect(0,0,434px,0);
opacity: 0;
>

a.nusakop_sagusqinas.daqerkim <
width: 299px;
height: 343px;
>

a.nusakop_sagusqinas.daqerkim img <
clip: rect(0,299px,343px,0);
>

a.nusakop_sagusqinas.daqerkim:hover img:nth-of-type(1) <
clip: rect(0,0,353px,0);
>

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

Этот пример CSS показывает, что с использованием анимации CSS3 анимация свойства clip изображение before для отслаивания и отображения «после» изображения. Где результатом является простой, но безусловно изящный эффект.

В прошлый раз мы научились менять изображения при наведении. Сегодня разовьем эту идею, но уже применив Javascript фреймворк jQuery. Итак, приступим.

Задача ясна — есть изображение, при клике на котором оно должно меняться на другое. Желательно плавно.

Нам потребуется два изображения. Я буду использовать картинки из прошлой статьи.

Подготовим контейнер для наших картинок:

Теперь займемся созданием CSS стилей. Тут тоже ничего сложного:

И последний шаг — написание простейшего jQuery кода, который будет менять класс нашего изображения на transparent при клике:

Тут стоит не забыть подключить jQuery. Для WordPress есть статья о том, как правильно подключить jQuery. Так как в моем примере показывается просто html страница, то и jQuery я подключил c Google. В коде все видно.

Вот собственно и все. Посмотреть пример в работе и подробнее его рассмотреть вы можете, кликнув по кнопке ДЕМО ниже.

Меток нет. Похожие записи

  • No related posts.

Для того чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.

Читайте также:  Умножьте два числа 1011 1001

Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.

Ссылка на изображение № 1
Ссылка на изображение № 2
Ссылка на изображение № 3
Ссылка на изображение № 4

Для получения такого эффекта "смены" изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:

В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:

Данный пример поможет Вам избежать переизбытка изображений на одной страничке сайта и улучшит общую читабельность.

Держите код целиком:

День добрый!
Не подскажете, возможно ли реализовать подгрузку контента из SQL?
Или я что-то не верно сделал:

Смена контента при клике не происходит.
Заранее спасибо.

Огромное спасибо!
frame/img описался, пока варианты пробовал.
Причем, видел эти кавычки, а как вторые поставить – не владею.

Единственное, у меня заработало таким образом:

P.S. Вдруг кто еще столкнется, если в базе текст "example_text" содержит кавычки "" – не работает, но не проблема, имхо.

Решение выше не решает две проблемы. При загрузке страницы все строчки имеют одинаковый цвет. И только после клика появляется подсвечивание выбранной строчки. Также если сделать изменение цвета строчек с помощью псевдокласса :hover (чтобы пользователь понимал, что по этим строчкам можно кликать), то после первого клика :hover перестает работать.
Нашел простое решение: строчки "Картинка 1", "Картинка 2", "Картинка 3" представлены как список .
Первой картинке присвоен класс
Картинка 1 .
В стилях этого класса описан цвет отличный от остальных пунктов списка. Т.е. при первой загрузке первая строка будет гарантировано отличаться от других. При клике по какой-либо строке, просто присваивается этот класс. Код такой:

Читайте также:  Составить уравнение эллипса фокусы которого имеют координаты

var myTarget = $(".product_menu"); //блок со списком
targetLi = myTarget.find("li"); //элементы li

$(targetLi).click(function() <
$(targetLi).removeClass("active"); // отменяет класс
$(this).addClass("active"); // присваивает класс
>);

PS только начинаю осваивать JS, возможно код можно сделать ещё проще, но может кому-то пригодится.

Оцените статью
Добавить комментарий

Adblock detector