1

Tenho que fazer o seguinte projeto da primeira imagem, vai mostrar uma coluna de propriedades(casas) e quando eu clicar em uma na direita vai mostrar a descrição da casa... se eu quiser ver mais detalhado clico em full info e a coluna que era só uma irá virar 2 e ao invés de mostrar as casas disponiveis irá mostrar as imagens da casa clicada... Resolvi começar a fazer logo pela parte espandida(tela 2), na imagem 2 ja está o projeto mais ou menos, como posso fazer para quando o cliente clicar na foto da primeira coluna a mesma carregar na div com a imagem maior (coluna a direita)? E estou fazendo do modo certo? tem como fazer na mesma pagina isso do cliente clicar em full info e eu só fazer a coluna ficar maior? Desculpem o transtorno sou estagiario kkk, segue o código abaixo da imagem, tenho que fazer isso utilizando js?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

body{
	padding: 0;
	margin: 0;
}

#ofertas{
	float:left;
	height: 513px;
	background-color:  #EEE9E9;
	position: relative;
	overflow-y: scroll;
	margin-left: 3%;
	width: 36%;
}

#ofertas ul li {
	list-style: none;
	display: inline-block;
}



.margin-oferta{
	position: relative;
	display: inline-block;
	width:163px;
	height: 169px;
	padding: 0;
	margin: 2% auto;
	margin-left: 5%;
}

.margin-oferta h4{
	margin-bottom: 0;
}
.venda{
	position: relative;
	height: 150px;
	width: 163px;
	background: blue;
	display: inline-block;
	padding: 0;
	margin-top: 0;

	
	}

.venda img{
	width: 163px;
	height: 150px;
}

.bar-right{
	display: block;
	margin-top: 0;
	width: 60%;
	height: auto;
	float: right;

}

.description{
	width: 87%;
	height: auto;
	margin: 1% auto 2%;
	background-color: #EEE9E9;

}

.margin-out{
	margin:0 auto;
	background-color: #EEE9E9;
	height: 420px;
	width: 700px;
}

#preco{

margin-left: 7%; 
margin-bottom: 0;"
}
.image-house{
	position: relative;
	margin: 0 auto;
	height: 370px;
	width: 645px;
}

.image-house img{
	position: relative;
	margin: 3.5% auto;
	height: 370px;
	width: 645px;
}
<div id="ofertas">
		<ul>
		    <div class="margin-oferta">
		    	<h4>Casa 1</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 2</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			
			<div class="margin-oferta">
		    	<h4>Casa 3</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 4</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 5</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 6</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 7</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 8</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
		</ul>
	</div>

	<div class="bar-right">
		<div class="margin-out">
			<div class="image-house">
				<img src="img/avatar4.jpg">
			</div>
		</div>
		<p id="preco">£ 90 0000 </p>
		<div class="description">
			<p>	This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome</p>

		</div>

	</div>

1 Resposta 1

1

Anderson, a sua pergunta está um pouco dificil de entender. Pelo que eu entendi, voce quer que a casa que voce clica em um menu apareça em tamanho maior do outro lado da tela, correto?

Bom, eu usei o jQuery para pegar o evento click da imagem, encontrar o src e atribuir a tag maior. Além disso, o menu ira conter um campo label contendo os detalhes que voce quer exibir ao clicar no botao "Info"

$(document).ready(function(){
$('.venda').click(function(){
  $('.image-house img').attr('src',$(this).find('img').attr('src'));  
$('.description .p-description').text($(this).find('.label-description').text());

  });
  $('#btnInfo').click(function(){
  $('.description').show();
  });
});
body{
	padding: 0;
	margin: 0;
}

#ofertas{
	float:left;
	height: 513px;
	background-color:  #EEE9E9;
	position: relative;
	overflow-y: scroll;
	margin-left: 3%;
	width: 36%;
}

#ofertas ul li {
	list-style: none;
	display: inline-block;
}



.margin-oferta{
	position: relative;
	display: inline-block;
	width:163px;
	height: 169px;
	padding: 0;
	margin: 2% auto;
	margin-left: 5%;
}

.margin-oferta h4{
	margin-bottom: 0;
}
.venda{
	position: relative;
	height: 150px;
	width: 163px;
	background: blue;
	display: inline-block;
	padding: 0;
	margin-top: 0;

	
	}

.venda img{
	width: 163px;
	height: 150px;
}

.bar-right{
	display: block;
	margin-top: 0;
	width: 60%;
	height: auto;
	float: right;

}

.description{
	width: 87%;
	height: auto;
	margin: 1% auto 2%;
	background-color: #EEE9E9;
  display:none;

}

.label-description{
display:none;
}

.p-description{
}

.margin-out{
	margin:0 auto;
	background-color: #EEE9E9;
	height: 420px;
	width: 700px;
}

#preco{

margin-left: 7%; 
margin-bottom: 0;"
}
.image-house{
	position: relative;
	margin: 0 auto;
	height: 370px;
	width: 645px;
}

.image-house img{
	position: relative;
	margin: 3.5% auto;
	height: 370px;
	width: 645px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.venda img').click(function(){
$('.image-house img').attr('src',$(this).attr('src'));
  });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ofertas">
		<ul>
		    <div class="margin-oferta">
		    	<h4>Casa 1</h4>
				<div class="venda">
					<img src="http://blog.eucontrato.com.br/wp-content/uploads/2016/04/ideia-casa-reforma-fachada-construcao-telhado-platibanda.jpg">
          <label class="label-description">esse texto é o detalhe da casa 1</label>
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 2</h4>
				<div class="venda">
						<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ22cCH-q_nwhbc5CiTPjgQpzoDfxQP7lKnUE_OhoFQG5WzKXrf">
             <label class="label-description">esse texto é o detalhe da casa 2</label>
				</div>
			</div>
			
			
			<div class="margin-oferta">
		    	<h4>Casa 3</h4>
				<div class="venda">
					<img src="img/2.jpg">
           <label class="label-description">esse texto é o detalhe da casa 3</label>
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 4</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
			
			<div class="margin-oferta">
		    	<h4>Casa 5</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 6</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 7</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>

			<div class="margin-oferta">
		    	<h4>Casa 8</h4>
				<div class="venda">
					<img src="img/2.jpg">
				</div>
			</div>
		</ul>
	</div>

	<div class="bar-right">
		<div class="margin-out">
			<div class="image-house">
				<img src="img/avatar4.jpg">
			</div>
		</div>
    <input id="btnInfo" type="button" value="info"/>
		<p id="preco">£ 90 0000 </p>
		<div class="description">
			<p class="p-description">	This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome<br>
				This house is recommended for those who have a big family. it's very big and handsome</p>

		</div>

	</div>

1
  • Isso mesmo amigo muito Obrigado ! Commented 28/04/2017 às 12:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .