Miten saada rollovers kanssa jQuery
Olen löytänyt opetusohjelma Atlanta Jones . Lue, se on sen arvoista. Tässä on esimerkki siitä, että toimii Default teema WordPress ja luokkaan Ikoni ampua sen Widget.
1. Luo tyhjä tiedosto nimeltä rollover.js juureen teeman kansio.
2. Kopioi ja liitä tämä javascript koodi rollover.js:
jQuery (toiminto ($) ( $ (Document). Valmiit (function () ( / / Asettaa $ ("# Content h2> img). Kukin (function () ( rollsrc = $ (tämä). attr ("src"); rollON = rollsrc.replace (/. png $ / gi "_over.png"); $ ("<img>"). Attr ("src", rollON); )); $ ("# Content h2>"). Mouseover (function () ( imgsrc = $ (tämä). lapset (IMG). attr ("src"); ottelut = imgsrc.match (/ _over /); if (! ottelut) ( imgsrcON = imgsrc.replace (/. png $ / gi "_over.png"); $ (Tämä). Lapset (IMG). Attr ("src", imgsrcON); ) )); $ ("# Content h2>"). Mouseout (function () ( $ (Tämä). Lapset (IMG). Attr ("src", imgsrc); )); / / Sivupalkki $ ("Li.cat-erä>"). Mouseover (function () ( imgsrc = $ (tämä). lapset (IMG). attr ("src"); ottelut = imgsrc.match (/ _over /); if (! ottelut) ( imgsrcON = imgsrc.replace (/. png $ / gi "_over.png"); $ (Tämä). Lapset (IMG). Attr ("src", imgsrcON); ) )); $ ("Li.cat-erä>"). Mouseout (function () ( $ (Tämä). Lapset (IMG). Attr ("src", imgsrc); )); )); ));
Avaa tiedosto functions.php oman teeman, kopioi ja liitä tämä alussa:
wp_enqueue_script (jquery '); wp_enqueue_script (caticons-kaatuessa ", get_bloginfo (template_directory). "/ Rollover.js ');
ja tallenna muutokset.
Komentosarja käyttää kuvia päättyvä _over.png vuosituhannen vaihteessa kuvia. Huomaa, että voit helposti muuttaa. Png laajentamista. Gif tai. Jpg ja kirjoitus, jos haluat. Jos haluat lisätietoja tai vain ymmärrä, miten se toimii, lue opetusohjelma. Tässä on kuvia olen käyttänyt testata sitä:
Lisäksi se riippuu CSS rakennetta hakemisto.php ja sidebar.php tai vekotin. Mielestäni se toimi vekotin kuin se on, mutta jos muutat teeman, sinun täytyy luultavasti muuttaa myös rivit, jotka sisältävät "# content h2>" ja "# content h2> img. Jos näin käy, suosittelen teille kokeilla avulla Firebug erittäin hyvä plugin Firefox, joka auttaa sinua löytämään tarkka "CSS järjestys". Tässä on, miten olen tehnyt löytää "# content h2>" ja "# content h2> img":
1. Firefox, ota Firebug napsauttamalla sitten Tarkista
2. Napsauta luokka-kuvaketta
3. Katsokaa CSS linja
Great plugin mies!
Kuitenkin saan sellaisen js virhe admin.
jQuery ("div # Slider1"). codaSlider ei toimi
(Ei nimeä) () category_icons-li ... (rivi 2)
e (Object originalEvent = Tapahtuman kuorma type = kuorma) jquery.js (rivi 11)
e () jquery.js (rivi 11)
[Break tästä virheestä] jQuery ("div # Slider1"). CodaSlider ();
Se tiedostosta category_icons-links-panel.js
Onko ideoita?
Kiitos. Oletko yrittänyt reupload viimeisen version plugin?
Ensinnäkin kiitos paljon tästä suuri plugin!
Yritin tehdä rollover mahdollista käyttämällä ratkaisun jquery, mutta jotenkin kuvakkeet katoavat mouseover ja ei korvata _over.png kuvakkeet. On Mouseout alkuperäinen ryhmä painikkeet eivät tule takaisin ....
Voisitteko ehkä antaa minulle suunnan tai vihje, miten voisin ratkaista tämän ongelman? Jokin auttaa suuresti arvostaa!
Paljon kiitoksia etukäteen
@ Michi
Hei, ja kiitos että käytit minun plugin.
1: Oletko varma kuvakkeet ovat samat kansiot kuin alkuperäiset tai voidaan näyttää?
2: yritetään käsitellä Firebug löytää CSS järjestyksessä, kuten olen tehnyt opetusohjelma.
Chris
Minulla oli sama JS virhe jQuery ("div # Slider1"). CodaSlider ();
tiedostosta category_icons-links-panel.js
Huomasin, että
wp_enqueue_script (caticons-kooda "," / wp-content/plugins/category-icons/js/coda-slider.1.1.1.js ');
rivi category_icons.php kommentoitiin pois, ei ole varma miksi.
Kun olen poistanut / / virhe meni pois
de-aktivoida - muokkaa - aktivoida uudelleen
Kaikki tuntuu toimivan hyvin nyt.
Haluaisin tietää, miksi se oli kommentoinut esitetään ensin. !
Re: JS virhe jQuery ("div # Slider1"). CodaSlider ();
Tarkasteltuaan http://www.ndoherty.com/blog/category/coda-slider
Olen vain todennut, että se voi tehdä vain tiedot paneeli ..
toiminto bm_caticons_display_infos_panel
vielä / bm_caticons_display_infos_panel (); kommentoitiin myös,
niin on tehtävä tarvitaan?
ok poistin toiminnon ja kommentoi pois niin:
/ / Wp_enqueue_script (caticons-kooda "," / wp-content/plugins/category-icons/js/coda-slider.1.1.1.js ');
ja
/ / Wp_enqueue_script (caticons-linkit-paneeli "," / wp-content/plugins/category-icons/js/category_icons-links-panels.js ');
kaikki tuntuu toimivan nyt .. eikä virheitä, ja vähän vähemmän yleiskustannukset
Hei, kiitos aikaa ja vaivaa olet tehnyt tämän ihanan plugin.
Toivon, että voitte auttaa minua. Kun olen häilyä ikoni mitään ei tapahdu. Tämä voi tarkoittaa mitä tahansa niin mistä aloittaa.
Haluan näyttää laajentuneen version sama kuvake kun hiiri.
Ei leijuu: Näytä photo.png
Leijumaan: Näytä photo_over.png
1. Kuvakkeet ovat samassa kansiossa. wp-content/uploads/2009/09
kehotti photo.png (varten pieni kuvake) ja photo_over.png (normaalin kuvaketta)
Latasin kuvakkeita asetukset paneelissa plugin.
2. Kanssa Firebug löysin: id = "caticons-3"> h2> ul> li>> img
Minun rollover.js tiedoston muutin id # caticons-3 h2> img ja # caticons-3 h2>
li.cat-erä> on edelleen sama, vaikka tämä on myös uusi caticons-3 id. Mutta tämä tunnus ei käytetä rollover.js tiedostoa en muuttaisi mitään.
Minun rollover.js tiedosto on JS kansioon minun teeman kansio. Muutin toimivat kuten niin:
"/ Wp-content/themes/MFW/js/rollover.js ');
Voisitteko antaa minulle neuvoja mistä lähteä etsimään ongelmaan?
Thx ajaksi sinun auttaa!
Hei, se ei toimi:
Minun koodi on:
div class = "header">
Mikä on oikea css-järjestystä:
...
Query (toiminto ($) (
$ (Document). Valmiit (function () (
/ / Asettaa
$ ("# Content h2> img). Kukin (function () (
rollsrc = $ (tämä).
...
Hei, se ei toimi:
Minun koodi on:
...
...
Mikä on oikea css-järjestystä:
...
Query (toiminto ($) (
$ (Document). Valmiit (function () (
/ / Asettaa
$ ("# Content h2> img). Kukin (function () (
rollsrc = $ (tämä).
...
Hei, se ei toimi:
Minun koodi on:
/ / Div class = "header"
/ / Ul style = "list-style-type: none; margin: 0px; padding-bottom: 0px; line-height: 0px;"
/ Ul
img). kukin (function () (
rollsrc = $ (tämä).
...
En voi auttaa sinua mieltä. Tämä on erityinen malliin ja css. Toivon sinun ymmärtävän. Firebug on loistava keino löytää "css järjestys".