Fotos em 360 com rollerblade.js jquery

11/03/2017

0

Para quem tiver dúvida que tinha e consegui encontrar o código.
Como fazer fotos em 360 usando jquery

<html>
    <head>
        <link rel="stylesheet" href="rollerblade.css">
        <link rel="stylesheet" href="style.css" type="text/css"/>

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

            $(document).ready(function () {
                var arrayOfImages = [
                    '1f07c369fc59f95f3744fe4ddfe6e8f3.jpg',
                    '63d9201f651bba0fb8fff321a150a9c0.jpg',
                    '1f07c369fc59f95f3744fe4ddfe6e8f3.jpg',
                    '63d9201f651bba0fb8fff321a150a9c0.jpg'
                ];

                $("#target").rollerblade({imageArray: arrayOfImages});

               

                $("#target").rollerblade({
                    imageArray: [yourArray],
                    sensitivity: 35,
                    drag: false,
                    auto: true
                });

            });
        </script>
        
        <style type="text/css">
            #target{background: red;}
            .img-tenis{max-width: 300px;}
        </style>
    </head>
    <body>

        <div id="target">
            <img class="rollerblade-img img-tenis" src="1f07c369fc59f95f3744fe4ddfe6e8f3.jpg">
        </div>

    </body>
</html>


link pra download
https://github.com/austenpayan/rollerblade/archive/master.zip

Depois de baixar basta alterar a referência das images e dos js e css.
Samuel Lopes

Samuel Lopes

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar