[SOLUCIONADO] como trabajar codigo html sobre php

ignachiou · #1 (**permalink**) 18/10/2015, 17:47

hola gente como anda? vengo a solicitar su ayuda porque no entiendo como puedo introducir un codigo html en uno php.
explicare brevemente, existe un javascript que se llama trun.js este simula un flipbook, para su ejecucion utiliza un index.html.

ahora yo quiero aplicar ese flipbook a mi proyecto, pero tengo entendido que debe ser a traves de un php, este archivo php que tengo toma de una carpeta todas las imagenes q tiene, las guarda en un array y luego las ordena con el comando sort().

ahora tengo dias intentando adaptar el codigo html al de php, pero nada que la pego por eso necesito la ayuda. anexo los codigo

php:

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\Url;
?>

<?php
header('Content-type: text/html; charset=utf-8');

$path = '../imagenes/monografias/13'; # Directorio donde están las imágenes

# Comprobamos si es un directorio y si lo es nos movemos a el
if (is_dir($path)){
$dir = opendir($path);

# Recorremos los ficheros que hay en el directorio y tomamos solamente aquellos cuya extensión
# sea jpg, gif y png y la guardamos en una lista
while (false !== ($file = readdir($dir))) {
if (preg_match("#([a-zA-Z0-9_\-\s]+)\.(gif|GIF|jpg|JPG|png|PNG)#is",$file)){
$list[] = $file;

}
}

# Cerramos el directorio
closedir($dir);
# Ordenamos la lista
$orden = sort ($list,1);

$total = count($list); #guardo cuantos archivos hay en la carpeta

for($i=0; $i<$total; $i++){
echo '<img src="'.$path."/".$list[$i].'"><br>';
}

echo $total;

}else{
echo "$path no es un directorio";
}
?>

codigo html:

<!doctype html>




 <html lang="en"> 
<head>
<meta name="viewport" content="width = 1050, user-scalable = yes" />
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
</head>
<body>

<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(pages/1.jpg)"></div>
<div style="background-image:url(pages/2.jpg)"></div>
<div style="background-image:url(pages/3.jpg)"></div>

</div>
</div>
</div>

<script type="text/javascript">

function loadApp() {

// Create the flipbook

$('.flipbook').turn({
// Width

width:922,

// Height

height:600,

// Elevation

elevation: 50,

// Enable gradients

gradients: true,

// Auto center this flipbook

autoCenter: true

});
}

// Load the HTML4 version if there's not CSS transform

yepnope({
test : Modernizr.csstransforms,
yep: ['../../lib/turn.js'],
nope: ['../../lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});

</script>

</body>
</html>

ignachiou · #2 (**permalink**) 18/10/2015, 18:10

explicando algo mas del codigo porque creo no entenderan a la perfeccion, en el codigo HTML en los div, es donde se insertan las direcciones de las imagenes, y el las carga para hacer el flipbook, ahora en el codigo php, las imagenes estan guardadas en el archivo $list[], y lo q quiero es mezclar el codigo html dentro de php y usar la variable $list donde estan guardadas las imagenes para que genere los distintos <div>, lo intente hacer con un for, desde la posicion 0 hasta i-1 del array y haciendo un llamado echo de los <div> pero nada no tengo idea

ignachiou · #3 (**permalink**) 18/10/2015, 18:45

estoy tratando de hacerlo de esta manera, pero nada que se muestra el flipbook

Código PHP:

  <?php

use yiihelpersHtml;

use yiiwidgetsActiveForm;

use yiihelpersUrl;

?>

 
<!doctype html>

<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->

<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->

<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<head>

<meta name="viewport" content="width = 1050, user-scalable = yes" />

<script type="text/javascript" src="scripts/jquery.min.1.7.js"></script>

<script type="text/javascript" src="scripts/modernizr.2.5.3.min.js"></script>

</head>

<body>

 
<?php

header('Content-type: text/html; charset=utf-8');

 

$path = '../../../imagenes/monografias/13'; # Directorio donde están las imágenes

 
# Comprobamos si es un directorio y si lo es nos movemos a el

if (is_dir($path)){

    $dir = opendir($path);

    

    # Recorremos los ficheros que hay en el directorio y tomamos solamente aquellos cuya extensión

    # sea jpg, gif y png y la guardamos en una lista

    while (false !== ($file = readdir($dir))) {

        if (preg_match("#([a-zA-Z0-9_\-\s]+)\.(gif|GIF|jpg|JPG|png|PNG)#is",$file)){

            $list[] = $file;

            #echo '<img src="'.$path."/".$file.'">.<br />'; //para mostrar las imagenes insertadas

            

        }

    }    

    

    # Cerramos el directorio

    closedir($dir);

    # Ordenamos la lista

    $orden = sort ($list,1);

    

    echo "<img src=".$path."/".$list[0].">";    

    

    $total = count($list);

    

    echo $total;

    

    $camino = "pages/1.jpg"; //ubicacion de una imagen prueba estilo revista

    

    $prueba = "<div class='flipbook-viewport'>

    <div class='container'>

        <div class='flipbook'>

            <div style='background-image:url(".$camino.")'></div>

        

        </div>

    </div>

</div>";

    

    //echo "<img src=$camino>";

    

    

    echo $prueba;

    

    echo "<font color='#ff0000'>soy el </font>";

 
    

    $div = '<div>hola mundo <div>hola mundo</div></div>';

    

    echo $div;

    

    

    }else{

        echo "$path no es un directorio";

    }

    ?>

    

    <div class="flipbook-viewport">

    <div class="container">

        <div class="flipbook">

            <div style="background-image:url(img/fondo1.jpg)"></div>

        </div>

    </div>

</div>

        

<script type="text/javascript">

 
function loadApp() {

 
    // Create the flipbook

 
    $('.flipbook').turn({

            // Width

 
            width:922,

            

            // Height

 
            height:600,

 
            // Elevation

 
            elevation: 50,

            

            // Enable gradients

 
            gradients: true,

            

            // Auto center this flipbook

 
            autoCenter: true

 
    });

}

 
// Load the HTML4 version if there's not CSS transform

 
yepnope({

    test : Modernizr.csstransforms,

    yep: ['../../lib/turn.js'],

    nope: ['../../lib/turn.html4.min.js'],

    both: ['css/basic.css'],

    complete: loadApp

});

 
</script>

    

    

    

    

    </body>

</html>

ignachiou · #4 (**permalink**) 19/10/2015, 23:01

poseo parte del codigo con el problema solucionado

Código PHP:

 
<!doctype html>

<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->

<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->

<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->

<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->

<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->

<head>

<meta name="viewport" content="width = 1050, user-scalable = yes" />

<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>

<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>

</head>

<body>

 
<?php

header('Content-type: text/html; charset=utf-8');

 

$path = 'pages/'; # Directorio donde están las imágenes

 
# Comprobamos si es un directorio y si lo es nos movemos a el

if (is_dir($path)){

    $dir = opendir($path);

    

    # Recorremos los ficheros que hay en el directorio y tomamos solamente aquellos cuya extensión

    # sea jpg, gif y png y la guardamos en una lista

    while (false !== ($file = readdir($dir))) {

        if (preg_match("#([a-zA-Z0-9_\-\s]+)\.(gif|GIF|jpg|JPG|png|PNG)#is",$file)){

            $list[] = $file;

            #echo '<img src="'.$path."/".$file.'">.<br />'; //para mostrar las imagenes insertadas            

        }

    }

    # Cerramos el directorio

    closedir($dir);

    # Ordenamos la lista

    $orden = sort ($list,1);

    #almacenamos la cantidad de imagenes que existen    

    $total = count($list);

    

    //echo "<font color='#ff0000'>soy el </font>";    

    

    }else{

        echo "$path no es un directorio";

    }

    ?>

 
<div class="flipbook-viewport">

    <div class="container">

        <div class="flipbook">

            <?php                          #realizamos un for para rellenar el flipbook

            for($i=0; $i<$total; $i++){

                ?>

            

            <div style="background-image:url(<?php echo $path.$list[$i];?>)"></div>

            <?php  } ?>

        </div>

    </div>

</div>

 
 
<script type="text/javascript">

 
function loadApp() {

 
    // Create the flipbook

 
    $('.flipbook').turn({

            // Width

 
            width:922,

            

            // Height

 
            height:600,

 
            // Elevation

 
            elevation: 50,

            

            // Enable gradients

 
            gradients: true,

            

            // Auto center this flipbook

 
            autoCenter: true

 
    });

}

 
// Load the HTML4 version if there's not CSS transform

 
yepnope({

    test : Modernizr.csstransforms,

    yep: ['../../lib/turn.js'],

    nope: ['../../lib/turn.html4.min.js'],

    both: ['css/basic.css'],

    complete: loadApp

});

 
</script>

 
</body>

</html>