[Resolvido] balão em Jquery.

[caewilliam 0]

Olá para todos.

 

Bom, estou mechendo num site aki que tenho que adicionar um balão, quando colocar o mouse encima de um imagem, ae o balão aparece.

 

O script funciona assim.

 

antes do heade eu coloco

 

$(document).ready(function() {
	$('#example').bt({
		ajaxPath: 'demo-ajax.php?id=' + 123,
		padding: 10, // Largura da Parde
		width: 350,
		spikeLength: 12, // Esticamento da seta
		spikeGirth: 12, // Largura da seta
		cornerRadius: 7, // Arredondação das Bordas
		fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
		strokeWidth: 1, // Largura da Borda
		strokeStyle: '#666',
		cssStyles: {color: '#FFF'},
		// /**/
	});
});

ae no html do site eu coloco.

 

<img id="example" src="template/img/infoproduto.gif" />

Ae funciona.

 

Agora o problema é tipo assim.

 

Eu preciso colocar umas 20 a 40 imagens na página.

 

estão fika muito grande o script.

 

porque veja só como fika com 2.

 

$(document).ready(function() {
	$('#example').bt({
		ajaxPath: 'demo-ajax.php?id=' + 123,
		padding: 10, // Largura da Parde
		width: 350,
		spikeLength: 12, // Esticamento da seta
		spikeGirth: 12, // Largura da seta
		cornerRadius: 7, // Arredondação das Bordas
		fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
		strokeWidth: 1, // Largura da Borda
		strokeStyle: '#666',
		cssStyles: {color: '#FFF'},
		// /**/
	});
	$('#example2').bt({
		ajaxPath: 'demo-ajax.php?id=' + 124,
		padding: 10, // Largura da Parde
		width: 350,
		spikeLength: 12, // Esticamento da seta
		spikeGirth: 12, // Largura da seta
		cornerRadius: 7, // Arredondação das Bordas
		fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
		strokeWidth: 1, // Largura da Borda
		strokeStyle: '#666',
		cssStyles: {color: '#FFF'},
		// /**/
	});
});

e na página

 

<img id="example" src="template/img/infoproduto.gif" />
<img id="example2" src="template/img/infoproduto.gif" />

ae fika muito grande.

 

Ae tava querendo saber se alguem sabe como faço para fazer tipo, um script que n seja muito grande e que funcione em todas as imagens que eu quero.

 

E também tem um id no script que preciso adicionar.

 

ajaxPath: 'demo-ajax.php?id=' + 124,

Porque o balão pega o html de um outro arquivo.

 

Ae preciso colocar na imagem o id do produto para aparecer no balão o html certo.

[Daniel-DF 0]

Coloca uma classe em vez de id

 

$(document).ready(function() {
 $('.example').bt({
 ajaxPath: 'demo-ajax.php?id=' + 123,
 padding: 10, // Largura da Parde
 width: 350,
 spikeLength: 12, // Esticamento da seta
 spikeGirth: 12, // Largura da seta
 cornerRadius: 7, // Arredondação das Bordas
 fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
 strokeWidth: 1, // Largura da Borda
 strokeStyle: '#666',
 cssStyles: {color: '#FFF'},
 // /**/
 });
});

 

<img class="example" src="template/img/infoproduto.gif" />
<img class="example" src="template/img/infoproduto.gif" />

e caso queira continuar com a id separe por vírgulas no msm seletor

 

$(document).ready(function() {
 $('#example, #example2, #example3, #example4').bt({
 ajaxPath: 'demo-ajax.php?id=' + 123,
 padding: 10, // Largura da Parde
 width: 350,
 spikeLength: 12, // Esticamento da seta
 spikeGirth: 12, // Largura da seta
 cornerRadius: 7, // Arredondação das Bordas
 fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
 strokeWidth: 1, // Largura da Borda
 strokeStyle: '#666',
 cssStyles: {color: '#FFF'},
 // /**/
 });
 
});

<img id="example" src="template/img/infoproduto.gif" />
<img id="example2" src="template/img/infoproduto.gif" />
<img id="example3" src="template/img/infoproduto.gif" />
<img id="example4" src="template/img/infoproduto.gif" />

Testa aí!

 

Abraço

[caewilliam 0]

Mais o id tenho que colocar no arquivo.

 

por exemplo

 

numa imagem colocar

 

ajaxPath: 'demo-ajax.php?id=' + 123

ni outra color

 

ajaxPath: 'demo-ajax.php?id=' + 456

e em outra

 

ajaxPath: 'demo-ajax.php?id=' + 109

e assim vai.

[Daniel-DF 0]

tem como você colocar online?

fica mais fácil pra ajudar nesse caso.

 

realmente precisa enviar assim?

ajaxPath: 'demo-ajax.php?id=' + 123

Essa variável com valor 123 significa o que?

ja tentou mudar ela pra alguma informação vinda da própria imagem?

 

se for possível ficaria mais fácil pra dar um loop ($.each).

 

$(document).ready(function() {

$('.example').each(function(){inicia um loop
var val = $(this).attr('id');//pega o valor da id atual 

 $(this).bt({
 ajaxPath: 'demo-ajax.php?id=' + val, //cria a variável id com o valor do atributo id da imagem
 padding: 10, // Largura da Parde
 width: 350,
 spikeLength: 12, // Esticamento da seta
 spikeGirth: 12, // Largura da seta
 cornerRadius: 7, // Arredondação das Bordas
 fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
 strokeWidth: 1, // Largura da Borda
 strokeStyle: '#666',
 cssStyles: {color: '#FFF'},
 // /**/
 });


});
 
});

obs: não é a forma mais aconselhavel pra isso, mas nao sei se esse plugin oferece suporte pra fazer diferente.

o ideal seria dar um loop apenas nos valores das ids e enviar em apenas um get/json.

[caewilliam 0]

O Script que estou usando é este

 

http://plugins.jquery.com/project/bt

 

demo aqui: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

 

No demo.

 

Você verá a parte "Ajax content" que pega o texto de um arquivo e coloca no balão.

 

Estou tentando adaptar para tipo, quando eu colocar o mouse encima da imagem, pegar o texto de um .php de acordo com o id.

 

Porque cada produto no meu script aki, tem um id.

[caewilliam 0]

Deixa eu esplicar mesmo.

 

Por exemplo eu esteja fazendo em js.

 

<img id="example" onmouseover="mostrar_popup('example', '123')" onmouseout="ocultar_popup();" src="template/img/banner.gif" />

 

onde mostrar_popup era a função que mostrava o popup. com exemplo do id da imagem e 123, que é a id do produto ae na função teria a id do produto que preciso.

[Daniel-DF 0]

É isso?

 

<script type="text/javascript">
$(document).ready(function() {
	$('.example').mouseover(function(){
	var id = $(this).attr('id');
	
			$(this).bt({
					ajaxPath: 'ajax.php?id='+id,
					padding: 10, // Largura da Parde
					width: 350,
					spikeLength: 12, // Esticamento da seta
					spikeGirth: 12, // Largura da seta
					cornerRadius: 7, // Arredondação das Bordas
					fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
					strokeWidth: 1, // Largura da Borda
					strokeStyle: '#666',
					cssStyles: {color: '#FFF'},
			});
			
	});
});
</script>

 

ajax.php

 

<?
$valor= $_GET["id"];
switch ($valor) {
	case 'a':
$texto = "aaaaaaaa";
 	break;
	
	case 'b':
$texto = "bbbbbbbbbbbbb";
 	break;

}
 echo $texto;
?>

[caewilliam 0]

Este script funcionou. Mais só tem um problema nele.

 

Eu tenho que colocar o mouse, encima da imagem 2 vezes.

 

Por exemplo, eu coloco, ae o balão n aparece, ae tiro e coloco denovo, ae aparece.

[Daniel-DF 0]

Este script funcionou. Mais só tem um problema nele.

 

Eu tenho que colocar o mouse, encima da imagem 2 vezes.

 

Por exemplo, eu coloco, ae o balão n aparece, ae tiro e coloco denovo, ae aparece.

 

Ao meu ver ele precisa ser carregado antes para funcionar, por isso ele fica no (document).ready. Percebemos isso pois a cada vez que passamos o mouse em cima ele precisa receber o valor primeiro para na segunda tentativa executar o comando.

Não é tao complicado fazer um script para isso funcionar do jeito que você precisa, claro, sem recursos como esticar seta, arredondar borda da div e bla bla bla.

Tenta e qualquer coisa posta aqui

 

abraço

[caewilliam 0]

Eu acho que consequi :)

 

$(document).ready(function() {
	$('.balao', 'div#produtos').each(function() {
		var id = $(this).attr('id');
		$(this).bt({
			ajaxPath: 'ajax.php?id='+id+'&ajax=1',
			padding: 10, // Largura da Parde
			width: 350,
			spikeLength: 12, // Esticamento da seta
			spikeGirth: 12, // Largura da seta
			cornerRadius: 7, // Arredondação das Bordas
			fill: 'rgba(0, 0, 0, .7)', // Cor da Caixa
			strokeWidth: 1, // Largura da Borda
			strokeStyle: '#666',
			cssStyles: {color: '#FFF'},
		});					   
	});
});