✔ In JS Bildergallerie Bildunterschrift mehrzeilig

[akdesign]

Hallo Zusammen,

ich habe in JS eine Bildergallerie erstellt.

Hier ist direkt in JS die Bildunterschrift integriert.
Nun kommt der Kunde nachträglich mit einer genauen Produktbeschreibung an, d.h. Bildunterschrift nun mehrzeilig und zudem auch noch unterschiedlich formatiert.

Ich weiß, dasfür ist JS nicht geeignet, aber ich habe nun halt mal schon diese Bildergallerie integriert.

Ich dachte mit \n kann ich zumindest einen Zeilenumbruch erzwingen, geht aber nicht.

Gibt es in JS irgendeine Lösung oder hat mir jemand eine Idee, um die Bildunterschrift sozusagen auszulagern?

// JavaScript Document


document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

var    gallery,
    el,
    i,
    page,
    dots = document.querySelectorAll('#nav li'),
    slides = [
        {
            img: 'images/DeepCleansing.jpg',
            width: 638,
            height: 850,
            desc: "Spina Organics Deep Cleansing Dog Body Wash     \
            This Green Tea Leaf Extract body wash helps restore the \
            d f df dfdfd fd fa"
        },
        {
            img: 'images/ItchRelief.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Itch Relief Dog Body Wash'
        },
        {
            img: 'images/Refresher.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Rejuvenating Mist Fur Refresher'
        },
        {
            img: 'images/Puppy.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Gentle & Tear-free Puppy Body Wash'
        },
        {
            img: 'images/Detangler.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Leave-in Conditioner Fur Detangler'
        },
        {
            img: 'images/Hydrating.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Hydrating Dog Body Wash'
        },
        {    img: 'images/BlackAndGrey.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Itch Relief Dog Body Wash'
        },
        {    img: 'images/Miracolo.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Black & Grey Coat Dog Body Wash'
        }
    ];

gallery = new SwipeView('#wrapper', { numberOfPages: slides.length });

// Load initial data
for (i=0; i<3; i++) {
    page = i==0 ? slides.length-1 : i-1;
    el = document.createElement('img');
    el.className = 'loading';
    el.src = slides[page].img;
    el.width = slides[page].width;
    el.height = slides[page].height;
    el.onload = function () { this.className = ''; }
    gallery.masterPages[i].appendChild(el);

    el = document.createElement('span');
    el.innerHTML = slides[page].desc;
    gallery.masterPages[i].appendChild(el)
}

gallery.onFlip(function () {
    var el,
        upcoming,
        i;

    for (i=0; i<3; i++) {
        upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;

        if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
            el = gallery.masterPages[i].querySelector('img');
            el.className = 'loading';
            el.src = slides[upcoming].img;
            el.width = slides[upcoming].width;
            el.height = slides[upcoming].height;
           
            el = gallery.masterPages[i].querySelector('span');
            el.innerHTML = slides[upcoming].desc;
        }
    }
   
    document.querySelector('#nav .selected').className = '';
    dots[gallery.pageIndex+1].className = 'selected';
});

gallery.onMoveOut(function () {
    gallery.masterPages[gallery.currentMasterPage].className = gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');
});

gallery.onMoveIn(function () {
    var className = gallery.masterPages[gallery.currentMasterPage].className;
    /(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
});

// JavaScript Document

Die Seite ist aktuell nur für Smartphone optimiert und hier zu sehen:
http://www.hope-communications.com/SpinaOrganics/gallery.html

Vielen Dank mal.

 

[Sempervivum]

Zeilenumbruch wird von HTML ignoriert bzw. in einen Zwischenraum umgesetzt.
Zeilenumbruch erzwingen

• durch <br>
• durch Verwendung von <p>-Tags

 

[akdesign]

Danke, aber in html ist mir das klar.
Hier geht es aber um ein JS Script.

 

[Sempervivum]

Schon, aber das Javascript erzeugt DOM-Elemente genau wie HTML.

    el = document.createElement('span');
    el.innerHTML = slides[page].desc;

erzeugt ein span-Element mit der Beschreibung als Inhalt. Der Effekt ist der gleiche, als hättest Du <span>deine Beschreibung</span> notiert und dementsprechend kannst Du in der Beschreibung auch Zeilenumbrüche durch HTML-Notation verwenden, wie beschrieben:

        {
            img: 'images/DeepCleansing.jpg',
            width: 638,
            height: 850,
            desc: "Spina Organics Deep Cleansing Dog Body Wash<br>" +
           This Green Tea Leaf Extract body wash helps restore the<br>" +
           d f df dfdfd fd fa"
        },

 

[akdesign]

Ach wie geil, cool, danke.

Und kann ich dem

desc: "Spina Organics Deep Cleansing Dog Body Wash<br>" +
"This Green Tea Leaf Extract body wash helps restore the<br>" +
"d f df dfdfd fd fa"

noch unterschiedliche Formatierungen zuweisen? Also der ersten Zeile z.B. eine andere Farbe als der zweiten Zeile?

 

[Sempervivum]

Selbstverständlich, Du brauchst nur die entsprechende Zeile in ein span-Tag zu packen, diesem eine Klasse oder eine ID geben und dann kannst Du die Zeile mit CSS gestalten.

Was ich vorhin nicht erwähnt habe ist, dass Du ein br-Element oder ein p-Element natürlich auch mit Javascript erzeugen kannst. Allerdings würde dann die Konfiguration sehr unübersichtlich, weil man dann das Javascript anpassen müsste, für jede Beschreibung, die von einem allgemeinen Muster abweicht - nicht zu empfehlen.

 

[akdesign]

Hmmm…… das habe ich nicht verstanden, wie ich das im JS Text anwende.

Ich habe schon verschiedene classen angelegt, aber wie weise ich dem hier nun eine Classe zu:

desc: "Spina Organics Deep Cleansing Dog Body Wash<br>"

also nur dieser Zeile, danach wieder "normal"

 

[Sempervivum]

Deine Variable desc enthält ganz normalen HTML-Text:

desc: "<span class='differs'>Spina Organics Deep Cleansing Dog Body Wash</span><br>"

 

[akdesign]

OK, super.
Eine letzte Frage: warum übernimmt's die color für die Schrift nicht?

 

[akdesign]

Hab's selber rausgefunden. War "allgemein" auf schwarz gesetzt, daher wurde die Farbe für die classe nicht übernommen.
Super cool. Vielen, vielen dank - hast mir echt ganz arg weitergeholfen!