Есть ли готовые решения такого «шоурума»?

Question

[blackbb]

Есть ли готовые варианты скриптов такого плана selldom.ru/showroom ?

Comments

[crazyman]

А в чём проблема? Фотошоп и ручки. Не так и сложно.

[blackbb]

crazyman: т.е. по вашему здесь не нужен javascript? Хватит фотошопа)

[alvvi]

blackbb, если вы не можете одно изображение заменить другим в JS, то о чем речь? Тут не нужны заготовленные скрипты, это 10 строчек кода.

[blackbb]

если вы не можете одно изображение заменить другим в JS, то о чем речь?

Как раз об этом и речь. Если вы мастер в этом, то написали бы в ответе эти 10 строчек кода, а не

умняк

отмачивали тут.

[Алекс Глебов]

Как раз об этом и речь. Если вы мастер в этом, то написали бы в ответе эти 10 строчек кода, а не

Тогда это будет не вопрос, а задание)

[blackbb]

Алекс Глебов, Спасибо и вам за столь обширное пояснение), я хотел узнать, если готовые скрипты. Алексей Сергеев уже мне ответил. Я выбрал его ответ решением. Ответил просто и доходчиво.

[crazyman]

blackbb, достаточно знать основы js, чтобы сменить картинку по клику.

[alvvi]

blackbb, а еще неверно, потому что fabricjs тут абсолютно не при чем, и все делается самописным скриптом на jquery в 120 строк, из которых за смену изображения отвечают как раз где-то 10.
Учитесь пользоваться отладчиком.

spoiler

jQuery(document).ready(function($) {

	var animateZoomOut 		= 'animated zoomOut';
	var animateZoomIn 		= 'animated zoomIn';
	var animateFadeIn 		= 'animated fadeIn';
	var animateEnd 			= 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

	var roomSelected;
	$('.room-styles .room-style').on('click', function() {
		console.log('df');
		$('.room-style').removeClass('active');
		$(this).addClass('active');
		roomSelected = $(this).parents('.room-item');
		if($('.rooms').hasClass('open')) {
			$('.room-item').each(function(index){
				if(!$(this).is(roomSelected)) {
					$(this).addClass(animateZoomOut).one(animateEnd, function() {
						$(this).removeClass(animateZoomOut);
						$(this).hide();
					});
				}
			});
			$('.btn-choose-room').show();
			$('.rooms').removeClass('open');
		}
		$( "a.manufacturer" ).first().removeClass('active').click();
		return false;
	});

	$('.btn-choose-room').on('click', function() {

		$('.room-item').each(function(index){
			if(!$(this).is(roomSelected)) {
				$(this).show();
				$(this).addClass(animateZoomIn).one(animateEnd, function() {
					$(this).removeClass(animateZoomIn);
				});
			}
		});
		$('.rooms').addClass('open');
	    $(this).hide();
	});

	$('a.manufacturer').on('click', function() {

		if($(this).hasClass('active')) return false;

		var selectedManufacturer = $(this),
		    showroom = $('.showroom-block');

		var roomStyle 			= $('.room-styles .active').data('roomStyle'),
			manufacturer_name 	= $(this).text();
			manufacturer_id 	= $(this).data('manufacturerId');

		$('.collection-item a').tooltipster('hide');
		$('.loader').css('display', 'inline');
		showroom.css('opacity', '0.2');
		$.ajax({
			url: '/wp-content/themes/selldom/inc/showroom-ajax.php',
			type: 'POST',
			dataType: 'html',
			data: {
				roomStyle: roomStyle,
				manufacturer_name: manufacturer_name,
				manufacturer_id: manufacturer_id
			},
		})
		.done(function(data) {
			$('.loader').hide();
			showroom.css('opacity', '1');
			$('.collections').html(data);
			$('.tooltip').tooltipster({ animation: 'grow', autoClose: false });
			showroom.show();
			$('.collection-item a').first().click();
		    showroom.addClass(animateFadeIn).one(animateEnd, function(){
		    	showroom.removeClass(animateFadeIn);
		    });
		});

		$('a.manufacturer').removeClass('active');
		$(selectedManufacturer).addClass('active');

		$('#show-img').css('background', 'none');
		if((roomStyle == 'std') || (roomStyle == 'stl') ) {
			$('.colorpicker').show();
		} else {
			$('.colorpicker').hide();
		}

		return false;
	});

	$('body').on({
		click: function() {
			$('.showroom-main-image img').attr('src', $(this).attr('href'));
			$('.collection-selected-title').html($(this).data('title'));
			$('.collection-selected-more').attr('href', $(this).data('link'));
			$('.collection-item a').removeClass('active');
			$(this).addClass('active');
			$('.collection-item a').tooltipster('hide');
			$(this).tooltipster('show');
			return false;
		},

		mouseleave: function() {
			if( !$(this).hasClass('active') )
				$(this).tooltipster('hide');
			return false;
		}
	}, '.collection-item a');

	$( "a.manufacturer" ).first().click();

	$(".colorpicker").colorPicker({
		onSelect: function(ui, color){
			$('#show-img').css('background', color);
		}
	});
	
});

[blackbb]

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

Answer 1

[Алексей Сергеев]

Готовых нет, нужно писать. На fabricjs, например.

Answer 2

[Astrohas]

Там заранее подготовленные изображения.

Comments

[blackbb]

Спасибо кэп) Скрипт я имел ввиду меняющий эти подготовленные изображения по клику.

[Astrohas]

blackbb: так почему об этом не сказано в вопросе?

[blackbb]

Хасан Истамкулов: Есть ли готовые варианты скриптов такого плана selldom.ru/showroom ? "Скриптов" выделить надо было?