Soporte » Diseño – Temas y plantillas » Condiconal en CSS

  • ResueltoModerador almendron

    (@almendron)


    En la hoja de estilos del tema que uso está definida la propiedad «opacity» para las imágenes con enlace. El efecto está bien cuando tienes la miniatura y pasa el ratón por encima pero no me gusta nada en las imágenes grandes. Como uso thickbox, las grandes también salen con enlace y por tanto se les aplica la mencionada propiedad.
    A lo que voy. ¿Cómo puedo poner un condicional dependiendo del tamaño de la imagen?

    IF anchura imagen es mayor de 300 px ENTONCES
    opacity = 1
    ELSE
    opacity= 0.85
    FIN

    ¿Cómo puedo hacer esto en la hoja de estilos?

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • Moderador Rafa Poveda

    (@bi0xid)

    Me temo que sólo con CSS no puedes hacer algo como eso.
    Tendrás que utilizar JavaScript. Puedes utilizar algo como esto como ejemplo:

    $(window).load(function () {
        var image = $('.imagen img');
        if (image.width() > 300) {
            $('.imagen').css('opacity','1');
        }
    });

    Tienes el hilo del que lo he sacado aquí.

    Un saludo.

    Moderador almendron

    (@almendron)

    Gracias Rafa. Tomo nota del enlace y veré qué hago al final.
    Un saludo.

    Moderador LGrusin

    (@lgrusin)

    Debe haber alguna clase en el CSS que identifique la imagen grande. Si es así puedes modificar su valor.

    Ejemplo:
    a img.size-large {
    opacity = 1;
    }

    Un saludo

    • Esta respuesta fue modificada hace 7 años, 6 meses por LGrusin.
    Moderador Rafa Poveda

    (@bi0xid)

    Es una solución genial y mucho más sencilla. No se me había ocurrido, me he ido directamente a lo difícil :P.

    Moderador almendron

    (@almendron)

    Al final me he quedado con la más fácil:
    a img#TB_Image {opacity:1; }
    La puedo identificar de esta forma porque uso el thickbox que viene con Worpress y solo me interesa esa propiedad a 1 cuando se abre en grande desde una miniatura.
    Lo que ha puesto LGrusin me lo apunto porque también la voy a aplicar aunque no suelo poner imágenes grandes. Lo normal es que ponga miniaturas y que luego se puedan ver en grande.
    En cuanto a la solución aportada por Rafa, también es interesante porque puedes controlar el tamaño exacto de la imagen a la que aplicarle la propiedad.
    Gracias de nuevo a los dos.

    Moderador LGrusin

    (@lgrusin)

    Bueno, suele ocurrir, me pasa con frecuencia en el foro, hay dias que se va uno por las ramas…

    Me recuerda cuando desarmaba un aparato electrónico en busca de una avería y resulta que sólo había saltado el fusible… 🙂

    Un saludo

Viendo 6 respuestas - de la 1 a la 6 (de un total de 6)
  • El debate ‘Condiconal en CSS’ está cerrado a nuevas respuestas.