Какой скрипт можно использовать?

Question

[Дмитрий]

Есть своего рода менюшка.
Необходимо, чтобы при клике на один из кружков (их, как вы можете наблюдать - 4) менялось изображение(на картинке мужик с бабой) и текст с заголовком(это все из базы тянуться будет).

Есть идея, как реализовать примерное, но CSS, а хотелось бы JS или jQuery, ибо вследствие, возможно, будет расширяться функционал.

Есть какие-то готовые решения? Благодарю заранее.

Answer 1

[Александр Хиренко]

А что Вам мешает взять любой слайдер на jQuery и просто сделать управление по нажатии на кружки.

Answer 2

[Константин Величко]

1. На куружек в href кладем ссылку картинки
2. На click меняем url картинки на наш их кружка

$('.js-menu-item').click(function(event) {
	image = $(this).attr('href');
	$mainImg = $('.js-main-image').find('img');

	if ($mainImg.attr('src') != image) {
		$(".js-gallery-list-link").parent().removeClass('js-selected');
		$(this).parent().addClass('js-selected');
		$mainImg.animate({
			opacity: 0
		}, 400, function() {
			$mainImg.attr('src', image);
			$mainImg.one("load", function() {
				$mainImg.animate({
					opacity: 1
				}, 400);
			});
		});
	}
	event.preventDefault();

});

Comments

[Дмитрий]

Спасибо, это близко. Но еще нужно менять текст и заголовок на странице. Можно все одним блоком брать и захватывать. В JS не сильно могу :-\

[Владимир Т.]

data-title= заголовок data-text= текст

[Владимир Т.]

я, обычно, храню данные (если того требует ситуация) в виде data="{ данные }" не нужно считывать разные параметры

Answer 3

[Константин Величко]

Если нужен еще текст. То можете посмотреть слайдер здесь www.bakai.kg
Можете его использовать, то что вам нужно