Hola
Hacía tiempo que no pasaba por aquí..
He encontrado una aplicación que me resulta bastante curiosa ya que tiene efectos que no he visto hacer nunca http://www.planetinaction.com/textrenderer/Al hacer click con el ratón en la imagen, se produce un efecto que simula una explosión. El texto que se escribe en la casilla de debajo de la imagen se actualiza en el momento.. Y al margen de esto, y aquí viene mi consulta, es que al pulsar sobre la flechita de la esquina superior derecha de la imagen, esta se maximiza...
He intentado ver como consiguen el efecto pero me he perdido entre los muchos ficheros js que contiene la página y quizá alguno de vosotros sepa como se hace para que se maximize la imagen.
¿alguien puede ayudarme?
Un saludo
Y parece que lo que hacen las dos últimas funciones es simplemente jugar con la visibilidad de ambos contenedores, incluso diría que solo con la de la ventana mayor. De hecho, si sacas el código fuente de la página con el contenedor maximizado y con el contenedor minimizado, el código es el mismo... Ergo son la misma página.
¿Me hago entender? .
Yo creo que en esta página tienes lo que necesitas, ahora solo te faltan un par de tardes entretenido.
Hola Polifemo
Te ha gustado ¿eh?
Lástima que el manual de la Api de Google Earth sea tan escueto en cuanto a ejemplos de lo que se puede hacer.. Seguro que se pueden hacer muchísimas cosas mas. Creo que ya hemos comentado alguna vez sobre lo poco claro y "raro" que resulta ese manual, al menos para mi.
Por cierto, muy interesante también la página con el codigo jquery para redimensionar el div
Bueno, creo que algo he conseguido a base de eliminar el código sobrante de la página que indicabas y dejando solo el efecto de maximizar el contenedor de la imagen
Un saludo y muchas gracias por tu ayuda
Ahí va (quizá le sobre algo, pero así funciona)
Code::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--http://www.csun.edu/~centergs/API/Ballona_HE_Review.htm-->
<html>
<head>
<title>PRUEBA MAXIMIZAR PLUGIN</title>
<meta name="author" content="Eric Meyers_EricCMeyers@yahoo.com">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="http://www.google.com/jsapi?key=**KEY**"></script>
<script type="text/javascript">
function addSampleUIHtml(html) {
document.getElementById('sample-ui').innerHTML += html;
}
var ge;
var fullScreenState = false;
var noFullScreenIcon = null;
var fullScreenIcon = null;
existingChild = null;
google.load("earth", "1");
google.load("maps", "2");
function init() {
var content = document.getElementById('content');
google.earth.createInstance('content', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getOptions().setScaleLegendVisibility(true);
ge.getOptions().setStatusBarVisibility(true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
createFullScreenIcon();
createNormalScreenIcon();
google.earth.addEventListener(ge.getWindow(), "click", handleMouseClick);
var mugu1 = ge.createLookAt('');
/* VIEW OF EARTH */
mugu1.set(33.9423, -118.2653,
60000, /* ALT */
ge.ALTITUDE_RELATIVE_TO_GROUND,
0, /* HEAD */
0, /* TILT */
40000 /* RANGE */
);
ge.getOptions().setFlyToSpeed(0.5);
ge.getView().setAbstractView(mugu1);
}
function failureCallback(errorCode) {
}
function handleMouseClick(event){
var INSET_PIXELS_X = document.getElementById("content").offsetWidth - event.getClientX();
var INSET_PIXELS_Y = event.getClientY();
if (INSET_PIXELS_X < 32){
if (INSET_PIXELS_Y < 32){ toggleFullScreen();}
}
}
function toggleFullScreen(){
if (fullScreenState == true) {makeNormalScreen();}
else {makeFullScreen();}
}
function makeFullScreen(){
var samplecontainer = document.getElementById('fullscreencontainer');
var container = document.getElementById('content');
container.style.left = 0;
container.style.top = 0;
container.style.width = samplecontainer.offsetWidth + 'px';
container.style.height = samplecontainer.offsetHeight + 'px';
fullScreenState = true;
noFullScreenIcon.setVisibility(fullScreenState);
fullScreenIcon.setVisibility(!fullScreenState);
}
function makeNormalScreen(){
var samplecontainer = document.getElementById('sizecontainer');
var container = document.getElementById('content');
container.style.left = samplecontainer.style.left;
container.style.top = samplecontainer.style.top;
container.style.width = samplecontainer.offsetWidth + 'px';
container.style.height = samplecontainer.offsetHeight + 'px';
fullScreenState = false;
noFullScreenIcon.setVisibility(fullScreenState);
fullScreenIcon.setVisibility(!fullScreenState);
}
function createFullScreenIcon() {
/* create an image for the screen overlay */
var icon = ge.createIcon('');
icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png');
/* create the screen overlay */
fullScreenIcon = ge.createScreenOverlay('');
fullScreenIcon.setDrawOrder(60);
fullScreenIcon.setIcon(icon);
/* anchor point in top left of icon. */
fullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
fullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
fullScreenIcon.getScreenXY().setX(1);
fullScreenIcon.getScreenXY().setY(1);
/* place icon in top left of screen. */
fullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
fullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
fullScreenIcon.getOverlayXY().setX(2);
fullScreenIcon.getOverlayXY().setY(4);
/* Set icon size. */
fullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
fullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
fullScreenIcon.getSize().setY(32);
fullScreenIcon.getSize().setX(32);
/* add the screen overlay to Earth */
ge.getFeatures().appendChild(fullScreenIcon);
}
function createNormalScreenIcon() {
/* create an image for the screen overlay */
var icon = ge.createIcon('');
icon.setHref('http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tonormal.png');
/* create the screen overlay */
noFullScreenIcon = ge.createScreenOverlay('');
noFullScreenIcon.setDrawOrder(62);
noFullScreenIcon.setIcon(icon);
/* anchor point in top left of icon. */
noFullScreenIcon.getScreenXY().setXUnits(ge.UNITS_FRACTION);
noFullScreenIcon.getScreenXY().setYUnits(ge.UNITS_FRACTION);
noFullScreenIcon.getScreenXY().setX(1);
noFullScreenIcon.getScreenXY().setY(1);
/* place icon in top right of screen. */
noFullScreenIcon.getOverlayXY().setXUnits(ge.UNITS_INSET_PIXELS);
noFullScreenIcon.getOverlayXY().setYUnits(ge.UNITS_INSET_PIXELS);
noFullScreenIcon.getOverlayXY().setX(2);
noFullScreenIcon.getOverlayXY().setY(4);
/* Set icon size. */
noFullScreenIcon.getSize().setXUnits(ge.UNITS_PIXELS);
noFullScreenIcon.getSize().setYUnits(ge.UNITS_PIXELS);
noFullScreenIcon.getSize().setY(32);
noFullScreenIcon.getSize().setX(32);
noFullScreenIcon.setVisibility(false);
/* add the screen overlay to Earth */
ge.getFeatures().appendChild(noFullScreenIcon);
}
function handleFullScreen(){
if (window.innerWidth == screen.width){
if (window.innerHeight > screen.height - 10){
/*this is likely caused by pressing F11 on the browser */
makeFullScreen();
}
else if (fullScreenState == true) { makeNormalScreen();}
}
else {makeNormalScreen();}
}
Google.setOnLoadCallback(init);
</script>
<style type="text/css">
.tool
{
Position:relative;
Left:350px;
}
.legend
{
Position:relative;
Left:30px;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000 onresize="handleFullScreen();">
<font color="#000000" size=+2 face="corbel"><b>Pulsando en el icono de la esquina superior derecha la imagen se maximiza</b></font>
<br>
<div class="tool">
<font color="#000000" size=-1><i>Click on the <img src="http://earth-api-samples.googlecode.com/svn/trunk/external/dinther_fullscreen_tofull.png"/> to toggle full browser mode or press F11 for full screen.</i></font>
</div>
<div style="clear: both;"></div>
<div id="fullscreencontainer" style="position: absolute; width: 98.5%; height: 98%;"></div>
<div id="sizecontainer" style="position: absolute; width: 748px; height: 500px;"></div>
<div id="content" style="position: absolute; border: 5px solid #585858; width: 748px; height: 500px;"></div>
</body>
</html>
Por cierto, veo con agrado que últimamente contamos con varios miembros colaborando en el foro con asuntos técnicos... A ver si tenemos suerte y conseguimos crear una comunidad estable.
Puede publicar nuevos temas en este foro No puede responder a temas en este foro No puede editar sus mensajes en este foro No puede borrar sus mensajes en este foro No puede votar en encuestas en este foro No Puedes adjuntar archivos en este foro Tu puedes descargar archivos en este foro
Compartir:
RSS - Ultimos Mensajes
Últimas Fotos del Foro
.
