Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190
↧

Fotos 360 com o Path vindo do BD

June 18, 2015, 6:12 pm
$
0
0

Bom, seguinte galera, estou conseguindo postar fotos normalmente com um código que fiz, porém essas fotos precisam ser renderizadas por um código javascript que é a photo sphere view (fotos 360) e não estou conseguindo fazer o javascript pegar e reconhecer essas fotos, alguém pode dar uma força?

 

código onde as fotos 360 são exibidas

 

 

<!DOCTYPE html>

 
<html>
    <head>
        <meta charset="UTF-8">
        <title>Fotos</title> 
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <script src="three.min.js"></script>
        <script src="photo-sphere-viewer.js"></script>
        <script src="funcao.js"></script>
        
              
    </head>
    
    
    <body>
 
        <?php 
        include 'Classes/verificaLogin.php'
        ?>
        
    <div class="site">
 
        
    <?php
    include ('fixos/menuSup.php');
    ?>
 
 
 
        <div class="armacao">
 
            <?php
            include ('fixos/menuEsq.php')
            ?>
           
          
            <div class="capaUsuario"> 
 
                <?php
                include 'fixos/fotoUsuario.php';
                ?>
 
                <div class="miniMenu">
 
                    <?php
                    
                    include 'Classes/DAL/EmpresaDAL.php';
                    $objDAL = new EmpresaDAL();
                    $sql = $objDAL->sobreEmpresa($_GET['id']);
                    $linha = mysqli_fetch_array($sql);
                    
                    include 'fixos/menuEmpresas.php';
 
                    ?>
                    
                    <div class="sobreEmpresa"> 
 
                    <div class="conteudo">
 
                        
                        
                    <div class="foto360">
 
                        
 
<!--<div id="container"></div>
 
<p style="text-align: center;">
<a href="#" id="go"></a>
</p>
 
 
<div id="your-pano"></div>
 
<form method="POST" action="example1.html">
<p style="text-align: center;">
<input type="file" name="pano" id="pano" />
</p>
</form> -->
                        
                        <?php if($_SESSION['id'] == $_GET['id']){ ?>
        
                              
                        <form action="Classes/uploadFoto360.php" method="POST" enctype="multipart/form-data" name="addFoto360">
                        <input type="file" name="Foto360" id="Foto360">
                        <br>
                        <input type="submit" value="Enviar" name="Enviar"> 
                        </form>
                        <?php } ?>
                        
                        
                        <?php 
       
                    $idusuario = $_GET['id'];
        
                    include_once 'Classes/DAL/FotoDAL.php';
                    $objDAL = new FotoDal();
        
                    $foto360 = mysqli_fetch_array($objDAL->mostraFoto360($idusuario));{
        
        
            
        ?>
                        
                       
                        <div name="mostraFoto360" id="mostraFoto360" style="width: 100%; height: 500px;">
                            
                            <a href="Fotos/Fotos360/<?php echo $idusuario . '/' . $foto360['link'];?>">
                             <img src="Fotos/Fotos360/<?php echo $idusuario . '/' . $foto360['link'];?>"  width="100px" id="pano"></a>
                            
                        </div>
                         
                    <?php } ?>
                        
                        
                        
                        
                        
                        
                        
                    </div>   
 
                </div>
                        
                    </div>
 
                </div>
 
            </div>
 
                
        </div>
 
        <?php
        include ('fixos/rodape.php')
        ?>
        
    </div>
    </body>
 
</html>

 

código javascript

 

 

window.onload = function() {

document.getElementById('pano').addEventListener('change', upload, false);
};
 
// Load the predefined panorama
function loadPredefinedPanorama(evt) {
evt.preventDefault();
 
var div = document.getElementById('container');
 
var PSV = new PhotoSphereViewer({
 
 
// Container
container: div,
 
// Deactivate the animation
time_anim: false,
 
// Display the navigation bar
navbar: true,
 
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
}
 
// Load a panorama stored on the user's computer
function upload() {
// Retrieve the chosen file and create the FileReader object
var file = document.getElementById('Foto360').files[0];
var reader = new FileReader();
 
reader.onload = function() {
var div = document.getElementById('mostraFoto360');
 
var PSV = new PhotoSphereViewer({
                    
                                
                    
// Panorama, given in base 64
panorama: reader.result,
 
// Container
container: div,
 
// Deactivate the animation
time_anim: false,
 
// Display the navigation bar
navbar: true,
 
// Set max tilt angle
tilt_up_max: 40,
 
// Resize the panorama
size: {
width: '100%',
height: '500px'
}
});
};
 
reader.readAsDataURL(file);
}
 
 

 

estou usando essa biblioteca

 

https://github.com/JeremyHeleine/Photo-Sphere-Viewer

 
ahhh sim a imagem vem de uma pasta do usuario

 

se alguém souber e puder compartilhar, ficarei muito agradecido :)

 


obs: vi que tinha um <a href> referenciando pra ENTRAR na foto, não quero isso, quero que ela apareça já mostrando os 360...

↧
Search
Viewing all articles
Browse latest Browse all 14190
Search