add caixa de dialogo a imagem

[cocas42 0]

ola,

estou aqui a pedir ajuda para puder juntar um dialogo box que encontrei bastante fixe com outro script mas queria que quando clicássemos na imagem aparecesse o balão.

aqui estão as imagens:

http://mostraportfolio.comule.com/

 

Dialogo box:

http://mostraportfolio.comule.com/DialogEffects/

se precisarem de mais "material" pessam.

 

Estou ha bastante tempo tentando masesta-me sempre dando erro (será que tenho de transformar a imagem em botão?, será que tenho de trocar a ideia de utilizar o site das imagens por uma imagem solida?, ...)

[André do Vale 76]

Alerta de vírus no chrome. :skull:

[cocas42 0]

????

[danmartinsiss 5]

comigo tbm deu erro no chrome alerta de virus

[cocas42 0]

podem comfiar mas se quiserem mando prints!

[William Bruno 1501]

Ok, e qual a dúvida ? como vc tentou ?

[danmartinsiss 5]

veja se e isso que voce precisa...

ai voce transforma a imagem para que ela acesse o modal de uma lida em todo o conteudo de modal

 

http://getbootstrap.com/javascript/#modals

[cocas42 0]

eu preciso do

Varying modal content based on trigger button

mas não percebi muito bem como ele sabe qual é o botão!

 

porque eu vou colocar um em cada imagem para ter uma especie de descrição do player!

[L. Henrique 179]

Pra isso você não precisa de um modal. Pode ser um popover qualquer, bom, como eu sei que você está usando template e ta fazendo tudo a base do Ctrl + C e Ctrl + V, siga os passos:

 

1. Crie um novo arquivo e o nomeie de popover.js;

2. Insira a seguinte informação nesse arquivo:

$(function () {
  $('[data-toggle="popover"]').popover()
});

3. Salve o arquivo, vá até o HTML e coloque o script apontando pra onde salvou o popover.js:

<script src="js/popover.js"></script>

4. Na tag <a> do img do personagem que está utilizando, coloque isso:

<a href="#" data-toggle="popover" title="Nome do Personagem" data-content="Aqui vai toda a descrição do personagem">
   <img src="img/imagem.png>
</a>

Obs.: Não esqueça de linkar o CDN do Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

[cocas42 0]

Esse formato não funcionou, pelo menos como eu queria!