Jump to content

imagens em Random com link


zarienak
 Share

Recommended Posts

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> 
      
Link to comment
Share on other sites

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');
Link to comment
Share on other sites

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:

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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
 Share

×
×
  • 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.