Logowanie

Jak popinać do strony pluginy Jquery?

pytanie zadane 28 czerwca 2015 w JavaScript przez jedrus_91 Użytkownik (760 p.)

Jak w temacie, od 3 dni głowię się jak podpinać pluginy Jquery. Proszę o pomoc. Podam przykładowy plugin :https://dl.dropboxusercontent.com/u/3241507/ayaslider/index.html. Moglibyście pomóc i mi to jakoś prosto wytłumaczyć?

2 odpowiedzi

odpowiedź 28 czerwca 2015 przez Comandeer Guru (600,810 p.)
wybrane 29 czerwca 2015 przez jedrus_91

Najlepsza

Kod JS powinno się umieszczać na końcu body: https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-6-move-scripts-bottom-7200.html

Wówczas to będzie wyglądać mniej więcej tak:

<div>Treść strony itd.</div>
<script src="jquery.js"></script>
<script src="plugin.js"></script>
<script>//tutaj kod z wywołaniem</script>

Oczywiście jak plugin ma jakiś CSS to będzie on w head

komentarz 28 czerwca 2015 przez jedrus_91 Użytkownik (760 p.)

miałbyś czas wytłumaczyć krok po kroku jak to dobić z pluginami? podpięcie 3 linijek kodu i wywołanie wystarcza?

komentarz 28 czerwca 2015 przez Comandeer Guru (600,810 p.)

W większości wypadków powinno wystarczyć.

odpowiedź 28 czerwca 2015 przez vverum Gaduła (4,340 p.)

w head <script src="js/jQuery.js" type="text/javascript"></script>

albo sciagnij i jak zwykły js http://code.jquery.com/jquery-2.1.4.min.js

nie jestem pewien co do adresu js/jQuery.js

komentarz 28 czerwca 2015 przez jedrus_91 Użytkownik (760 p.)

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="jquery.easing.min.js" type="text/javascript"></script>
    <script src="ayaSlider.js" type="text/javascript"></script>

podpiąłem tak jak wyżej w sekcji head

<body >
    <div id="slideShow">

                        
                        <div data-out="top:1000;opacity:0;" data-in="left:-100;opacity:.2;duration:500" class="slide s1">
                            <img style="position:absolute;" src="1.png" />

                            <div class="grid_5" style="margin-top:15px;">
                                <div data-in="top:-100;delay:1550;duration:550" class="title"><h2>Easy to Setup</h2></div>
                                <div data-in="left:-1000;delay:700;duration:1550" class="content">Mutiple Slides</div>
                                <div data-in="left:-1000;delay:800;duration:1550" class="content">Multiple Animations</div>
                                <div data-in="left:-1000;delay:900;duration:1550" class="content">Easing Included</div>
                                <div data-in="left:-1000;delay:1000;duration:1550" class="content">Easing Included</div>
                            </div>
                        </div>


                        
                        <div data-out="left:-1000;opacity:0;delay:9000" data-in="top:-500;duration:1200;ease:easeOutBounce;" class="slide s2">
                            <img style="position:absolute;top:0;left:0;" src="2.png" />

                            <div class="grid_4">

                                <div style="" data-in="opacity:0;left:100;delay:2050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" class="content">Unlimited</div>
                                <div style="" data-in="opacity:0;left:150;delay:2550;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4300;" class="content">Animations</div>

                            </div>

                            <div class="grid_4">
                                <div style="" data-in="opacity:0;left:100;delay:3050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" class="content">Embed</div>
                                <div style="" data-in="opacity:0;left:150;delay:3550;duration:800;ease:linear" data-out="left:-100;opacity:0;delay:4300;" class="content">Any HTML</div>

                            </div>

                            <div class="grid_4">
                                <div style="" data-in="opacity:0;left:100;delay:4050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" class="content">Use</div>
                                <div style="" data-in="opacity:0;left:150;delay:4550;duration:800;ease:linear" data-out="left:-100;opacity:0;delay:4300;" class="content">Your Imagination</div>
                            </div>



                                <img data-in="opacity:0;delay:9050;duration:1050;ease:linear" style="position:absolute;top:0px;left:0;" src="./images/slider/night.png" />


                        </div>

                        
                        <div data-out="top:-1000;opacity:0;delay:7000" data-in="left:1000;ease:linear;duration:400;delay:50" class="slide s3">
                            <img style="position:absolute;top:0;left:0;" src="3.png" />

                            <div class="push_7 grid_5" style="margin-top:15px;">
                                <div data-in="top:-1000;delay:1850;duration:550" class="title"><h2>Really Flexible</h2></div>
                                <div data-in="top:-1000;delay:1650;duration:550" class="content">Design Your Layout</div>
                                <div data-in="top:-1000;delay:1450;duration:550" class="content">Animate Every Element</div>
                                <div data-in="top:-1000;delay:1250;duration:550" class="content">Embed Any HTML</div>
                                <div data-in="top:-1000;delay:1050;duration:550" class="content">ayaSlider Does't Force Styles</div>
                            </div>
                        </div>


                        
                        <div data-out="left:-1000;opacity:0;delay:3000" class="slide s2">


                            <img data-in="opacity:0;left:-100;duration:1000;ease:linear;" style="position:absolute;top:0;left:0;" src="1.jpg" />

                        </div>
    </div>


    <script>
    function(){
        $('#slideShow').ayaSlider({
           easeIn : 'easeOutBack',
           easeOut : 'linear',
           delay : 5000,
           timer : $('#timer'),
           previous : $('.prev'),
           next : $('.next'),
           list : $('.slideControl')
        });
    });
    </script>

</body>

a tak wygląda body

Podobne pytania

0 głosów

0 odpowiedzi 82 wizyt

Usunięcie działania pluginu do jQuery po argumencie

pytanie zadane 17 sierpnia 2016 w JavaScript przez niezalogowany

0 głosów

1 odpowiedź 149 wizyt

Plugin jquery nie działa

pytanie zadane 22 lipca 2017 w JavaScript przez EdeX Mądrala (5,110 p.)

+2 głosów

1 odpowiedź 179 wizyt

Slider jako plugin w jQuery do oceny

pytanie zadane 4 kwietnia 2016 w JavaScript przez Bartos Użytkownik (610 p.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...