✔ JS Bildergalerie - mir "verschluckt's" Bilder

Ups, sehe gerade, dass ich bei den Links etwas vergessen habe:
Code: 
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;
     
            el = gallery.masterPages[i].querySelector('a'); // hinzu gefuegt
            el.href = slides[upcoming].link; // hinzu gefügt
        }
    }
});
Außerdem brauchst Du für das a-Tag wahrscheinlich noch einen Text (innerHTML), der dem Benutzer angezeigt wird. Ist dieser einheitlich: Einfach im JS hinzufügen. Wenn nicht: In der Liste hinzufügen, im JS auslesen und im Link eintragen.
 
OK, ich habe alles eingefügt. Jetzt stehe ich aber gerade auf dem Schlauch mit dem Text für den Link. Wobei es ja eigentlich kein Text sein soll, sondern ein Button als Bild, also kein <button>, sondern ein img.
 
Wenn die Button-Grafik immer die selbe sein soll, müsste es so aussehen:
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
    im = document.createElement('img'); // neu hinzu gefuegt
    im.src = 'deinbutton.png'; // neu hinzu gefuegt
    el.appendChild(im); // neu 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;
                   el=gallery.masterPages[i].querySelector('a'); // hinzu gefuegt
                   el.href = slides[upcoming].link; // hinzu gefügt
        }
    }
});
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
Neuen Code habe ich mit "// neu hinzu gefuegt" markiert.
 
OK, cool. Jetzt müsste ich nur noch die Position des Buttons bestimmen, der liegt aktuell irgendwo hinter dem Text.
Und das sich öffnende Fenster liegt nicht "über" der Galerie.
 
ah sorry, mit meinen ganzen Versionen ist etwas durcheinandergeraten.
Aktuelle url:
http://www.hope-communications.com/SpinaOrganics/products_test.html

Also zum einen liegt der Button eben noch hinter dem Text und nicht positioniert.
Beim letzten Produkt kannst Du ihn anklicken und das sich öffnende Fenster liegt nicht "oben".

Übrigens habe ich das Problem mit der "ruckelnden" Galerie gelöst. Ich hatte die Breite des wrappers in % statt px angegeben. Ich weiß aber nicht, ob px gut ist, wenn es sich um eine mobile Version handelt??
 
OK, jetzt sehe ich es.
Der Button liegt hinter dem Text, weil der Text absolut positioniert ist. Dies ist ein typisches Problem, wenn man mit absoluter Positionierung arbeitet. Daher ist davon abzuraten, es sei denn, eine Überdeckung ist ausdrücklich gewollt. Das ist in deinem Fall aber nicht der Fall.

BTW: Du hast die Texte als Blockelemente angelegt. Dann belegen sie von allein eine neue Zeile und Du brauchst kein <br> mehr. Wenn ich mir das Aussehen ansehe, finde ich dass h1 und section semantisch treffender wäre.

Übrigens habe ich das Problem mit der "ruckelnden" Galerie gelöst. Ich hatte die Breite des wrappers in % statt px angegeben. Ich weiß aber nicht, ob px gut ist, wenn es sich um eine mobile Version handelt??
Zum Vergrößern anklicken....
Trifft das für die Seite unter dem letzten Link zu? Wenn ich am PC das Browserfenster schmaler mache, passt sich der Inhalt nicht an. Das ist nicht gut. Wahrscheinlich geht es nicht ohne relative Größenangabe und man müsste versuchen, das Problem mit dem Ruckeln zu lösen.
 
Der Button liegt hinter dem Text, weil der Text absolut positioniert ist. Dies ist ein typisches Problem, wenn man mit absoluter Positionierung arbeitet. Daher ist davon abzuraten, es sei denn, eine Überdeckung ist ausdrücklich gewollt. Das ist in deinem Fall aber nicht der Fall.
Zum Vergrößern anklicken....
ok, hab ich rausgenommen.

Die kleinen feinen Optimierungen mache ich dann noch.

Problem jetzt noch, wie gesagt, dass bei Klick auf den Button die Seite nicht die Bildgalerie-Seite überlagert. Keine Ahnung warum, ist ja eine neue Seite.

Trifft das für die Seite unter dem letzten Link zu? Wenn ich am PC das Browserfenster schmaler mache, passt sich der Inhalt nicht an. Das ist nicht gut. Wahrscheinlich geht es nicht ohne relative Größenangabe und man müsste versuchen, das Problem mit dem Ruckeln zu lösen.
Zum Vergrößern anklicken....
Ja eben, daher hatte ich die Breite nicht in px angegeben. Im aktuellen Link ist das damit dann eben behoben. Ich kann aber gerade die px wieder ersetzen mit %, dann siehst Du das Problem. Die Galerie geht dann sozusagen nicht über die ganze Seite. Wie soll ich das erklären. Du siehst, dass dann die Produkte nicht mehr in der Mitte sind, sondern mit jedem Slide weiter rechts "hängen bleiben".
 
dann siehst Du das Problem. Die Galerie geht dann sozusagen nicht über die ganze Seite. Wie soll ich das erklären. Du siehst, dass dann die Produkte nicht mehr in der Mitte sind, sondern mit jedem Slide weiter rechts "hängen bleiben".
Zum Vergrößern anklicken....
Da brauche ich gar nicht mal mein Smartphone einzuschalten: Das Problem ist auch am PC (Opera) sichtbar. Versuche, die Breite auf 100vh zu setzen. Wenn ich das mit den Developertools mache, funktioniert es.

Problem jetzt noch, wie gesagt, dass bei Klick auf den Button die Seite nicht die Bildgalerie-Seite überlagert. Keine Ahnung warum, ist ja eine neue Seite.
Zum Vergrößern anklicken....
Wenn ich dich da richtig verstehe, müsste eine Lightbox das Mittel der Wahl sein. Sieh dir Fancybox an. Anscheinend gibt es inzwischen eine Version 3:
http://fancyapps.com/fancybox/3/docs/
Ermöglicht die Anzeige im iFrame und ist responsiv.
 
Versuche, die Breite auf 100vh zu setzen.
Zum Vergrößern anklicken....
Ok, das klappt super.

Die Sache mit der neuen Seite nicht im Vordergrund ergibt für mich aber keinen Sinn. Ich habe dieser sich öffnenden Seite mal explizit einen weißen Hintergrund gegeben, was schonmal geholfen hat. Aber der Footer (fixed) steht noch im Vordergrund.
Wie gesagt, es öffnet sich ja eine neue url und macht daher absolut keinen Sinn.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück