Foros del Web » Creando para Internet » CSS »

Hoverbox Image Gallery

Estas en el tema de Hoverbox Image Gallery en el foro de CSS en Foros del Web. Hola a todos Estoy intentando adaptar lo que pueden ver en esta página http://host.sonspring.com/hoverbox/ Para ello, utilizo este código Código PHP: <ul class="hoverbox" >            <?php  ...
  #1 (permalink)  
Antiguo 13/05/2009, 06:07
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 9 años, 7 meses
Puntos: 0
Pregunta Hoverbox Image Gallery

Hola a todos

Estoy intentando adaptar lo que pueden ver en esta página

http://host.sonspring.com/hoverbox/

Para ello, utilizo este código

Código PHP:
<ul class="hoverbox" >
     
    
<?php 

/*Mostramos los iconos de las categorías*/
foreach (HTML_CLIE::getMyCategories($myCliei) as $categoria ) {
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>";
echo 
$enlacecat;

}

?> 
    
</ul>
Ahora sólo me falta incluir la clase class="preview" dentro de la línea

Código PHP:
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>"
pero no hay forma de que me funcione. Lo he probado de mil maneras y no hay tu tía.

¿Podéis darme alguna idea?

Muchas gracias,
Luisa Javaloyes
  #2 (permalink)  
Antiguo 13/05/2009, 06:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoverbox Image Gallery

Estás en el foro de CSS, por lo que deberías poner el código HTML que te arroja el navegador una vez interpretado el PHP, no el código fuente PHP, así podríamos ver qué se genera mal y qué falla.
Por otro lado, tampoco sabemos si el CSS que estás usando es idéntico.

No obstante, en ese usa una hoja de estilo especial para IE mediante un comentario condicional, y este otro es casi igual pero sin hacks, por si te interesa mirarlo.
  #3 (permalink)  
Antiguo 13/05/2009, 13:11
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Hoverbox Image Gallery

Muchas gracias por tu respuesta.


Código:
.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}
Código HTML:
<ul class="hoverbox">
<li><a href="http://localhost/prueba/index.php?option=com_sobi2&amp;catid=13&amp;Itemid=56" ><img src="http://localhost/prueba/images/stories/c_001.png" alt="Imagen1" title="Imagen1" /></a></li>
<li><a href="http://localhost/prueba/index.php?option=com_sobi2&amp;catid=90&amp;Itemid=56" ><img src="http://localhost/prueba/images/stories/c_010_3.png" alt="Imagen2" title="Imagen2" /></a></li>
<li><a href="http://localhost/prueba/index.php?option=com_sobi2&amp;catid=104&amp;Itemid=56" ><img src="http://localhost/prueba/images/stories/c_010_2.png" alt="Imagen3" title="Imagen3" /></a></li>
<li><a href="http://localhost/prueba/index.php?option=com_sobi2&amp;catid=105&amp;Itemid=56" ><img src="http://localhost/prueba/images/stories/c_010_5.png" alt="Imagen4" title="Imagen4" /></a></li>
<li><a href="http://localhost/prueba/index.php?option=com_sobi2&amp;catid=115&amp;Itemid=56" ><img src="http://localhost/prueba/images/stories/c_010_1.png" alt="Imagen5" title="Imagen5" /></a></li>    
</ul> 

La cuestión es que en la línea

Código PHP:
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>"
hay que llamar a la clase preview (class="preview") y eso es lo que no me sale. No acierto a colocar la llamada a esa clase.


Saludos,
Luisa
  #4 (permalink)  
Antiguo 13/05/2009, 13:28
 
Fecha de Ingreso: mayo-2008
Mensajes: 103
Antigüedad: 9 años, 6 meses
Puntos: 14
Respuesta: Hoverbox Image Gallery

Hola Luisa;

Cuando queremos definir el comportamiento de un elemento al pasar el ratón por encima tenemos que usar el "HOVER" para concretar el estilo en este evento. Pero además, si se trata de una imagen, tenemos que concretar que es un HOVER y una IMG.

Código:
.hoverbox.preview:hover
{	
	position:relative;
}

.hoverbox.preview:hover img
{
	width:200px;
	height:200px;
}


<ul class="hoverbox">
<li><a href="#" class="preview" ><img src="imagencualquiera.jpg" alt="Imagen1" title="Imagen1" /></a></li>
<li><a href="#" class="preview" ><img src="imagencualquiera.jpg" alt="Imagen2" title="Imagen2" /></a></li>
<li><a href="#"  class="preview" ><img src="imagencualquiera.jpg" alt="Imagen3" title="Imagen3" /></a></li>
<li><a href="#"  class="preview" ><img src="imagencualquiera.jpg" alt="Imagen4" title="Imagen4" /></a></li>
<li><a href="#"  class="preview" ><img src="imagencualquiera.jpg" alt="Imagen5" title="Imagen5" /></a></li>
</ul>
Espero haberme explicado, un saludo.
  #5 (permalink)  
Antiguo 13/05/2009, 16:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoverbox Image Gallery

Cita:
Iniciado por LuisaJava Ver Mensaje
hay que llamar a la clase preview (class="preview") y eso es lo que no me sale. No acierto a colocar la llamada a esa clase.
Por lo que queda claro que no es un problema de CSS sino de PHP, ¿no?
  #6 (permalink)  
Antiguo 13/05/2009, 17:01
 
Fecha de Ingreso: mayo-2008
Mensajes: 103
Antigüedad: 9 años, 6 meses
Puntos: 14
Respuesta: Hoverbox Image Gallery

Cita:
Iniciado por Mikmoro Ver Mensaje
Por lo que queda claro que no es un problema de CSS sino de PHP, ¿no?
¿Definir un elemento como una clase CSS mediante PHP?

Yo entendí que no funcionaba, que fallaba el ponerle la clase.
  #7 (permalink)  
Antiguo 13/05/2009, 17:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoverbox Image Gallery

Bueno, me remito a esto:

Cita:
Iniciado por LuisaJava Ver Mensaje
La cuestión es que en la línea

Código PHP:
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>"
hay que llamar a la clase preview (class="preview") y eso es lo que no me sale. No acierto a colocar la llamada a esa clase.
Entiendo que no acierta a colocar en el bucle la llamada para que el HTML arroje la clase que desea, aunque a decir verdad la clase en el ejemplo está en la imagen, y no en el enlace:
Cita:
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>
  #8 (permalink)  
Antiguo 14/05/2009, 04:12
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Hoverbox Image Gallery

Debes definir la clase "preview" a la etiqueta <img /> como dice Milkmoro. Pero para eso debes de insertarlo en php en la linea que declara $categoria['icono']

Tienes una funcion getMyCategories() es ahi donde debes de insertar la clase.

Creo que sería más útil que tu tema estuviera en PHP.



O bueno, si no lo traslada un moderador, por que no posteas el codigo de la funcion getMyCategories() y de paso la declaración de la variable $myCliei para poder ayudarte mejor.
__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #9 (permalink)  
Antiguo 14/05/2009, 15:23
 
Fecha de Ingreso: abril-2008
Mensajes: 81
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Hoverbox Image Gallery

Hola, de nuevo.

Les pido disculpas si he tardado en contestar, pero he tenido un problema con el pc.



Bueno... no se si estoy en el buen camino o tal vez estoy desorientada.

Éste es el código original que he tomado como ejemplo. El ejemplo hay 20 imágenes (photo01.jpg-photo20.jpg), pero sólo incluyo una línea para mayor claridad

Código HTML:
<ul [COLOR="Red"]class="hoverbox"[/COLOR]>
<li>
<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description"[COLOR="Red"] class="preview"[/COLOR] /></a>
</li>
<li>
</ul> 

y lo que quiero hacer, es adaptarlo al bucle


Código PHP:
<ul [COLOR="Red"]class="hoverbox"[/COLOR] >
     
    
<?php 

/*Mostramos los iconos de las categorías*/
foreach (HTML_CLIE::getMyCategories($myCliei) as $categoria ) {
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>";
echo 
$enlacecat;

}

?> 
    
</ul>

... supongo que la línea en la que hay que colocar la llamada a la clase preview
es ésta:

Código PHP:
$enlacecat "<li><a href=\"".$categoria['href']."\" >".$ categoria ['icono']."</a></li>"
el problema es que no sé dónde ubicarla. He probado de distintos modos y no doy con la solución.



Gracias de nuevo,
Luisa
  #10 (permalink)  
Antiguo 14/05/2009, 16:07
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Hoverbox Image Gallery

Pero... ¿dónde llamas ahí a la etiqueta <img... />?

No lo entiendo. Te repito que como es evidente que es un problema de PHP deberías pasar tu consulta a ese foro o reportar para que lo muevan.
  #11 (permalink)  
Antiguo 15/05/2009, 23:29
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Hoverbox Image Gallery

LuisaJava: Efectivamente, es un problema de PHP y para resolverlo, necesitas insertar la clase preview en donde esta definiendo 4categoria['icono'], esa la estas definiendo (o declarando) en la función getMyCategories() Puesto que en la línea de código PHP que muestras no aparece la etiqueta <img />

Si preguntas en el foro de php te van a decir lo mismo. Postea la función para poder ayudarte.
__________________
Antes de hacer rabietas infórmate: Linux != Windows
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:36.