Buenas, yo sigo con el tema pues aún no lo he solucionado, y cuanto más hago menos entiendo.
Vuelvo a exponer el tema: controlo el click a una imagen a través de jquery. A partir de ahí, quiero visualizar una capa transparente, que ocupe toda la pantalla, con un pase de fotos.
Como en php no ha habido manera, lo he intentado con javascript, document.write, pero no consigo hacer el fondo transparente, imagino que es porqué se trata de un documento nuevo.
El código es el siguiente:
Código Javascript
:
Ver original$(".wowFoto").click(function() {
var data = [];
$.each($('.wowFoto'), function () {
data.push(this.src);
});
pase(data, ruta");
})
La función pase es esta:
Código Javascript
:
Ver originalfunction pase(fotos, ruta) {
document.write("<html");
document.write("<head>");
document.write("<link rel='stylesheet' href='" + ruta + "css/estils.css' type='text/css' media='all' />");
document.write("<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->");
document.write("<link rel='stylesheet' type='text/css' href='" + ruta + "includes/engineWow/style.css'/>");
document.write("<script type='text/javascript' src='" + ruta + "includes/engineWow/jquery.js'></script>");
document.write("<!-- End WOWSlider.com HEAD section -->");
document.write("</head>");
document.write("<body id='passe'>");
document.write("<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->");
document.write("<div id='wowslider-container1'>");
document.write("<div class='ws_images'>");
document.write("<ul>");
for (i=0; i<fotos.length; i++) {
document.write("<li><img src=" + fotos[i] + " alt='' title='' id='wows1_" + i + "'/></li>");
}
document.write("</ul>");
document.write("</div>");
document.write("<div class='ws_bullets'>");
document.write("<div>");
for (i=0; i<fotos.length; i++) {
document.write("<a href='#'>" + i + "</a>'");
}
document.write("</div>");
document.write("</div>");
document.write("<span class='wsl'><a href='http://wowslider.com/vu'>image carousel</a> by WOWSlider.com v7.2</span>");
document.write("<div class='ws_shadow'></div>")
document.write("</div>");
document.write("<script type='text/javascript' src='" + ruta + "includes/engineWow/wowslider.js'></script>");
document.write("<script type='text/javascript' src='" + ruta + "includes/engineWow/script.js'></script>");
document.write("<!-- End WOWSlider.com BODY section -->");
document.write("</div>");
document.write("</body>");
document.write("</head>");
document.write("</html>");
}
He leído por Internet que no es una buena práctica el uso de document.write, pero no hay manera de conseguir lo mismo en php. A continuación muestro el código por si alguien ve lo que estoy haciendo:
Código Javascript
:
Ver original$(".wowFoto").click(function() {
var data = [];
$.each($('.wowFoto'), function () {
data.push(this.src);
});
$.post("<?php echo URL.'includes/inc_passe.php'?>",{prmFotos:{fotos: data}}, function(data){$('.wowFoto').html(data);})
})
Código PHP:
Ver original<?php
include "inc_config.php";
$fotos = $_POST["prmFotos"]['fotos'];
$fotos[0] = URL_HS."500190_001053_foto_1_879551311_20141021170321.jpg";
$fotos[1] = URL_HS."500190_001053_foto_2_879551311_20141021170321.jpg";
$fotos[2] = URL_HS."500190_001053_foto_3_879551311_20141021170321.jpg";
$fotos[3] = URL_HS."500190_001053_foto_4_879551311_20141021170321.jpg";
$fotos[4] = URL_HS."500190_001053_foto_5_879551311_20141021170321.jpg";
$fotos[5] = URL_HS."500190_001053_foto_6_879551311_20141021170321.jpg";
?>
<link rel="stylesheet" href="<?php echo URL.'css/estils.css'?>" type="text/css" media="all" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="<?php echo URL.'includes/engineWow/style.css'?>" />
<script type="text/javascript" src="<?php echo URL.'includes/engineWow/jquery.js'?>"></script>
<!-- End WOWSlider.com HEAD section -->
<div id="passe">
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<?php for ($i=0; $i<count($fotos); $i++) { echo "<li><img src=".$fotos[$i]." alt='' title='' id='wows1_".$i."'/></li>";
} ?>
</ul>
</div>
<div class="ws_bullets">
<div>
<?php for ($i=0; $i<count($fotos); $i++) { echo "<a href='#'>".$i."</a>";
} ?>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com/vu">image carousel</a> by WOWSlider.com v7.2</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="<?php echo URL.'includes/engineWow/wowslider.js'?>"></script>
<script type="text/javascript" src="<?php echo URL.'includes/engineWow/script.js'?>"></script>
<!-- End WOWSlider.com BODY section -->
</div>
Aquí me pasan dos cosas y no encuentro como resolverlo:
- no hay manera de leer los datos del array, por esto lo cargo para poder hacer pruebas.
- el fondo de la capa (div id=pase) debería de ser transparente y me sale de color gris
Código CSS:
Ver original#passe{background-color:rgba(20,0,0,0.4);width:100%;height:100%;position:fixed;top:0px;left:0px;}
Si alguien puede ayudarme.
Gracias