¿Cómo hacer rollovers con jQuery
He encontrado un tutorial sobre Atlanta Jones . Léalo, vale la pena. He aquí un ejemplo que funciona con el tema por defecto de WordPress y el plugin Categoría iconos con su widget.
1. Crear un archivo vacío denominado rollover.js en la raíz de su carpeta de temas.
2. Copia y pega el código Javascript en rollover.js:
jQuery (función ($) ( $ (Document). Ready (function () ( / / Mensajes $ ("# Content h2> img"). Cada uno (function () ( rollsrc = $ (this). Attr ("src"); RollOn rollsrc.replace = (/. png $ / gi, "_over.png"); $ ("<img>"). Attr ("src", RollOn); )); $ ("# Content h2> a"). Mouseover (function () ( imgsrc = $ (this). niños ("img"). Attr ("src"); = Partidos imgsrc.match (/ _over /); if (! coincidencias) ( imgsrcON imgsrc.replace = (/. png $ / gi, "_over.png"); $ (Este). Niños ("img"). Attr ("src", imgsrcON); ) )); $ ("# Content h2> a"). Mouseout (function () ( $ (Este). Niños ("img"). Attr ("src", imgsrc); )); / / La barra lateral $ ("> Li.cat del tema a"). Mouseover (function () ( imgsrc = $ (this). niños ("img"). Attr ("src"); = Partidos imgsrc.match (/ _over /); if (! coincidencias) ( imgsrcON imgsrc.replace = (/. png $ / gi, "_over.png"); $ (Este). Niños ("img"). Attr ("src", imgsrcON); ) )); $ ("> Li.cat del tema a"). Mouseout (function () ( $ (Este). Niños ("img"). Attr ("src", imgsrc); )); )); ));
Abra el archivo functions.php de tu tema, a continuación, copia y pega esto al principio:
wp_enqueue_script ('jQuery'); wp_enqueue_script ('caticons-vuelco, get_bloginfo (' template_directory »). '/ Rollover.js');
y guardar los cambios.
La secuencia de comandos utiliza imágenes que terminan con _over.png para las imágenes rollover. Tenga en cuenta que puede cambiar fácilmente la extensión png. A. Gif o jpg en el guión., Si lo desea. Si desea más información, o simplemente entender cómo funciona, lea el tutorial. Aquí están las imágenes que he usado para probarlo:
Por otra parte, depende de la estructura CSS de tu index.php y sidebar.php o el widget. Creo que va a trabajar para el widget que sea, pero si se cambia el tema, probablemente tendrá que cambiar también las líneas que contienen "# content h2> un contenido 'y' # h2 img> '. Si este es el caso, te recomiendo experimentar con la ayuda de Firebug , un plugin muy buena para Firefox que te ayudará a encontrar el "CSS secuencia exacta. Así es como he hecho para encontrar '# content h2> un contenido' y '# h2> img:
1. En Firefox, activar Firebug continuación, haga clic en Examinar
2. Haga clic en el icono de la categoría
3. Busque en la línea de CSS
Gran hombre plugin!
Sin embargo, he obtenido un error de js en admin.
jQuery ("div # Slider1"). codaSlider no es una función
(Sin nombre) () category_icons-li ... (línea 2)
e (originalEvent objeto de evento de carga = = tipo de carga) jquery.js (línea 11)
e () jquery.js (línea 11)
[Salto en este error] jQuery ("div # Slider1"). CodaSlider ();
Es de la category_icons archivo-links-panel.js
¿Alguna idea?
Gracias. ¿Ha tratado de reupload la última versión del plug-in?
En primer lugar muchas gracias por este gran plugin!
Traté de hacer rollover posible mediante el uso de su solución con jQuery, pero de alguna manera los iconos desaparecen en mouseover y no son reemplazados por los iconos _over.png. En mouseout los botones de categoría original no volver ....
¿Podría tal vez me dé una dirección o sugerencia, cómo podría solucionar este problema? Cualquier ayuda sería apreciada grandemente!
Muchas gracias de antemano
Michi @
Hola, y gracias por usar mi plugin.
1: ¿estás seguro de los iconos se encuentran en las mismas carpetas que los originales o se puede mostrar?
2: tratar de trabajar con Firebug para encontrar la secuencia de CSS, como lo hice en el tutorial.
Chris
Tuve el mismo error js jQuery ("div # Slider1"). CodaSlider ();
de la category_icons archivo-links-panel.js
Me encontré con que
wp_enqueue_script ('caticons-coda', '/ wp-content/plugins/category-icons/js/coda-slider.1.1.1.js');
línea en category_icons.php fue comentada, sin saber por qué.
Después de retirar el / / el error se fue
desactivar - editar - volver a activar
Todo parece funcionar bien ahora.
Me gustaría saber por qué se comentó en el primer lugar. !
Re: jQuery error js ("div # Slider1"). CodaSlider ();
Tras haber analizado los http://www.ndoherty.com/blog/category/coda-slider
Me acabo de enterar de que sólo puede tener que ver con el panel de información ..
función bm_caticons_display_infos_panel
sin embargo, / / bm_caticons_display_infos_panel (); Se comentó también,
también lo es la función necesaria?
puede quité la función, y comentó a cabo tanto:
/ / Wp_enqueue_script ('caticons-coda', '/ wp-content/plugins/category-icons/js/coda-slider.1.1.1.js');
y
/ / Wp_enqueue_script ('caticons-links-panel', '/ wp-content/plugins/category-icons/js/category_icons-links-panels.js');
todo parece estar funcionando ahora .. y no hay errores, y un poco menos de sobrecarga
Hola, gracias por el tiempo y el esfuerzo que han dedicado a este maravilloso plugin.
Espero que puedas ayudarme. Cuando pasa el iconos nada sucede. Eso podría significar algo tan por dónde empezar.
Me gustaría mostrar una versión ampliada del mismo icono cuando se cierne.
No se cierne: photo.png muestran
Flotando: mostrar photo_over.png
1. Los iconos están en la misma carpeta. wp-content/uploads/2009/09
photo.png llamado (para el icono pequeño) y photo_over.png (por el icono normal)
He subido los iconos en el panel de configuración del plugin.
2. Con Firebug que encontré: id = "caticons-3"> h2> ul> li> una img>
En mi archivo rollover.js he cambiado el id # caticons-3 h2> img y # caticons-3 h2> un
> Li.cat un tema-sigue siendo la misma aunque esto también tiene el nuevo caticons id-3. Pero como este id no se utiliza en el archivo rollover.js no cambié nada.
Mi rollover.js archivo se encuentra en la carpeta js de mi carpeta de temas. He cambiado la función de este modo:
'/ Wp-content/themes/MFW/js/rollover.js');
¿Puedes por favor darme algunos consejos por dónde empezar a buscar el problema?
Thx por su ayuda!
Hola, no funciona:
Mi código es:
div class = "cabecera">
¿Cuál es el css derecha secuencia para:
...
Consulta (función ($) (
$ (Document). Ready (function () (
/ / Mensajes
$ ("# Content h2> img"). Cada uno (function () (
rollsrc = $ (this).
...
Hola, no funciona:
Mi código es:
...
...
¿Cuál es el css derecha secuencia para:
...
Consulta (función ($) (
$ (Document). Ready (function () (
/ / Mensajes
$ ("# Content h2> img"). Cada uno (function () (
rollsrc = $ (this).
...
Hola, no funciona:
Mi código es:
/ / Div class = "cabecera"
/ / Estilo ul = "list-style-type: none; margin: 0px; padding-bottom: 0px; line-height: 0px;"
/ Ul
img "). cada uno (function () (
rollsrc = $ (this).
...
No te puedo ayudar en eso. Esto es específico a su plantilla y CSS. Espero que lo entenderás. Firebug es una gran herramienta para encontrar la secuencia 'css'.