js / php / html / css - есть ответ « Вопросы и ответы

Dj.SunRise, 311 просмотров

Всем привет. Для начала посмотрите картинку http://rghost.ru/48988491/image.png

Так вот. Как сделать чтобы при клике на одну из картинок внизу оно замещало что по середине и побольше всех. Вообще есть 3 фотки. По умолчанию в середине стоит та фотка которая самая большая на картинке. И она должна быть выделена Бордером. То есть при клике на другую фотку, фотка становится обведенной и замещает большую картинку.

Вот код :( на

<td>

<a href="images/results-image.png" data-lightbox="img1"><img src="images/results-image.png"></a>

<div class="images">

<div class="imageBlock">
<a href="images/results-image-small.png" data-lightbox="img1">
<img src="images/results-image-small.png"></a>
</div>

<div class="imageBlock">
<a href="images/results-image-small.png" data-lightbox="img1">
<img src="images/results-image- small.png"></a>
</div>

<div class="imageBlock">
<a href="images/results-image-small.png" data-lightbox="img1">
<img src="images/results-image-small.png"></a></div>
</div>

</td>

Примечание:
Так мне надо еще чтобы изоображение увеличивалось в отдельном окне. Как pop up. То есть это лайт бокс. Этот скрипт я уже добавил. Но он увеличивает все изоображения которые у меня на картинке. То есть картинки которые стоят в ряд не должны увеличиваться. Должна увеличиваться только та фотка, которая большая.

Примечание:
Ну я же и говорю лайт бокс у меня работает) только нужно чтобы он работал только на ту картинку, которая выбранная. Просто думаю что код лайт бокса и J-Query галереи будут мешать друг другу

Примечание:
Хотя возможно это то что нужно ! Сылка ваша. Сейчас буду пробывать

Примечание:
Пользователь Без Имени. А как добавить лаит бокс ? он работает через "data-lightbox="тут ID"

Примечание:
Вот так выглядит мой лайт бокс )) Конечно всё криво потому что исходная картинка маленькая http://rghost.ru/48989913/image.png

Примечание:
То есть всё сделать как по вашему коду. Только "data-lightbox="тут ID". Ставить на увеличенную картинку?. Просто видите когда у всех картинок айди один и тот же оно как галерея идёт. А если поставить для всех один и тот же айди . Они тоже будут выходить как поп ап. Что-то я в безвыходном Положений)

Примечание:
data-lightbox="img1" . img1 - и есть ID. По которому плагин Light-box определяет является ли фотка из одной галереи

Примечание:
В моем случае если нажать на одну из любую фоток . Можно листать их в POP UP.

Примечание:
Вы не поняли)) У меня лаит бокс готовый уже) Мне надо просто сделать чтобы картинка замещалась с маленькой на большую а далее при клике уже на увеличенную картинку вылазает Pop up ( Плагин Лаит бокс)

Ответы:

slo_nik

есть готовые плагины на jquery
по ссылке найдёте один из вариантов

Этим Вы перехватите источник картинки с маленького изображения и передадите в большоеПринцип такой, если нужны конкретные детали - пишите.

Вам надо большую картинку поместить в какой-нибудь элемент, например <DIV id="bigImage">...
Далее на jQuery :
<script type="text/javascript">
$(document).ready(function () {
$(".imageBlock a").mouseover(function () {
var ImgSrc = $(this).css("href");
$("#bigImage img").css("src", ImgSrc);
});
});
</script>

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

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

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.