Flash sin flash.

[seltzer]

En este sitio, se utiliza AJAX de tal manera que parece hecho en flash.

christofwagner.com

Analizando bien los códigos(.js) se puede ver cómo va llamando a las páginas a través de links de una manera secreta. Ya que no aparecen las páginas sino dentro de una única página.
Supongo que la clave está en la parte relacionada con estas líneas en la página principal:

...onclick="openPortfolio('...')".....
....onclick="openPage('...')" class="sub"......

y donde corresponde en el script "javascripts/application.js":

function openPortfolio(section) {
if(!_opened) openUp();
_section = section;
var image = arguments[1] || 0;
var url = 'portfolio.php?image='+image+'&section='+section;
['portrait','story','lifestyle','reportage','still' ,'free','publikationen','biografie','referenzen',' kontakt'].each(function(e){
Element.removeClassName(e,'active');
});
Element.addClassName(section,'active');
new Ajax.Request(url);
}

function openPage(page) {
if(!_opened) openUp();
var real = page=='referenzen'?'biografie':page;
new Ajax.Request(real+'.php');
['portrait','story','lifestyle','reportage','still' ,'free','publikationen','biografie','referenzen',' kontakt'].each(function(e){
Element.removeClassName(e,'active');
});
Element.addClassName(page,'active');
}

Se desprende de estos códigos que si vamos a, por ejemplo:

christofwagner.com/kontakt.php
christofwagner.com/still.php
christofwagner.com/reportage.php

etc..

debería verse el contenido de dichas páginas, pero no es lo que sucede.
Por lo menos en mi caso aparece "Not Found".

¿Alguien tiene una idea de cuál es la forma de encontrar cada página?

Sería bueno analizarlo.
Gracias. Un saludo.

[stock]

mira, lo que pasa es que no existen esas paginas que tu supones, lo que sucede es que nadamas cambia la imagen de fondo, siempre con el mismo efecto

cuando pide la informacion con ajax, esto es lo que regresa

Código:

function updateImage() {
  if(_imageloader.complete && !_show) {
    $('content').innerHTML = '';
    $('info').innerHTML = '2/23';
    $('caption').innerHTML = 'tejo / portugal';
    $('main').style.backgroundImage = 'url(portfolios/lifestyle/lissbruecke.jpg)';
    Effect.Appear('arrow-left');
    Effect.Appear('arrow-right');
    _currentImage = 1;
    _nrOfImages = 23;
    clearInterval(_timer);
    _timer = null;
    _imageloader = null;
    reveal();
  }
}

_section = 'lifestyle';

var _imageloader = new Image();
_imageloader.src = 'portfolios/lifestyle/lissbruecke.jpg';

var _timer = setInterval(updateImage, 10);

hide();

dependiendo los parametros que le mandes, es la info que te regresara

have funnnnnnnn

[seltzer]

Gracias por responder Stock.

Es cierto, cambia el fondo, o una porción de la página, sucede que no entiendo entonces cómo es que funcionan estas partes y para qué están:

function openPortfolio(section) {
if(!_opened) openUp();
_section = section;
var image = arguments[1] || 0;
var url = 'portfolio.php?image='+image+'&section='+section;
['portrait','story','lifestyle','reportage','still' ,'free','publikationen','biografie','referenzen',' kontakt'].each(function(e){
Element.removeClassName(e,'active');
});
Element.addClassName(section,'active');
new Ajax.Request(url);
}

function openPage(page) {
if(!_opened) openUp();
var real = page=='referenzen'?'biografie':page;
new Ajax.Request(real+'.php');
['portrait','story','lifestyle','reportage','still' ,'free','publikationen','biografie','referenzen',' kontakt'].each(function(e){
Element.removeClassName(e,'active');
});
Element.addClassName(page,'active');
}

Se supone que están para llamar a las distintas páginas con la extensión .php.
Realmente no lo entiendo.

Gracias por la ayuda. Si alguien más lo entiende serìa útil saber cómo funciona.

[stock]

Iniciado por seltzer

...Se supone que están para llamar a las distintas páginas con la extensión .php...

pues supones mal lo que esta haciendo es unicamente llamar a

var url = 'portfolio.php?image='+image+'&section='+section;

la pagina portfolio.php, pasandole dos parametros, elnombre de la seccion y el numero de foto, esta pagina tomando estos dos parametros genera un script con la informacion donde esta hubicada la imagen que solucita le agrega los efectos correspondientes, el fade-in

have funnnnnnnn

[seltzer]

Bien, ahora entiendo, por ejemplo:

christofwagner.com/portfolio.php?image=0&section=lifestyle

de esta manera llama a cada imágen(image=0..., 1, 2, 3, etc...) en la carpeta de directorio correspondiente(section) dándole el efecto fadein(desde el archivo portfolio.php).

Menudo lío, entonces. Programar de esta manera es mucho más difícil que hacerlo con flash.

Debo seguirlo analizando y ver si Ajax es lo que verdaderamente estoy buscando para construir una web.

Te agradezco tu atención Stock.

[seltzer]

He tomado un poco de distancia de este ejemplo y al retomarlo me surge una duda. ¿De dónde es que saca este script 'info', 'caption' e incluso las imágenes(portfolios/lifestyle/lissbruecke.jpg, en este ejemplo)?. Son datos que tiene que extraer de alguna parte para luego mostrarlos en las páginas.

function updateImage() {
if(_imageloader.complete && !_show) {
$('content').innerHTML = '';
$('info').innerHTML = '2/23';
$('caption').innerHTML = 'tejo / portugal';
$('main').style.backgroundImage = 'url(portfolios/lifestyle/lissbruecke.jpg)';
Effect.Appear('arrow-left');
Effect.Appear('arrow-right');
_currentImage = 1;
_nrOfImages = 23;
clearInterval(_timer);
_timer = null;
_imageloader = null;
reveal();
}
}

_section = 'lifestyle';

var _imageloader = new Image();
_imageloader.src = 'portfolios/lifestyle/lissbruecke.jpg';

var _timer = setInterval(updateImage, 10);

hide();

Gracias por tanta paciencia.

[stock]

mira, en estas tres lineas lo unico que ahce es asignar a los respectivos DIVs la informacion que tiene que mostrar

Código:

$('info').innerHTML = '2/23';
$('caption').innerHTML = 'tejo / portugal';
$('main').style.backgroundImage = 'url(portfolios/lifestyle/lissbruecke.jpg)';

mira, el XHTML

Código:

<div id="main" style="display:none">
          <div id="info"> </div>
          <div id="caption"> </div>

          <div id="arrow-left" onclick="prevImage()"> </div>
          <div id="arrow-right" onclick="nextImage()"> </div>
          <div id="content"> </div>
          <div id="s1" style="position:absolute;background-color:#fff;top:0;left:0;width:888px;height:453px"> </div>
        </div>

con AJAX hace la peticion de esa informacion, el servidor le regresa el codigo que te puse arriba, luego ejecutando esa funcion recibida va a poner esa informacion, dejando come resultado algo como esto:

Código:

<div id="main" style="display:none;background-image:url('portfolios/lifestyle/lissbruecke.jpg');">
          <div id="info"> 2/23 </div>
          <div id="caption">tejo / portugal</div>

osea, en resumen lo unico que ahce es cambiar la informacion y ya

have funnnnnn

[seltzer]

Hola Stock gracias por responder.

Lo que dices es cierto, pero mi duda está en que no se ve exactamente de dónde sale ésa informacion:

'2/23'
'tejo / portugal'
'url(portfolios/lifestyle/lissbruecke.jpg)'

O sea, de dónde la extrae, si es que se trata de otro archivo o de algún script que yo no alcanzo a descubrir. Porque según se ve, cada imagen de la galería que pasa lleva su correspondiente info, caption e imágen con la carpeta de la cual proviene.

Gracias .

[stock]

well... eso si no te lo podria decir puede provenir de una base de datos, o puede provener de un TXT en algun lugar del servidor, o de un XML de configuracion.... realmente eso es irrelevante

have funnnnnnnnn