Jak udělat rollovers s jQuery

Hlavní stránka > Jak > Jak si rollovers s jQuery

Jak udělat rollovers s jQuery

24.května 2008 Subdodavatelské

Našel jsem tutorial na Atlanta Jones . Přečti si to, stojí to za to. Zde je příklad, který pracuje s tématem Prodlení WordPress a kategorie Ikony plugin s jeho Widget.

1. Vytvořte prázdný soubor s názvem rollover.js v kořenovém adresáři vašeho tématu složky.

2. Zkopírujte a vložte tento kód JavaScript v rollover.js:

  jQuery (funkce ($) (
     $ (Dokument). Ready (function () (
         / / Příspěvky
         $ ("# Content h2> img"). Each (function () (
             rollsrc = $ (this). attr ("src");
             rollON = rollsrc.replace (/. png $ / gi, "_over.png");
             $ ("<img>"). Attr ("src", rollON);
         ));

         $ ("# Content h2>"). Mouseover (function () (
             imgsrc = $ (this). dětmi ("img"). attr ("src");
             utkání = imgsrc.match (/ _over /);
             if (! utkání) (
                 imgsrcON = imgsrc.replace (/. png $ / gi, "_over.png");
                 $ (This). Dětmi ("img"). Attr ("src", imgsrcON);
             )
         ));

         $ ("# Content h2>"). Mouseout (function () (
             $ (This). Dětmi ("img"). Attr ("src", imgsrc);
         ));

         / / Sidebar
         $ ("Li.cat-bod>"). Mouseover (function () (
             imgsrc = $ (this). dětmi ("img"). attr ("src");
             utkání = imgsrc.match (/ _over /);
             if (! utkání) (
                 imgsrcON = imgsrc.replace (/. png $ / gi, "_over.png");
                 $ (This). Dětmi ("img"). Attr ("src", imgsrcON);
             )
         ));

         $ ("Li.cat-bod>"). Mouseout (function () (
             $ (This). Dětmi ("img"). Attr ("src", imgsrc);
         ));
     ));
 ));

Otevřete soubor functions.php své téma, zkopírujte a vložte tento na začátku:

  wp_enqueue_script ('jquery');
 wp_enqueue_script ('caticons-rolovací', get_bloginfo ('template_directory').
                                        '/ Rollover.js');

a uložte změny.

Skript používá obrázky, které končí _over.png pro převrácení obrazu. Všimněte si, že můžete snadno změnit. PNG rozšíření. Gif nebo. Jpg ve skriptu, pokud chcete. Pokud chcete více informací nebo jen pochopit, jak to funguje, přečtěte si tutorial. Zde jsou obrázky Použil jsem to vyzkoušet:

image 5 How to make rollovers with jQuery

Kromě toho, že záleží na struktuře CSS vašeho index.php a sidebar.php či widget. Myslím si, že bude pracovat pro widget, jak to je, ale pokud změníte téma, budete zřejmě muset změnit i řádky, které obsahují '# content h2>' a '# content h2> img'. Pokud tomu tak je, doporučuji vám experimentovat s pomocí Firebug , velmi dobrý plugin pro Firefox, které vám pomohou najít přesné 'CSS sekvence'. Zde je, jak už jsem udělal najít '# content h2>' a '# content h2> img':

1. Ve Firefoxu, aktivujte Firebug pak klikněte na Inspect
2. Klikněte na ikonu kategorii
3. Podívejte se na řádek CSS

Klikněte pro zvětšení

Pokud jste tento post těšil, ujistěte se, že se přihlásíte na můj RSS kanál !

Komentáře (11) Zpětné odkazy (0) Trackback

Chris
09.12.2008 v 21:59 | # 1
Odpovědět | Citace
Velká plugin člověk!
Nicméně jsem si jeden js chyba v admin.
jQuery ("div # Slider1"). codaSlider není funkce
(Bez názvu) () category_icons-li ... (linka 2)
e (Object originalEvent = Event zatížení type = zatížení) jquery.js (řádek 11)
e () jquery.js (řádek 11)
[Break na tuto chybu] jQuery ("div # Slider1"). CodaSlider ();
Je to z panel.js souboru category_icons-links-
Nějaké nápady?
Sub
07.01.2009 v 15:26 | # 2
Odpovědět | Citace
Díky. Už jste se snažil reupload poslední verzi pluginu?
Michi
26.února 2009 v 11:39 | # 3
Odpovědět | Citace
Nejprve Velice vám děkuji za tento skvělý plugin!
Snažila jsem se převrácení možné pomocí vašeho řešení s jQuery, ale nějak zmizí ikony na mouseover a nejsou nahrazeny _over.png ikony. Na Mouseout původní tlačítky kategorie nevracej ....
Mohl byste možná mi směr, nebo náznak, jak bych mohl tento problém vyřešit? Jakýkoliv pomoci by výrazně být ocenil!
Děkuji vám moc předem
Sub
03.03.2009 v 20:42 | # 4
Odpovědět | Citace
@ Michi
Ahoj, a děkuji vám za pomocí mého plugin.
1: Jste si jisti, ikony jsou ve stejné složky jako originály, nebo mohou být zobrazeny?
2: zkuste pracovat s Firebug najít pořadí CSS, jako jsem to udělal v tutoriálu.
Richard
24.března 2009 v 07:33 | # 5
Odpovědět | Citace
Chris
Měl jsem stejný js chybu jQuery ("div # Slider1"). CodaSlider ();
od panel.js souboru category_icons-links-
Zjistil jsem, že
wp_enqueue_script ('caticons-coda', '/ wp-content/plugins/category-icons/js/coda-slider.1.1.1.js');
linka v category_icons.php byl zakomentovaný, ne jistý proč.
Poté, co jsem odstranil / / chyba odešel
de-aktivovat - Úpravy - re-aktivaci
Vše se zdá, že funguje teď.
Rád bych věděl, proč to bylo komentováno v první řadě. !
Richard
24.března 2009 v 08:26 | # 6
Odpovědět | Citace
Re: chyba js jQuery ("div # Slider1"). CodaSlider ();
Po podíval na http://www.ndoherty.com/blog/category/coda-slider
Jen jsem zjistil, že to může mít pouze co do činění s informační panel ..
Funkce bm_caticons_display_infos_panel
ještě / / bm_caticons_display_infos_panel (); bylo komentováno jako dobře,
tak je funkce potřebná?
ok jsem odstranil funkci, a zakomentovaný jak:
/ / Wp_enqueue_script ('caticons-coda', '/ wp-content/plugins/category-icons/js/coda-slider.1.1.1.js');
a
/ / Wp_enqueue_script ('caticons-links-panel', '/ wp-content/plugins/category-icons/js/category_icons-links-panels.js');
vše se zdá být činnost teď .. a bez chyb, a trochu méně nad hlavou
Paruka
02.10.2009 v 12:34 | # 7
Odpovědět | Citace
Dobrý den, děkuji za čas a úsilí, které jste do této nádherné plugin.
Doufám, že mi můžeš pomoci. Když jsem hover ikony nic se neděje. To by mohlo znamenat něco tak kde začít.
Chtěl bych ukázat, rozšířené verzi stejnou ikonu, kdy se vznáší.
Ne vznášení: show photo.png
Vznášení: show photo_over.png
1. Ikony jsou ve stejné složce. wp-content/uploads/2009/09
volal photo.png (pro malou ikonu) & photo_over.png (pro normální ikonu)
Nahrál jsem ikony v nastavení panelu plugin.
2. S Firebug jsem našel: id = "caticons-3"> h2> ul> li>> img
V mém rollover.js souboru jsem změnil ID # caticons-3 h2> img a # caticons-3 h2>
li.cat-bod> stále stejná i když i to má nová caticons-3 id. Ale jak to id není použit v rollover.js souboru jsem se nic nezmění.
My rollover.js soubor je v JS složce mé téma složku. Změnil jsem funkci například takto:
'/ Wp-content/themes/MFW/js/rollover.js');
Můžete mi prosím dejte mi nějakou radu, kde začít hledat problém?
Thx za vaši pomoc!
Hel
07.04.2010 v 09:02 | # 8
Odpovědět | Citace
Dobrý den, to nefunguje:
Můj kód je:
div class = "header">
Jaký je správný css-sekvence pro:
...
Dotazu (funkce ($) (
$ (Dokument). Ready (function () (
/ / Příspěvky
$ ("# Content h2> img"). Each (function () (
rollsrc = $ (this).
...
Hel
07.04.2010 v 09:05 | # 9
Odpovědět | Citace
Dobrý den, to nefunguje:
Můj kód je:
...
...
Jaký je správný css-sekvence pro:
...
Dotazu (funkce ($) (
$ (Dokument). Ready (function () (
/ / Příspěvky
$ ("# Content h2> img"). Each (function () (
rollsrc = $ (this).
...
Hel
07.04.2010 v 09:06 | # 10
Odpovědět | Citace
Dobrý den, to nefunguje:
Můj kód je:
/ / Div class = "header"
/ / Ul style = "list-style-type: none; margin: 0px; padding-bottom: 0px; line-height: 0px;"
/ Ul
img "). each (function () (
rollsrc = $ (this).
...
Sub
11.04.2010 v 09:20 | # 11
Odpovědět | Citace
Nemůžu si pomoct, vám na to. To je specifické pro vaši šablonu a CSS. Doufám, že budete rozumět. Firebug je skvělý nástroj k nalezení 'css sekvence'.