Avatar billede sabumnim Novice
31. maj 2019 - 13:18 Der er 7 kommentarer

Kan man også hente img title?

Hejsa,
Jeg har følgende jquery kode som egentlig gør det den skal, nemlig at hente "img attribute alt" ud og skriver det i en div på siden.
Jeg vil dog gerne have den til at hente "img attribute title" også.
Er det muligt?


(function ($) {
    $.fn.gallery = function () {
        var $root = $(this),
            $control = $root.find(".control"),
            $back = $control.find(".back"),
            $next = $control.find(".next"),
            $counter = $control.find(".counter"),
            $stage = $root.find(".stage"),
            $scroll = $stage.find("ul"),
            $lists = $stage.find("li"),
            $imgs = $lists.find("img"),
            $description = $root.find(".description"),
            Btn = new Object(),
            Flick = new Object(),
            Init = new Object();
        Btn = {
            inview: 0,
            set: function () {
                $lists.removeClass("inview inmotion");
                $lists.eq(Btn.inview).removeClass("ahead behind").addClass("inview inmotion");
                $lists.eq(Btn.inview - 1).addClass("behind inmotion");
                $lists.eq(Btn.inview + 1).addClass("ahead inmotion");
            },
            next: function () {
                Flick.reset();
                if (Btn.inview > $lists.length - 2) {
                    return;
                }
                Btn.inview += 1;
                var _text = $lists.eq(Btn.inview).find("img").attr("alt");
                Btn.set();
                Btn.text(_text);
                Btn.rim();
                Btn.counter();
            },
            back: function () {
                Flick.reset();
                if (Btn.inview === 0) {
                    return;
                }
                Btn.inview -= 1;
                var _text = $lists.eq(Btn.inview).find("img").attr("alt");
                Btn.set();
                Btn.text(_text);
                Btn.rim();
                Btn.counter();
            },
            text: function (str) {
                $description.text(str);
            },
            rim: function () {
                $back.removeClass("rim");
                $next.removeClass("rim");
                if (Btn.inview === 0) {
                    $back.addClass("rim");
                } else if (Btn.inview > $lists.length - 2) {
                    $next.addClass("rim");
                }
            },
            counter: function () {
                var _counter = Btn.inview + 1 + "/" + $lists.length;
                $counter.text(_counter);
            }
        };
        Flick = {
            startX: 0,
            moveX: 0,
            start: function (event) {
                Flick.startX = event.originalEvent.touches[0].pageX;
            },
            move: function (event) {
                event.preventDefault();
                Flick.moveX = event.originalEvent.touches[0].pageX - Flick.startX;
                Flick.scroll();
            },
            end: function (event) {
                if (Flick.moveX < -50) {
                    Btn.next();
                } else if (Flick.moveX > 50) {
                    Btn.back();
                } else {
                    Flick.reset();
                }
            },
            scroll: function () {
                var _x = Math.floor(Flick.moveX / $stage.width() * 100);
                $lists.eq(Btn.inview).css(Flick.css(_x));
                $lists.eq(Btn.inview + 1).css(Flick.css(100 + _x));
                if (Btn.inview === 0) {
                    return;
                }
                $lists.eq(Btn.inview - 1).css(Flick.css(-100 + _x));
            },
            css: function (pos) {
                var _style = {
                    "-webkit-transform": "translate3d(" + pos + "%,0,0)",
                    "-moz-transform": "translate3d(" + pos + "%,0,0)",
                    "-webkit-transition": "none",
                    "-moz-transition": "none"
                };
                return _style;
            },
            reset: function () {
                $lists.removeAttr("style");
            }
        };
        Init = {
            loaded: false,
            set: function () {
                var _$first = $lists.eq(0),
                    _text = _$first.find("img").attr("alt"),
                    _loaded = false,
                    _timer = setTimeout(function () {
                        Init.load(_text);
                    }, 3500);
                $lists.addClass("ahead");
                _$first.removeClass("ahead").addClass("inview inmotion");
                $imgs.bind("load", function () {
                    clearTimeout(_timer);
                    Init.load(_text);
                });
            },
            load: function (_text) {
                if (Init.loaded) {
                    return;
                }
                $root.addClass("loaded");
                $next.bind("click", Btn.next);
                $back.bind("click", Btn.back);
                $scroll.bind("touchstart", Flick.start);
                $scroll.bind("touchmove", Flick.move);
                $scroll.bind("touchend", Flick.end);
                $scroll.bind("touchcancel", Flick.reset);
                Btn.text(_text);
                Btn.rim();
                Btn.counter();
                Init.loaded = true;
            }
        };
        Init.set();
    };
}(jQuery));




//Carsten
Avatar billede Slater Ekspert
31. maj 2019 - 13:31 #1
Naturligvis, du skifter bare ordet "alt" ud med "title".
Avatar billede sabumnim Novice
31. maj 2019 - 13:33 #2
@slater,
Den har jeg prøvet.

Jeg vil dog gerne have både:
- output på siden fra "alt tag"
- output på siden fra "title tag"

//Carsten
Avatar billede Slater Ekspert
31. maj 2019 - 13:37 #3
I hvilken form? Bare efter hinanden?

Det er ikke helt til at se hvad dette gør, når du kun giver os selve Javascript-koden, men jeg vil gå ud fra at _text indeholder teksten, og dermed vil kunne modificeres fra

_text = _$first.find("img").attr("alt")

til f.eks.

_text = _$first.find("img").attr("alt") + ' ' + _$first.find("img").attr("title")

for at skrive begge dele efter hinanden.
Avatar billede sabumnim Novice
31. maj 2019 - 13:41 #4
@Slater,

Den html hvor der skal outputtes både fra "alt" og "title" ser sådan ud:


<div class="stage">
        <ul>
        <li><img src="1.jpg" title="Nummer 1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img src="2.jpg" title="Nummer 2" alt="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." /></li>
        <li><img src="3.jpg" title="Nummer 3" alt="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img title="Nummer 4" src="4.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img title="Nummer 5" src="5.jpg" alt="222" /></li>
        </ul>
    </div>

    <div class="description" style="padding: 3px; background: lightgrey;"></div>
    <div class="header" style="padding: 3px; background: orangered;"></div>


Og med de ændringer jeg havde forsøgt selv kom indholdet ud i både "div description" samt i "div header"
Avatar billede sabumnim Novice
31. maj 2019 - 13:44 #5
Hele html koden er her:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide content</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<body>
<div id="gallery-box" class="gallery">

    <div class="stage">
        <ul>
        <li><img src="1.jpg" title="Nummer 1" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img src="2.jpg" title="Nummer 2" alt="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." /></li>
        <li><img src="3.jpg" title="Nummer 3" alt="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img title="Nummer 4" src="4.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit." /></li>
        <li><img title="Nummer 5" src="5.jpg" alt="222" /></li>
        </ul>
    </div>

    <div class="description" style="padding: 3px; background: lightgrey;"></div>
    <div class="header" style="padding: 3px; background: orangered;"></div>

    <div class="control">
        <span class="counter"></span>
        <span class="back"><i class="fas fa-arrow-left"></i></span>
        <span class="next"><i class="fas fa-arrow-right"></i> </span>
    </div>

    <div class="loading"><img src="loader.gif" width="16" height="11" alt="" /></div>

</div>   
       
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="css3gallery.js"></script>
<script>
    $("#gallery-box").gallery();
</script>
</body>
</html>
Avatar billede sabumnim Novice
31. maj 2019 - 13:54 #6
Den jeg forsøger at få til at smide output fra "title tag" også, er denne.
https://www.jqueryscript.net/slider/Minimal-Responsive-Image-Slider-with-jQuery-CSS3-CSS3-Gallery.html
Avatar billede sabumnim Novice
31. maj 2019 - 15:25 #7
Har fået HTML koden til at outputte både "title" og "alt" taggets indhold.
Men de står i samme <div> og det er ikke meningen.

Tanken er at de skal komme i hver deres <div>:

<div class="description" style="padding: 3px; background: lightgrey;"></div>
<div class="header" style="padding: 3px; background: orangered;"></div>


Har ændret her:

$.fn.gallery = function () {
        var $root = $(this),
            $control = $root.find(".control"),
            $back = $control.find(".back"),
            $next = $control.find(".next"),
            $counter = $control.find(".counter"),
            $stage = $root.find(".stage"),
            $scroll = $stage.find("ul"),
            $lists = $stage.find("li"),
            $imgs = $lists.find("img"),
            $description = $root.find(".description"),
            $header = $root.find(".title"),
            Btn = new Object(),
            Flick = new Object(),
            Init = new Object();

//-------------samt her
next: function () {
    Flick.reset();
    if (Btn.inview > $lists.length - 2) {
        return;
    }
    Btn.inview += 1;
    var _text = $lists.eq(Btn.inview).find("img").attr("alt") + ' ' + $lists.eq(Btn.inview).find("img").attr("title");
    Btn.set();
    Btn.text(_text);
    Btn.rim();
    Btn.counter();
},
back: function () {
    Flick.reset();
    if (Btn.inview === 0) {
        return;
    }
    Btn.inview -= 1;
    var _text = $lists.eq(Btn.inview).find("img").attr("alt") + ' ' + $lists.eq(Btn.inview).find("img").attr("title");
    Btn.set();
    Btn.text(_text);
    Btn.rim();
    Btn.counter();
},
text: function (str) {
    $description.text(str);
},


//Samt her---------------------------------
set: function () {
    var _$first = $lists.eq(0),
        _text = _$first.find("img").attr("alt") + ' ' + _$first.find("img").attr("title"),
        _loaded = false,
        _timer = setTimeout(function () {
            Init.load(_text);
        }, 3500);
    $lists.addClass("ahead");
    _$first.removeClass("ahead").addClass("inview inmotion");
    $imgs.bind("load", function () {
        clearTimeout(_timer);
        Init.load(_text);
    });
},



Men disse ændringer er outputtet:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nummer 1

"Lorem.... " er teksten fra ALT TAG
"Nummer 1" er teksten fra TITLE TAG

Men desværre på samme linje. De skulle i stedet have været i hver deres <div>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester