✔ JS Bildergalerie - mir "verschluckt's" Bilder

Nee oder, is nich wahr - daran liegt's.

Oh mann, Du bist für mich jetzt schon der Held des Tages!!

Eine Kleinigkeit, die mich noch stört, vielleicht weißt Du da auch Abhilfe:
die Swipe Funktion scheint "mit Einbindung des OffCanvas Menüs" zu hakeln. Also die Bilder "wischen nicht bis zu Mitte".

Das war ohne das Menü auch nicht.
Der Link von gestern mit der "ohne Menü-Variante" ist noch online.

http://www.hope-communications.com/SpinaOrganics/products.html
 
So, jetzt habe ich ein neues Problem:
ich muss in dieser JS Datei unter dem Text zu dem jeweiigen Bild noch je einen Button einbinden, also unter desc: ....

Ich habe versucht, ein 2. Bild zu definieren, was aber nicht geht.

Hier nochmal mein JS der Bildergalerie:

Code: 
// JavaScript Document

(function() {

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

var    gallery,
    el,
    i,
    page,
    slides = [
        {
            img: 'images/DeepCleansing.jpg',
            width: 638,
            height: 850,
            desc:"<span class='produkt_head'>Spina Organics Deep Cleansing Dog Body Wash</span><br>"  +
            "<span class='produkt'>This Green Tea Leaf Extract body wash helps restore the fur's natu ral oils and moisture balance. A synergetic blend of roots, herbs, Argan and Moringa seed oils, cleansing agents, and earth minerals gently removes dirt and regulates the natural pH balance.</span>",

        },
        {
            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;
    el.className = 'produkt_head';
    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;
        }
    }
  

});

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
 
Wie man das am besten löst, hängt davon ab, ob der Button einheitlich bei jedem Bild sein soll oder nur bei ausgewählten. Was soll denn der Button machen? Er hat i. allg. einen Text, einen Value sowie eine Klasse und/oder eine ID.
Am einfachsten wäre es, ihn in das HTML der Beschreibung zu integrieren:
Code: 
        {
            img: 'images/DeepCleansing.jpg',
            width: 638,
            height: 850,
            desc:"<span class='produkt_head'>Spina Organics Deep Cleansing Dog Body Wash</span><br>"  +
            "<span class='produkt'>This Green Tea Leaf Extract body wash helps restore the fur's natu ral oils and moisture balance. A synergetic blend of roots, herbs, Argan and Moringa seed oils, cleansing agents, and earth minerals gently removes dirt and regulates the natural pH balance.</span>" +
            "<button class='btnclass' value='value-des-button'>Text des Buttons</button>"
        },
Dies wäre vorteilhaft, wenn es den Button nur bei einigen Bildern geben soll.
 
Dann würde ich es etwas anders aufziehen:
Code: 
// hier der Beginn des Arrays
        {    img: 'images/BlackAndGrey.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Itch Relief Dog Body Wash',
            link: 'seitex.html' // hinzu gefuegt
        },
        {    img: 'images/Miracolo.jpg',
            width: 638,
            height: 850,
            desc: 'Spina Organics Black & Grey Coat Dog Body Wash',
            link: 'seitey.html' // hinzu gefuegt
        }
    ];
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;
    el.className = 'produkt_head';
    gallery.masterPages[i].appendChild(el);
    el = document.createElement('a'); // hinzu gefuegt
    el.href = slides[page].link; // hinzu gefuegt
    el.className = 'produkt_link'; // hinzu gefuegt
    gallery.masterPages[i].appendChild(el); // hinzu gefuegt
}
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;
        }
    }
});
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
Ungetestet. Über die Klasse müsstest Du die Links dann stylen können.
 
Ja, sehe ich mir im Laufe des Nachmittags/Abends mal an. Bisher habe ich am PC getestet, aber für das echte Verhalten beim Wischen müsste ich wahrscheinlich das Smartphone nehmen. Ich habe ein Samsung S4.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück