Hoverbox Image Gallery

[LuisaJava]

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

[Mikmoro]

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.

[LuisaJava]

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

[Urdaris_Nox]

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.

[Mikmoro]

Iniciado por LuisaJava

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?

[Urdaris_Nox]

Iniciado por Mikmoro

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.

[Mikmoro]

Bueno, me remito a esto:

Iniciado por LuisaJava

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:

<a href="#"><img src="img/photo01.jpg" alt="description" /><img src="img/photo01.jpg" alt="description" class="preview" /></a>

[arthpix]

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.

[LuisaJava]

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

[Mikmoro]

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.

[arthpix]

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.