Obsah fóra
PravidláRegistrovaťPrihlásenie




Odpovedať na tému [ Príspevkov: 3 ] 
AutorSpráva
Offline

Užívateľ
Užívateľ
background changer + pagination

Registrovaný: 28.02.09
Prihlásený: 19.02.18
Príspevky: 241
Témy: 56
Príspevok NapísalOffline : 08.12.2014 14:20

Cavte napisal som pre vlastnu potrebu Background Changer s navigaciou. Je to asi moj prvy script ktory som pisal sam. Chcel by som vediet nejake rady alebo chyby ktore v kode mam, pripadne opravy kodu aby to bolo napisane lepsie ako teraz. Sem tam sa stane ze to pozadie blbne ked prepinam v navigacii. Viete mi poradit cim to bude ? Vdaka

JS
Kód:
<script type="text/javascript">
           
            $(window).load(function(){               
               
                function bgChanger (element1, element2) {
                    this.element1 = element1;
                    this.element2 = element2;
                    this.timer;
                }
               
                bgChanger.prototype = {
                    init: function(){
                        var self = this;
                        $(self.element1+" > div").css('display', 'block');
                        if (typeof self.element2 !== "undefined" && self.element2) {
                            var pagination = $("<ul></ul>");                       

                            if ($(self.element1).children().length > 0) {
                                var i = 1;
                                $(self.element1+" > div").each(function(){
                                    pagination.append('<li '+($(this).hasClass('active') ? 'class="active"' : '')+'><a href="#">'+i+'</a></li>');
                                    i++;
                                });
                            }

                            if ($(self.element2).length > 0){
                                $(self.element2).html(pagination);
                               
                                $(self.element2).find("a").bind('click', function(){
                                    var index = $(this).html();
                                    self.set(index);
                                   
                                    $(this).parent().siblings().removeClass('active');
                                    $(this).parent().addClass('active');
                                   
                                    return false;
                                });
                            }
                        }
                    },
                    start: function () {
                        var self = this;                       
                        self.stop();
                                                   
                        self.timer = setInterval(function(){
                            var $active = $(self.element1).find('.active');
                            var $next = ($active.next().length > 0) ? $active.next() : $(self.element1).find('div:first');

                            var index = ($next.index()+1);

                            if (typeof self.element2 !== "undefined" && self.element2) {
                                $(self.element2+' li').removeClass('active');
                                $(self.element2+' li:nth-child('+index+')').addClass('active');
                            }

                            $next.css('z-index', 2);
                            $active.fadeOut(1500, function(){
                                $active.css('z-index', 1).show().removeClass('active');
                                $next.css('z-index', 3).addClass('active');
                            });
                        }, 7000);
                    },
                    set: function(index){
                        var self = this;
                        self.stop();
                       
                        var $active = $(self.element1).find('.active');
                        var $next = $(self.element1+' :nth-child('+index+')');

                        $next.css('z-index', 2);
                        $active.fadeOut(1500, function(){
                            $active.css('z-index', 1).show().removeClass('active');
                            $next.css('z-index', 3).addClass('active');
                        });
                       
                        self.start();
                    },
                    stop: function(){
                        var self = this;
                        clearTimeout(self.timer);
                    }
                };
               
                var changer  = new bgChanger("#background", "#bg_pagination");
               
                changer.init();
                changer.start();
            });
           
        </script>

html
Kód:
<div id="background" >
                <div style="background-image: url('/images/content/bg_pic1.jpg');" class="active"></div>
                <div style="background-image: url('/images/content/bg_pic2.jpg');"></div>
                <div style="background-image: url('/images/content/bg_pic3.jpg');"></div>
            </div>
<div id="bg_pagination"></div>

css
Kód:
html, body{ width: 100%; height: 100%;}

#background{ padding: 0; margin: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
#background > div:not(.active){ display: none; }           
#background > div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-attachment: fixed; background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#background > div.active{ z-index: 3; }


Offline

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 06.02.14
Prihlásený: 19.01.18
Príspevky: 443
Témy: 9
Príspevok NapísalOffline : 08.12.2014 15:38

neskusal som to, ale kod vyzera ok

mozno len taky detail - pri foreach, netreba index robit pomocou novej premennej, mas ho ako atribut funkcie
Kód:
$(self.element1+" > div").each(function(index, item){
 pagination.append('<li '+($(this).hasClass('active') ? 'class="active"' : '')+'><a href="#">'+(index+1)+'</a></li>');
});


druha vec, tu zbytocne vytvaras dvakrat ten isty element
Kód:
$(this).parent().siblings().removeClass('active');
$(this).parent().addClass('active');

takto je to menej narocnejsie
Kód:
$(this).parent().addClass('active').siblings().removeClass('active');


ten fade by som riesil priamo v css nie v js, tam iba zmenu class. nemusel by si riesit next element. proste iba by si 'ponul' triedu active o jeden element dalej a v css by si urobil transition s opacity.
nieco ako:
Kód:
#background {
 > div {
   opacity: 0;
   transition: opacity 0.3s ease;
   &.active {
     opacity: 1;
  }
 }
}


ps: pre background-size uz nie su potrebne prefixy.


Offline

Užívateľ
Užívateľ
background changer + pagination

Registrovaný: 28.02.09
Prihlásený: 19.02.18
Príspevky: 241
Témy: 56
Príspevok Napísal autor témyOffline : 08.12.2014 16:01

Citácia:
netreba index robit pomocou novej premennej, mas ho ako atribut funkcie

ano jasne .. zabudol som na to .. dik
Kód:
$(this).parent().addClass('active').siblings().removeClass('active');

mas pravdu .. mozno iba koli postupnosti operacii ktore sa maju vykonat som to napisal takto ..

tie dalsie veci transition a opacity + background size -- starsie prehliadace s tym mozu mat problem

// Spojený príspevok Pon 08.12.14 16:04

aa este jednu vec som nevedel ... ako vytvorit konstruktor pre funkciu .. aby som neskor nemusel volat "changer.init();" ale aby sa to spravilo automaticky


Odpovedať na tému [ Príspevkov: 3 ] 


Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy. IP Changer

v Sieťové a internetové programy

1

231

14.04.2013 17:50

SKiLEX Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. IP Changer

v Siete

4

4766

01.05.2007 14:04

Tomas1 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. DNS Changer

v Antivíry a antispywary

3

570

25.05.2012 10:49

Matus111491 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. IP changer -a anonymizer

v Sieťové a internetové programy

0

284

25.11.2012 14:02

reincarnate Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. background

v HTML, XHTML, XML, CSS

1

348

13.09.2013 21:57

shaggy Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Background

v HTML, XHTML, XML, CSS

15

1264

06.10.2009 15:54

maťo* Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. background

v HTML, XHTML, XML, CSS

23

1219

02.12.2009 15:56

kaidžas Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Dynamicka IP a IP changer

v Sieťové a internetové programy

3

382

05.04.2010 18:54

Milanese Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Background-image

v HTML, XHTML, XML, CSS

1

1001

08.07.2019 14:43

BX Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. background-attachment

v HTML, XHTML, XML, CSS

29

1237

08.08.2008 6:54

don jebot Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. BackGround Sound

v JavaScript, VBScript, Ajax

3

768

24.12.2007 14:35

jablko05 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. background-size??

v HTML, XHTML, XML, CSS

4

546

26.01.2010 13:08

max-m Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. background+images

v HTML, XHTML, XML, CSS

1

292

12.07.2013 17:17

shaggy Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. css - background-image

v HTML, XHTML, XML, CSS

7

1567

01.03.2007 18:38

mokus Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. css 2*background

v HTML, XHTML, XML, CSS

3

386

14.06.2012 12:15

F3RY Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Mnozenie background obrazku

v HTML, XHTML, XML, CSS

4

384

12.03.2009 21:40

Tominator Zobrazenie posledných príspevkov


Nemôžete zakladať nové témy v tomto fóre
Nemôžete odpovedať na témy v tomto fóre
Nemôžete upravovať svoje príspevky v tomto fóre
Nemôžete mazať svoje príspevky v tomto fóre

Skočiť na:  

Powered by phpBB Jarvis © 2005 - 2024 PCforum, webhosting by WebSupport, secured by GeoTrust, edited by JanoF
Ako väčšina webových stránok aj my používame cookies. Zotrvaním na webovej stránke súhlasíte, že ich môžeme používať.
Všeobecné podmienky, spracovanie osobných údajov a pravidlá fóra