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>
<!--[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>
<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>