Como abrir links ao clicar

[Lucas Ramos_168509 0]

Queria que,ao clicar em um título,abrisse um link.

 

 

Aqui está a demonstração: http://www.addyosmani.com/resources/shinetime/

 

Repare que ao clicar nas imagens pequenas,aparece sua forma maior, e ao passar o mouse,o título da imagem aparece. Enfim,queria que ao clicar nesses títulos,abrisse um link. Apenas isso.

 

 

Aqui está o código JavaScript :

 

<script type="text/javascript">
$(document).ready(function()
{

/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to ShineTime';

/*Load The Default Image*/
loadPhoto(default_image, default_caption);


function loadPhoto($url, $caption)
{


/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();

}).attr({ "src": $url });

$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}


/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{

var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);

});

/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{

var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');

largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()



largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);

Cufon.replace('.captionContent');


},

function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();

});



/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);

}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});

function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}

function hidePreloader()
{
$('#loader').css('background-image','url("")');
}

});
</script>
 

 

 

O HTML (exemplo):

 

 

<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb"> <img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb"> <img alt="" src="images/large/sample1.jpg" class="large_image" rel=" Tíulo das imagens">
<div class="large_thumb_border"> </div>
<div class="large_thumb_shine"> </div>
</div>
</div>
</div>

 

 

Daí queria colocar um href='' ''

[Henrique Barcelos 290]

Adicione marcação HTML nos títulos:

<a href="URL_DESEJADA">TÍTULO DA IMAGEM</a>

[angelorubin 142]

Boa tarde,

 

Fiz na correria devido ao tempo - http://angelorubin.besaba.com/Slide/slide.html

 

Se quiser baixar os arquivos - https://mega.co.nz/#!M881zRhR!RSHWjjHvrB5Pnm8oYKBPAwWMndlMrrucHcIyEiXmaSs

 

Espero que ajude.

[Lucas Ramos_168509 0]

Henrique Barcelos, não deu certo...eu testei,mas não redirecionou...

 

eu tentei aplicar umas funções de click (jquery) pra redirecionar o link,mas fica como se fosse um link pra todas as imagens...

 

queria que cada imagem tivesse seu link...de preferencia ao clicar no Título (Caption)

 

tem alguma outra alternativa?

[angelorubin 142]

Bom dia,

 

Chegou a olhar o exemplo que montei pra ti?

 

http://forum.imasters.com.br/topic/496421-como-abrir-links-ao-clicar/?p=1970828

 

O próprio nome que coloquei do personagem no slide é um link, é só personalizar a seu gosto.

 

Clique no link do primeiro personagem para ver a janela (dialog jquery ui) sobre o mesmo.

[Lucas Ramos_168509 0]

Sim eu dei uma olhada no seu exemplo,tentei baixar e tal,mas não deu.

 

Olhando o código fonte,consegui montar de novo. O que percebi,é que ele amplia a imagem do box menor no maior. No caso do meu outro slide,existem 2 imagens separadas,ou seja,a imagem pequena que ao clicada exibe a imagem maior no box maior.

 

Bom,o problema é que eu não sou muito bom nessa parte de JQuery...dava pra personalizar o teu numa boa...mas ainda tem umas funções que estão faltando...mas em geral ficou muito bom.

 

O problema maior mesmo,fica na parte de redirecionar o link. Quero apenas isso...tipo no exemplo que vc me deu,parece que um link serve pra todos os nomes certo?

 

Enfim,não teria como montar um título que redirecionasse cada link neste código que eu já enviei?

 

( http://addyosmani.com/blog/shinetime/ )

[angelorubin 142]

Por exemplo no link do código que montei, abre uma dialog box, voce quer que este link abra em uma nova janela ?

 

Quanto as duas imagens separadas, sem problema, faz uma pequena e uma grande.

[Lucas Ramos_168509 0]

Não,o que eu quero é que abra na mesma janela.

 

Tipo assim: no exemplo original ( http://www.addyosmani.com/resources/shinetime/ ),como já disse,ao clicar na imagem menor,é exibida outra maior (não que seja ampliada) pq tem duas categorias de imagem,tanto para a pequena que vai ficar ao lado, e a maior que vai ser exibida.

 

 

Ok,depois da imagem pequena ser clicada,ao passar o mouse na imagem maior exibida,aparece seu título,ok, é nesse título que eu quero que esteja o link da postagem.

 

 

 

Tentei dessa forma,mas não dá certo...

 

 

<!-- start entry-->

<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="http://2.bp.blogspot.com/-JtHgef94Y4c/UZF643TRY-I/AAAAAAAABm8/jm7EepvxQ_s/s1600/subito1223ee.jpg" class="large_thumb_image" alt="thumb" />

<a href="#" ><img src="http://2.bp.blogspot.com/-V155aisCo-Y/UZF9BGh8-7I/AAAAAAAABnI/olVs8EkTr5U/s1600/5y5yhy.png" class="large_image" rel="10 doenças dermatológicas" href="#" /></a>







<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>

<!--end entry-->

Eu também tentei dessa forma:

 

 

 

<script>

$(".thumb_container").click( function () {

var newcaption = "http://maujor.com/tutorial/texttut.php";
$(window.location).attr('href',newcaption);
});

</script>

 

 

 

Funciona perfeitamente quando clicado no título,o problema é que só pode ser usado apenas 1 link pra todas as imagens.

 

Queria só acabar com isso, deixar os títulos com links individuais pra cada postagem.

[angelorubin 142]

Bom dia,

 

"Funciona perfeitamente quando clicado no título,o problema é que só pode ser usado apenas 1 link pra todas as imagens."

 

Mas o exemplo (http://angelorubin.besaba.com/Slide/slide.html) que te passei já faz isso, cada personagem que você clica ele abre um slide com um link único.

 

É só implementar no seu !

[Lucas Ramos_168509 0]

Mas é clicando no Título ou na imagem? é pq que quero que seja clicando no Título...

 

No seu código tem:

 

 

 

<a class="nome" href="#"></a>

[Lucas Ramos_168509 0]

Por favor,faz uma demonstração redirecionando pra um link qualquer ao clicar no título das imagens (cada título com um link diferente). Acho que só assim vou entender...

 

 

 

Vou ficar com o teu exemplo mesmo.

[angelorubin 142]

Olá,

 

<a class="nome" href="#"></a>

 

É um link como pode ver acima, então é só você modificar no script para onde quer redirecionar ao clicar nele.

 

Simples assim !

 

Modifiquei veja - http://www.angelorubin.besaba.com/Slide/slide.html

[Lucas Ramos_168509 0]

Ahhh,Obrigado!!