Jump to content

Recommended Posts

Posted

Boas pessoal, tenho este codigo em baixo e gostaria de adicionar link nas imagens mas nao estou a conseguir...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">
    #images_container{
        overflow:hidden;
        width:640px;
    }
    #images_container .image_box{
        float:left;
        width:160px;
        text-align:center;
    }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

var image_list = [
    {
        url:        'https://testimages/random1.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random2.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random3.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random4.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random5.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random6.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random7.jpg',
        caption:    ''
    }
    ,{
        url:        'https://testimages/random8.jpg',
        caption:    ''
    }
]

$(function(){
    var used = [];
    var i = Math.floor(Math.random() * image_list.length);
    while (used.length < 4){
        while ($.inArray(i, used) > -1){
            i = Math.floor(Math.random() * image_list.length);
        }
        img = image_list[i];
        $('<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>').appendTo('#images_container');
        used[used.length] = i;
    }
});

</script>

</head>

<body>
    
    <div id="images_container"></div>
    
</body>
</html> 
      
Posted

Quando estás a fazer:

 $('<div class="image_box"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></div>').appendTo('#images_container');

experimenta:

 $('<div class="image_box"><a href="' + img.url + '"><img src="' + img.url + '" alt="' + img.caption + '"><p>' + img.caption + '</p></img></a></div>').appendTo('#images_container');
Posted

Olá HappyHippyHippo,

Se calhar não me expliquei da melhor forma, o queria dizer era:

O joaorosa fez um cód. que quando clicas na imagem redirecciona á imagem que clicas.

O que queria era quando clicas numa imagem, cada imagem redirecciona para uma pagina http://

Desculpem e Obrigado  :wallbash:

Posted

Ok obrigado HappyHippyHippo, já agora é possivel cada imagem redireccionar para uma página diferente?

É possivel criar os links na lista de imagens ou tenho de criar outra lista?

var image_list = [

    {

        url:        'https://testimages/random1.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random2.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random3.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random4.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random5.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random6.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random7.jpg',

        caption:    ''

    }

    ,{

        url:        'https://testimages/random8.jpg',

        caption:    ''

    }

Cada url teria um valor de link diferente, desculpa mas estou um pouco confuso  😉

Obrigado mais uma vez...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.