[SOLUCIONADO] enlazar a una imagen en html multipágina

[raul9975]

Hola, estoy haciendo una página web movil y para ello lo hago en HTML5 con jquery mobile.

Mi idea era hacer una página con miniaturas de las imágenes y que al pulsar en alguna de ellas te llevara a dicha imagen en grande que esta en otra página junto con las otras.

Lo estoy construyendo en un mismo HTML con multipáginas, el problema es que no puedo enlazar la miniatura con la imagen ya que solo me deja enlazar a la página donde estan las fotos grandes, no sé como podría enlazar la miniatura para que te llevase directamente a esa imagen y no a la página en general.

<a href="#soft"><img src="thumbs/005min.png"/></a>

(la página donde estan las fotos en grandes se llama soft)

<div id="fotosbig" data-role="content" >
<img id="005big" src="images/005big.jpg"/>

</div>

a la imagen grande le he dado un id, pero si enlazo a ella no me deja ya que sólo me deja enlazar a "#soft" que es la página en general y mi idea es que lleve el enlace especificamente a la imagen.

[PHPeros]

No entiendo... pues haz:

Código HTML:

<a href="thumbs/005min.png">
   <img src="thumbs/005min.png"/>
</a>
 

[raul9975]

eso tendría que hacer si quisiera que solo se viera la imagen grande. La cuestión es que en la página que quiero enlazar estan puestas todas las imágenes grandes y quiero que cuando se pulse en la miniatura de la otra, te lleve a esa grande pero en la página para despues poder seguir navegando por esta página.

Para que te hagas una idea son 2 páginas una con miniaturas y la otra con las imagenes en grande una detras de otra, de arriba hacia abajo. tu eliges una miniatura y te lleva a esa imagen despues sigues navegando por la página, es para que el usuario no tenga que pasar por todas las imágenes cada vez que entre, sino que pueda elegir un sitio en concreto.

[PHPeros]

Creo que para eso te vendría bien usar un lightbox, por no andar de sitio en sitio

Respecto a lo que dices, si la imagen pertenece a una página distinta tendrás que poner la URL completa + el hash (#) hacia dicho elemento.

[raul9975]

No conocía los "lightbox", he estado echando un vistazo y me parece una buena alternativa, gracias por tu consejo!

[NueveReinas]

A mí personalmente me gusta Fancybox, porque puedes poner de todo: imágenes, galería de imágenes, iframes, mapas de Google, vídeos de YouTube, eventos de AJAX...

Si no hay más dudas al respecto, por favor, marca el tema como solucionado.

[mbm150]

Hola,

como te han dicho, utilizar lightbox o algo por el estilo es una buena solución, pero para solucionar tu problema inicial, decirte que al estar siempre en la misma página no puedes usar el hash(, pero si usar una función (porque estas en la misma página), así que algo así te funcionaria:

Código Javascript:

function foto(id){
     setTimeout(function(){
          var p = $("#" + id).position().top;
          $(window).scrollTop(p);
     }, 500);
}
 

Y en los enlaces algo asi:

Código HTML:

<a href="#soft" onclick="foto(id de la foto)"><img src="thumbs/005min.png"/></a>
 

Cambiando el "id de la foto" por su id, evidentemente.

Saludos.