Autor Tema: Efecto caratulas aparecer y desvanecer (Leído 3474 veces)

kikopan · « **en:** 25 de Diciembre de 2011, 10:37:27 pm »

Hola mi gente hoy traigo este efecto desvanecer y aparecer para las imágenes de la web, sobre carátulas u otras.

Paso con los códigos y luego donde deben ubicarlo...

Para el efecto aparecer al pasar el cursor en todas las imágenes de la web:

Código: [Seleccionar]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/>
{literal}<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>{/literal}

Para el efecto desvanecer al pasar el cursor en todas las imágenes de la web:

Código: [Seleccionar]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/>
{literal}<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 1.0);
$('img').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>{/literal}

Para el efecto aparecer al pasar el cursor en las imágenes escogidas:

Código: [Seleccionar]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/>
{literal}<script type='text/javascript'>
$(document).ready(function() {
$('.blImagjtef').fadeTo('slow', 0.5);
$('.blImagjtef').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>{/literal}

Para el efecto desvanecer al pasar el cursor en las imágenes escogidas:

Código: [Seleccionar]

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"/>
{literal}<script type='text/javascript'>
$(document).ready(function() {
$('.blImaggjtef').fadeTo('slow', 1.0);
$('.blImaggjtef').hover(function() {
$(this).fadeTo('slow', 0.5);
}, function() {
$(this).fadeTo('slow', 1.0);
});
});
</script>{/literal}

Escogen la que quieran y van a Temas/default/templates/sections/head.tpl
y buscan

Código: [Seleccionar]

<!--</hd>-->

justo debajo pegan el código que escogieron, pueden utilizar los dos códigos pero claro
para imágenes diferentes.

Luego a las imágenes deben agregarle el class

Código: [Seleccionar]

<img class="blImagjtef" src="URL DE LA IMAGEN"/>

<img class="blImaggjtef" src="URL DE LA IMAGEN"/>

El primero es para aparecer el otro efecto desvanecer, en el propio head.tpl encuentran las carátulas de estrenos, en el home.tpl las de abajo y en buscar.tpl igual.

Ejemplo en mi web, feliz navidad y espero les guste.

Ska.- · « **Respuesta #1 en:** 25 de Diciembre de 2011, 10:59:38 pm »

Muy bueno lo implementare en el proximo skin que posteare

+1

azecktR12 · « **Respuesta #2 en:** 25 de Diciembre de 2011, 11:03:33 pm »

es como un efecto over no? si es haci con CSS se puede y mas facil.

fabriccio · « **Respuesta #3 en:** 26 de Diciembre de 2011, 12:02:23 am »

me gusto, pero creo que lo implementare alrevez

CarlosLP0 · « **Respuesta #4 en:** 26 de Diciembre de 2011, 05:05:25 am »

Cita de: fabriccio en 26 de Diciembre de 2011, 12:02:23 am

me gusto, pero creo que lo implementare alrevez

Si estaria bueno implementarlo al revez,, que esten desvanecidas y que al pasar mouse aparescan xD

kikopan · « **Respuesta #5 en:** 26 de Diciembre de 2011, 06:18:24 am »

Cita de: azecktR12 en 25 de Diciembre de 2011, 11:03:33 pm

es como un efecto over no? si es haci con CSS se puede y mas facil.

Ok, dime como para sacar el script

CarlosLP0 · « **Respuesta #6 en:** 26 de Diciembre de 2011, 07:04:11 am »

Cita de: kikopan en 26 de Diciembre de 2011, 06:18:24 am

Ok, dime como para sacar el script

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

kikopan · « **Respuesta #7 en:** 26 de Diciembre de 2011, 08:10:36 am »

Cita de: Green Six en 26 de Diciembre de 2011, 07:04:11 am

http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/

está bueno, pero mejor de como implementarlo

laren · « **Respuesta #8 en:** 26 de Diciembre de 2011, 11:55:10 am »

Gracias por lo sugerencia

fabriccio · « **Respuesta #9 en:** 27 de Diciembre de 2011, 04:52:23 pm »

listo, ya lo implemente alrevez: http://www.tuspelis.net/

kikopan · « **Respuesta #10 en:** 28 de Diciembre de 2011, 05:31:31 am »

Cita de: fabriccio en 27 de Diciembre de 2011, 04:52:23 pm

listo, ya lo implemente alrevez: http://www.tuspelis.net/

ahí está

, si quieres que los títulos de las películas no te descuadren las caratulas para abajo puedes editar en el home.tpl y buscar.tpl esto

Código: [Seleccionar]

{$m.p_titulo|escape}">{$m.p_titulo|escape|substr:0:15}</a></div>

donde 0:15 tienes otra cantidad

yeinier · « **Respuesta #11 en:** 07 de Enero de 2012, 01:16:22 pm »

hola una duda es que esta parte no la entiendo y no se que hacer porque intruduje el codigo de arriva el primero y no note cambio

Citar

<img class="blImagjtef" src="URL DE LA IMAGEN"/>

<img class="blImaggjtef" src="URL DE LA IMAGEN"/>

www.solopost.es

kikopan · « **Respuesta #12 en:** 07 de Enero de 2012, 02:33:24 pm »

Cita de: yeinier en 07 de Enero de 2012, 01:16:22 pm

hola una duda es que esta parte no la entiendo y no se que hacer porque intruduje el codigo de arriva el primero y no note cambio

www.solopost.es

en home.tpl busca

Código: [Seleccionar]

<img src="{$msConfig.datos.w_url}/files/uploads/{$m.p_id}.jpg"

y entre <img--aquí--src agrega esto class="blImagjtef"
resultado:

Código: [Seleccionar]

<img class="blImagjtef" src="{$msConfig.datos.w_url}/files/uploads/{$m.p_id}.jpg"

en buscar.tpl haces lo mismo "esto es para las caratulas de abajo"

Luego en head.tpl "esto para las de estreno arriba"

Código: [Seleccionar]

<img src="{$msConfig.datos.w_url}/files/uploads/{$e.p_id}.jpg" alt="{$e.p_titulo}"/>

haces lo mismo de arriba.

el blImagjtef y blImaggjtef crean diferentes efectos, vas probando...

Henry00jj95 · « **Respuesta #13 en:** 15 de Junio de 2014, 05:26:04 am »

no veo cambio $:-\$ jajaja lo seguire intentando :3

universogame · « **Respuesta #14 en:** 18 de Junio de 2014, 05:18:22 am »

Muy bueno compañero.

Asunto / Iniciado por	Respuestas	Último mensaje
MOD - Efecto Hover Video en Caratulas. Iniciado por Linuxpro « 1 2 » MODs Terminados	24 Respuestas 3929 Vistas	07 de Enero de 2013, 01:59:45 pm por Rafii Dj
[Mod] seccion Lista de peliculas con efecto zoom a caratulas Iniciado por movie « 1 2 » MODs Terminados	24 Respuestas 3488 Vistas	05 de Mayo de 2013, 07:55:39 pm por pipelilye
como pocisionar mi pagina web y aparecer en los resultados de busqueda Iniciado por jcc Posicionamiento Web	5 Respuestas 262 Vistas	02 de Septiembre de 2013, 11:55:23 am por teury
sigo sin aparecer en google Iniciado por jcc Posicionamiento Web	5 Respuestas 265 Vistas	15 de Septiembre de 2013, 07:51:51 pm por jackemathe
ayuda con desaparecer o aparecer un div tras x segundos Iniciado por Robin Soporte	3 Respuestas 2547 Vistas	10 de Diciembre de 2014, 05:04:25 pm por Robin

Marcofbb Noticias y ArtÃculos Webmasters