• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Slider jQuery - tekst

0 głosów
188 wizyt
pytanie zadane 14 września 2016 w JavaScript, jQuery, AJAX przez ayo1001 Obywatel (1,820 p.)
edycja 14 września 2016 przez ayo1001
Cześć,

Mam taki kod:

HTML:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
		<div class="background-image" data-zs-src='["https://picjumbo.imgix.net/HNCK5911.jpg?q=40&w=3000&sharp=40", "https://picjumbo.imgix.net/DJI_0142.jpg?q=40&w=3000&sharp=40", "https://picjumbo.imgix.net/DSC00083.jpg?q=40&w=3000&sharp=40"]' data-zs-overlay="dots" data-zs-speed="15000" data-zs-interval="6000">
		</div>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

CSS:

.zs-enabled{position:relative}
.zs-enabled .zs-slideshow,
.zs-enabled .zs-slides,
.zs-enabled .zs-slide{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;overflow:hidden}
.zs-enabled .zs-slideshow .zs-slides .zs-slide{
background:transparent none no-repeat 50% 50%;
background-size:cover;
position:absolute;
visibility:
hidden;
opacity:0;
-webkit-transform:scale(1.1, 1.1);
-moz-transform:scale(1.1, 1.1);
-ms-transform:scale(1.1, 1.1);
-o-transform:scale(1.1, 1.1);
transform:scale(1.1, 1.1)}
.zs-enabled .zs-slideshow .zs-slides .zs-slide.active{
visibility:visible;
opacity:1
}
.zs-enabled .zs-slideshow .zs-bullets{
position:absolute;
z-index:4;
bottom:20px;
left:0;
width:100%;
text-align:center;
}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet{
    display: inline-block;
    cursor: pointer;
    width: 22px;
    height: 22px;
    margin: 5px;
    border-radius: 50%;
    background-color: #FFF;
}
.zs-enabled .zs-slideshow .zs-bullets .zs-bullet.active {
background-color: #999;
}
.zs-enabled .zs-slideshow:after{
content:" ";position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;background:transparent none repeat 0 0}
.zs-enabled.overlay-plain .zs-slideshow:after{background-image:url(plain.png)}
.zs-enabled.overlay-dots .zs-slideshow:after{background-image:url(dots.png)}

.background-image {
min-height: 510px;
background-size: cover;
position: relative;
display: block;

}

JS:

/* Author: https://github.com/mingyeungs/jquery-zoomslider */

!function(s) {
    function t(i, t) {
        this.element = i, this.$el = s(i), this._defaults = n, this._name = e;
        var a = this.$el.data(),
            l = {};
        for (var o in a)
            if (a.hasOwnProperty(o) && o.match(/zs[A-Z]/)) {
                var r = o.substr(2);
                r = r.charAt(0).toLowerCase() + r.slice(1), l[r] = a[o]
            }
        return this.settings = s.extend({}, n, l, t), null == this.settings.src || this.settings.src.length < 1 ? void console.log("ZoomSlider terminated - invalid input.") : void this.init()
    }
    var e = "zoomSlider",
        n = {
            src: null,
            speed: 8e3,
            switchSpeed: 800,
            interval: 4500,
            autoplay: !0,
            bullets: !0,
            overlay: "plain"
        };
    s.extend(t.prototype, {
        init: function() {
            0 == s.isArray(this.settings.src) && (this.settings.src = [this.settings.src]), this.transEndEventNames = {
                WebkitTransition: "webkitTransitionEnd",
                MozTransition: "transitionend",
                OTransition: "oTransitionEnd",
                msTransition: "MSTransitionEnd",
                transition: "transitionend"
            }, this.transEndEventName = this.transEndEventNames[Modernizr.prefixed("transition")], this.support = Modernizr.csstransitions && Modernizr.csstransforms;
            var i = Modernizr.prefixed("transform");
            switch (i = i.replace(/([A-Z])/g, function(s, i) {
                return "-" + i.toLowerCase()
            }).replace(/^ms-/, "-ms-"), this.transitionProp = {
                transition: i + " " + this.settings.speed + "ms ease-out, opacity " + this.settings.switchSpeed + "ms"
            }, this.numSlides = this.settings.src.length, this.$el.css("position")) {
                case "relative":
                case "absolute":
                case "fixed":
                    break;
                default:
                    this.$el.css("position", "relative")
            }
            var t = this,
                e = s("<img />");
            e.load(function() {
                1 == t.numSlides ? t.initSingle() : t.initSlideshow()
            }), e.attr("src", this.settings.src[0])
        },
        initSlideshow: function() {
            var t = this,
                e = s('<div class="zs-slideshow"></div>'),
                n = s('<div class="zs-slides"></div>'),
                a = s('<div class="zs-bullets"></div>');
            for (i = 0; i < this.numSlides; i++) {
                var l = s('<div class="zs-slide zs-slide-' + i + '"></div>');
                l.css({
                    "background-image": "url('" + this.settings.src[i] + "')"
                }).appendTo(n);
                var o = s('<div class="zs-bullet zs-bullet-' + i + '"></div>');
                o.appendTo(a), 0 == i && (l.addClass("active").css("opacity", 1), o.addClass("active"))
            }
            if (t._promoteChildren(), e.append(n).prependTo(this.$el), 1 == this.settings.bullets && (e.append(a), e.on("click", ".zs-bullet", function() {
                    t.jump(s(this).index())
                })), this.pos = 0, this.pending = null, this.switching = !1, this.$slideshow = e, this.$slides = n.children(".zs-slide"), this.$bullets = a.children(".zs-bullet"), this.$el.addClass("zs-enabled"), "dots" == this.settings.overlay ? this.$el.addClass("overlay-dots") : "plain" == this.settings.overlay && this.$el.addClass("overlay-plain"), this.support) {
                var r = this.$slides.eq(0);
                r.css("opacity", 0).css(this.transitionProp), setTimeout(function() {
                    r.css({
                        opacity: 1,
                        transform: "scale(1.0, 1.0)",
                        "z-index": 2
                    })
                }, 50)
            }
            1 == this.settings.autoplay && this.play()
        },
        initSingle: function() {
            var i = this,
                t = s('<div class="zs-slideshow"></div>'),
                e = s('<div class="zs-slides"></div>'),
                n = s('<div class="zs-slide zs-slide-0"></div>');
            n.css({
                "background-image": "url('" + this.settings.src[0] + "')"
            }).appendTo(e), n.addClass("active").css("opacity", 1), i._promoteChildren(), t.append(e).prependTo(this.$el), this.$el.addClass("zs-enabled"), "dots" == this.settings.overlay ? this.$el.addClass("overlay-dots") : "plain" == this.settings.overlay && this.$el.addClass("overlay-plain"), this.support && (n.css("opacity", 0).css(this.transitionProp), setTimeout(function() {
                n.css({
                    opacity: 1,
                    transform: "scale(1.0, 1.0)",
                    "z-index": 2
                })
            }, 50))
        },
        _promoteChildren: function() {
            this.$el.children().each(function() {
                $this = s(this), "auto" == $this.css("z-index") && $this.css("z-index", 2), "static" == $this.css("position") && $this.css("position", "relative")
            })
        },
        jump: function(s) {
            if (s >= this.numSlides) return void console.log("ZoomSlider: jump(pos) aborted. supplied index out of range.");
            if (this.pos != s) {
                if (this.switching) return void(this.pending = s);
                var i = this,
                    t = this.$slides.eq(this.pos),
                    e = this.$slides.eq(s);
                this.support ? (this.switching = !0, t.css("z-index", 1), e.addClass("active").css(this.transitionProp).css({
                    opacity: 1,
                    transform: "scale(1.0, 1.0)",
                    "z-index": 2
                }).on(this.transEndEventName, function(s) {
                    "opacity" == s.originalEvent.propertyName && (lastSlideBg = t.css("background-image"), t.removeClass("active").removeAttr("style").css("background-image", lastSlideBg), e.off(i.transEndEventName), i.switching = !1, null != i.pending && setTimeout(function() {
                        var s = i.pending;
                        i.pending = null, i.$bullets.eq(s).click()
                    }, 30))
                })) : (t.removeClass("active"), e.addClass("active")), this.$bullets.eq(this.pos).removeClass("active"), this.$bullets.eq(s).addClass("active"), this.pos = s, this.settings.autoplay && this.play()
            }
        },
        prev: function() {
            var s = this.pos - 1;
            0 > s && (s = this.numSlides - 1), this.jump(s)
        },
        next: function() {
            var s = this.pos + 1;
            s >= this.numSlides && (s = 0), this.jump(s)
        },
        play: function() {
            null != this.timer && clearInterval(this.timer);
            var s = this;
            this.settings.autoplay = !0, this.timer = setInterval(function() {
                s.next()
            }, this.settings.interval)
        },
        stop: function() {
            this.settings.autoplay = !1, clearInterval(this.timer), this.timer = null
        }
    }), s.fn[e] = function(i) {
        return this.each(function() {
            s.data(this, "plugin_" + e) || s.data(this, "plugin_" + e, new t(this, i))
        })
    };
    var a = s("[data-zs-src]");
    a.length > 0 && a.each(function() {
        var i = s(this);
        i.zoomSlider()
    })
}(jQuery, window, document);

Czy ktoś wie jak do tego slidera można dodać tekst, który będzie zmieniał się razem ze sliderem?

Podgląd jest na codepen.

1 odpowiedź

0 głosów
odpowiedź 14 września 2016 przez Michał Kazula Pasjonat (16,300 p.)
Nie widzę codepen'a z kodem (szukałem pod http://codepen.io/ayo1001/).

Chcesz gotowe rozwiązanie czy podpowiedź?
komentarz 14 września 2016 przez ayo1001 Obywatel (1,820 p.)
Podgląd CodePen jest wyżej w poście (nad "Cześć")

Szukam zarówno rozwiązania jak i podpowiedzi, bo i tak muszę rozwiązać problem - nawet po dostaniu "gotowca" będę musiał przeanalizować kod.
komentarz 14 września 2016 przez Michał Kazula Pasjonat (16,300 p.)

To zacznę od podpowiedzi.

Możesz np. wstawić sobie w diva ze zdjęciami nowego diva w którym będziesz umieszczał tekst. Oddzielnie dasz mu formatowanie w CSS i obsługę w JS.

Dla ułatwienia:

<html>
  <head>
  </head>
  <body> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"></script>
  <div class="background-image" data-zs-src='["https://picjumbo.imgix.net/HNCK5911.jpg?q=40&w=3000&sharp=40", "https://picjumbo.imgix.net/DJI_0142.jpg?q=40&w=3000&sharp=40", "https://picjumbo.imgix.net/DSC00083.jpg?q=40&w=3000&sharp=40"]' data-zs-overlay="dots" data-zs-speed="15000" data-zs-interval="6000">
    <div class="text" zs-text='["Tekst 1","Tekst 2","Tekst 3"]'>/<div>
  </div>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
  </body>
</html>

Postaraj się samemu zmodyfikować JS tak aby pobrał to co jest w nawiasie w zs-text i wstawił w środek tego div'a.

PS.

Dodałem brakujące znaczniki std. HTML!

komentarz 15 września 2016 przez ayo1001 Obywatel (1,820 p.)
Próbowałem dostosować swój kod do tamtego, ale niestety mi się nie udało.

Czy możesz mi dać gotowe rozwiązanie, a ja na podstawie Twojego kodu przeanalizuję gdzie popełniałem błąd?
komentarz 15 września 2016 przez Michał Kazula Pasjonat (16,300 p.)
Wklej swój ;-) jak będzie nie do naprawy to tam Ci gotowca.

Podobne pytania

0 głosów
1 odpowiedź 175 wizyt
0 głosów
2 odpowiedzi 216 wizyt
pytanie zadane 17 lutego 2018 w JavaScript, jQuery, AJAX przez pebrzosky Obywatel (1,170 p.)
0 głosów
1 odpowiedź 189 wizyt
pytanie zadane 2 lipca 2017 w JavaScript, jQuery, AJAX przez Adam Ostrogórski Obywatel (1,070 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

66,494 zapytań

113,266 odpowiedzi

239,865 komentarzy

46,630 pasjonatów

Przeglądających: 147
Pasjonatów: 0 Gości: 147

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...