Keskustelu: Nettisivujen teko: jQuery ongelma

Hei, yritän saada jQuery Royal Slideria toimimaan. Saan tällaisen virheilmoituksen: "Uncaught TypeError: Cannot set property 'easeOutBack' of undefined"

// Royal Slider
jQuery(document).ready(function($) {
    jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
    $('#slider-with-blocks-1').royalSlider({
        autoplay: true,
        arrowsNav: false,
        arrowsNavAutoHide: false,
        fadeinLoadedSlide: false,
        controlNavigationSpacing: 0,
        controlNavigation: 'bullets',
        imageScaleMode: 'none',
        imageAlignCenter: false,
        blockLoop: true,
        loop: true,
        numImagesToPreload: 6,
        transitionType: 'fade',
        keyboardNavEnabled: true,
        block: {
            delay: 600
        }
    });
});

Eli ongelma on tämä rivi:

jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';

Eli et voi asettaa määrittelemättömälle oliolle 'rsCSS3Easing' asetusta 'easeOutBack' aivan kuten virhekin sen sinulle kertoo. Jquery ei varmaankaan sisällä moista by default, joten sinun täytynee ladata kyseinen kirjasto.

Juu eli ostin tuon jQuery version lisenssin (noin 11€). Eli tiedostot löytyvät.. voiko tuon virheilmoituksen kiertää jotenkin, mistä siinä on kyse?

siinä on kyse siitä ettet ole liittänyt kyseistä kirjastoa koodeihisi.
<script src="nn.js"></script>
<script src="nn_laajennos.js"></script>

Kyseiset koodit on liitetty. Luulen että tämä liittyy jotenkin taas Wordpressiin. Aikaisemmassa versiossa joka ei ole tehty WP:n sisään, slider toimi normaalisti.

Jotenkin pitäisi tutkia tuota: jQuery.rsCSS3Easing.easeOutBack

No avaapa kuule selaimesi konsoli ja katso sieltä virheet. Tai katso tuotetusta html:stä, että löytyvätkö tarvittavat skriptit sorsista. Ihan perusjuttuja debuggaamisen saralla. Helpoin arvaus olisi kämäisen vanha jQuery, jonka kanssa tuo pulikka ei ole yhteensopiva.

Tutkitaan asiaa. Eli olen toki käyttänyt konsolia ennenkin. Sieltä tuon virheilmoituksen postasin. Lähdekoodi myös tutkittu ja linkit kunnossa.

Tälläinen ohje tuli latauksen mukana:

You should include: jQuery, main slider JavaScript file, main slider CSS file, skin CSS file.
It's recommended to get jquery.royalslider.min.js from build tool. Feel free to combine files in one.
Make sure that paths match locations of files.

<script src="../assets/royalslider/jquery-1.8.3.min.js" />
<script src="../assets/royalslider/jquery.royalslider.min.js" />
<link href="../assets/royalslider/royalslider.css" rel="stylesheet">
<script src="../assets/royalslider/jquery.easing-1.3.js" />
<link href="../assets/royalslider/skins/minimal-white/rs-minimal-white.css" rel="stylesheet">

- Eli lähden tutkimaan jos löytäisin tuon -> It's recommended to get jquery.royalslider.min.js from build tool

Lisäys:

No kuten arvasin, ei auttanut. Chromen DEV Tool antaa tämän viestin:

"Uncaught TypeError: Cannot set property 'easeOutBack' of undefined"

..ja jotenkin luulen että WP asialla koska ekassa versiossa, jossa ei WP siis ole vielä mukana, niin kaikki toimii. Konsoli ei näytä mitään virhetekstejä ja slider toimii mukavasti.

Lisäys:

Tässä vielä tarkennusta virheilmoitukseen:

Uncaught TypeError: Cannot set property 'easeOutBack' of undefined localhost/:284
(anonymous function) localhost/:284
c jquery.js?ver=1.10.2:4
p.fireWith jquery.js?ver=1.10.2:4
x.extend.ready jquery.js?ver=1.10.2:4
q

Tässä: js-tiedosto

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}
});

late kirjoitti:

<script src="../assets/royalslider/jquery-1.8.3.min.js" />

Voiskohan kyseessä olla konflikti tuon jQueryn kanssa.

Tsekkaas tämä:
http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

Yksi vaihtoehto on, että yrität käyttää kirjastoa ennenkuin se on ladattu.

Jos oikeasti lataa kaksi jQuerya päällekäin, niin ihan turha ihmetellä, että ongelmia on.

groovyb kirjoitti:

Yksi vaihtoehto on, että yrität käyttää kirjastoa ennenkuin se on ladattu.

Eei ole.

tuollahan tosiaan näytti debuggeri ilmoittelevan jquery.js:stä, jota ei tuon script src listauksen mukaan pitäisi olla edes siellä.

Kiitos kaikille. Luultavasti teen niin että hankin tuon WP:lle nimenomaan tarkoitetun lisenssin. Se on hieman kalliimpi, mutta turhaan yritän pelkkää jQuery palikkaa tunkea wp:n sisään ja itse konfata...

kiitän!

Siis edelleen se sun ongelmasi luultavasti juontui siitä, että lataat kaksi jQueryä, jolloin osa määrityksistä paukkuu ensimmäiseen ja loput toiseen ja se on konflikti. Mutta josset vaivaudu viestejä lukemaan, niin maksa toki tuplat lisenssistä.

Kyllä alkemisti olen samaa mieltä ja luin viestit. Mutta Wordpressissä ei ole tarkoitus itse hakea noita jQuery scriptejä yleensä.

Eli vaikka kokeilin erilaisia vaihtoehtoja ladata jQuery (init) kohdassa jne. niin silti tulee konfliktia. Tuo ihana jQuery Plugin "Royal Slider" on myös WordPressille (20$). Tavallaan halusin koodata sivut tyhjältä pohjalta siksi valitsin halvemman vaihtoehdon.

Nyt kuitenkin huomaan että parhaimmillaan WP auttaa koska siinä on näitä valmiita juttuja:

- kauniit urlit
- palaute lomake
- sisäänkirjautumis lomake
- käyttäjän rekisteröinti

ja nyt myös tuo plugin. Eli luultavasti alan tekemään uutta asiakastyötä. Jos asiakas haluaa itse laittaa dioihin tekstin ja ehkä jonkun kuvan niin joutuisin koodaamaan tuon ominaisuuden. WP-versiossa tämä on valmiina. Enemmänkin teen jonkun mallin jota asiakas voi sitten tulevaisuudessa päivittää.

WP:n ongelma on usein tuo ristiriitaisuus. Eli jossain DEV versiossani homma toimii. Kun sitten otan WP:n mukaan niin ei toimi enää. Tässä tapauksessa lähes 99% varmuudella haen itse ensin jQuery kirjaston ja jQuey UI kirjaston. Lopuksi WP hakee ekan kirjaston myös. Kun otan oman hakuni pois ilmoittaa konsoli että jQueryä ei ole määritetty..

sitten määritän WP:n funktion filessä tämän asian oikeassa kohdassa, mutta sekään ei riitä. Tuo postaus (Arttut02) oli erittäin mielenkiintoista luettavaa kiitos! Se ei kuitenkaan auttanut tässä tapauksessa. Joka tapauksessa on NYT TÄLLÄ HETKELLÄ parasta hakea käsiini Royal Slider WP:lle.

Harmittaa maksaa noin 15€ koska maksoin jo 11€ mutta toisaalta haluan tukea WEBbiä. Olen valmis maksamaan laadusta. Ehkä voin sisällyttää tuon 15 euroa lopulliseen kuittiin joka annetaan asiakkaalle... ihan mukiin menevä juttu.

Olitte tai alkemisti oli oikeassa juurikin tuossa että varmaan kyse jQueryn lataamisesta. Tällä kertaa varmaankin lataamisesta kahteen kertaan. No joo.. kiitos jälleen avusta!!

Lisäys:

*****

Okei!! Otetaan sanoja hieman takaisin. Annoitte paljon ajateltavaa. Joten päätin vielä yrittää. Tässä ratkaisuni ja nyt näyttäisi Slider toimivan:

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

<!-- jQuery Google -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<!-- slider JS files -->
<script class="rs-file" src="<?php echo get_template_directory_uri(); ?>/js/jquery.easing-1.3.js"></script>
<script class="rs-file" src="<?php echo get_template_directory_uri(); ?>/js/jquery.royalslider.min.js"></script>
<link class="rs-file" href="<?php echo get_template_directory_uri(); ?>/css/royalslider.css" rel="stylesheet">

SUUR KIITOS KOKO TIIMILLE! Täytyy kuitenkin sanoa, että on tämäkin aika kummallisen näköinen koodin pätkä header osioon.

late kirjoitti:

Tuo ihana jQuery Plugin "Royal Slider" on myös WordPressille (20$). Tavallaan halusin koodata sivut tyhjältä pohjalta siksi valitsin halvemman vaihtoehdon.

Nyt lasket työtunneillesi hinnan ja tarkistat kumpi olikaan halvempi vaihtoehto.

Eikös sitä voisi suoraan sanoa asiakkaalle että mikäli haluat tälläisen, se maksaa tän verran. Nuo lisenssiasiat kannattaa muutenkin tarkistaa, koska osa lisensseistä koskee myös asiakasta, eli asiakas ei saisi käyttää sivuillaan nn härpäkettä ilman lisenssiä. näissä tapauksissa lisenssin ostaa asiakas, ja devaustyö tehdään asiakkaan lisenssillä.

Noniin.. täällähän taas asiantuntijoita riittää. Eli kun lataa tämän Slider plugarin niin mukana tulee LISENSSI .txt - tässä mainitaan mm. että yksi web-sivu per slideri.

Itse päätin sijoittaa lisenssitekstin palvelimella juureen. Siellä ainakin sijaitsi WP:n lisenssi teksti. Kyllä tämä tästä. Tuosta loppuhinnasta! Ymmärrän toki että 15-20 euroa on mitätön summa monelle työssä käyvälle. Mutta juuri tuollaisista saattaa sittenkin kertyä ihan hyvä summa. Muun muassa kuvien kohdalla voi olla pakollista tutkia kuvapankkia ja ostaa pari kuvaa. Esim. juurikin tuota slideria varten.

Itse ottaisin mielelläni jostakin asiakkaan työntekijästä kuvan, jolloin hommasta tulisi persoonallisempaa, mutta näissä tapauksissa erilaiset häiriköt ryöstävät kuvat ja käyttävät omiin tarkoituksiinsa. Mutta nyt kaikki hyvin. Slider toimii toistaiseksi loistavasti.

late kirjoitti:

Itse ottaisin mielelläni jostakin asiakkaan työntekijästä kuvan, jolloin hommasta tulisi persoonallisempaa, mutta näissä tapauksissa erilaiset häiriköt ryöstävät kuvat ja käyttävät omiin tarkoituksiinsa.

Onneksi tällä sivustolla taas asiantuntijoita riittää.