• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontale Website für eine Bildergalerie

M

Misanthrop

Mitglied
Hallo liebe Forumer,
ich habe hier mal ein Experiment unternommen für eine horizontale Website in der ich Bilder präsentieren möchte.
Ähnlich aufgebaut wie diese Website hier, die auch von einer Künstlerin ist: schönes Beispiel einer Künstlerwebsite
Dort kann man zum "scrollen" sowohl das Rad von der Maus bedienen als auch mit der Tastatur (die Pfeile für rechts & links).
Das finde ich gut so.
Hier bei dieser Künstlerwebsite: KünstlerwebsiteBeispiel nur mit der Tastatur scrollbar
kann man eben nur mit der Tastatur und dem nach rechts und linkszeigenden Pfeil eben scrollen.

Deshalb finde ich die Lösung vom ersten Link schönes Beispiel einer Künstlerwebsite ziemlich ansprechend.

Nun habe ich mal ein horizontales mit dem Mausrad scrollbare Version nachgebaut: Hier zur Ansicht: eigenes Beispiel einer mit dem Mausrad scrollbaren Website

Dies funktioniert auch schon ganz gut.

Aber ich komme nach einigen Experimenten nicht dahinter wie nun beides funktionieren kann.
Sowohl das Mausradscrollen als auch mit der Tastatur (die rechts & links Pfeilen eben!)

Was muss ich da ändern, das beides funktioniert. Wer hilft mir da weiter.

Nochmal der Link zu meiner DEMOsite : eigenes Beispiel einer mit dem Mausrad scrollbaren Website

Gruß der einsiedelnde
 
Ohne Scrollbar kann man nichts scrollen. Also ich meine ,wenn die Balken da sind, kann man meines Wissens immer mit den Tasten Scrollen , siehe hier
basti1012.bplaced.net

Horizontale Website für eine Bildergalerie

Horizontale Website für eine Bildergalerie ich habe hier mal ein Experiment unternommen für eine horizontale Website in der ich Bilder präsentieren möchte. Ähnlich aufgebaut wie diese Website hier, die auch von einer Künstlerin ist: <a href="http://www.justyna-janetzek.de/46/">schönes Beispiel...
basti1012.bplaced.net basti1012.bplaced.net
Will man trotzdem Scrollen ,ohne das man die Balken sieht ,dann muss man wohl mit Javascript nach helfen. Tasten auslesen und dann den Container verschieben.
Wie möchtest du es den überhaupt haben? Sollen die Balken sichtbar sein oder nicht?
Weil deine Beispielseite hat Balken und deine Seite mit dein Versuch eben nicht
 
Zuletzt bearbeitet:
Hallo,
also wie in diesem Beispiel: schönes Beispiel
Hier kann man sowohl mit dem Mouseweel scrollen in dem man das Weel hoch und runter bewegt (finde ich TOP!°)
ALS AUCH mit der Tastatur mit den entsprechenden Pfeilen eben.

Der Scrollbalken soll unter dem Bild sichtbar sein.

Mein Beispiel: Mein Beispiel das erweitert werden muss
soll eben mit der Scrollfunktion per Tastatur erweitert werden, der scrollbalken soll eben (unter dem Bild) sichtbar sein.

Gruß der einsiedelnde
 
Also nachdem ich mal bei deiner mitgeschickten Seite (wo beides funktioniert) reingeschaut habe,
wirst auch du in den Sources ein Javascript-File namens: Jquery.mousewheel.min.js
finden. Wie zu erwarten war, wird das hier also wahrscheinlich mit Javascript bzw. Jquery gemacht.

Das File ist minified. Nach dem rückgängig machen kommt dabei folgendes raus:
Javascript: 
! function(a) {
    "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a : a(jQuery)
}(function(a) {
    function b(b) {
        var g = b || window.event,
            h = i.call(arguments, 1),
            j = 0,
            l = 0,
            m = 0,
            n = 0,
            o = 0,
            p = 0;
        if (b = a.event.fix(g), b.type = "mousewheel", "detail" in g && (m = -1 * g.detail), "wheelDelta" in g && (m = g.wheelDelta), "wheelDeltaY" in g && (m = g.wheelDeltaY), "wheelDeltaX" in g && (l = -1 * g.wheelDeltaX), "axis" in g && g.axis === g.HORIZONTAL_AXIS && (l = -1 * m, m = 0), j = 0 === m ? l : m, "deltaY" in g && (m = -1 * g.deltaY, j = m), "deltaX" in g && (l = g.deltaX, 0 === m && (j = -1 * l)), 0 !== m || 0 !== l) {
            if (1 === g.deltaMode) {
                var q = a.data(this, "mousewheel-line-height");
                j *= q, m *= q, l *= q
            } else if (2 === g.deltaMode) {
                var r = a.data(this, "mousewheel-page-height");
                j *= r, m *= r, l *= r
            }
            if (n = Math.max(Math.abs(m), Math.abs(l)), (!f || f > n) && (f = n, d(g, n) && (f /= 40)), d(g, n) && (j /= 40, l /= 40, m /= 40), j = Math[j >= 1 ? "floor" : "ceil"](j / f), l = Math[l >= 1 ? "floor" : "ceil"](l / f), m = Math[m >= 1 ? "floor" : "ceil"](m / f), k.settings.normalizeOffset && this.getBoundingClientRect) {
                var s = this.getBoundingClientRect();
                o = b.clientX - s.left, p = b.clientY - s.top
            }
            return b.deltaX = l, b.deltaY = m, b.deltaFactor = f, b.offsetX = o, b.offsetY = p, b.deltaMode = 0, h.unshift(b, j, l, m), e && clearTimeout(e), e = setTimeout(c, 200), (a.event.dispatch || a.event.handle).apply(this, h)
        }
    }

    function c() {
        f = null
    }

    function d(a, b) {
        return k.settings.adjustOldDeltas && "mousewheel" === a.type && b % 120 === 0
    }
    var e, f, g = ["wheel", "mousewheel", "DOMMouseScroll", "MozMousePixelScroll"],
        h = "onwheel" in document || document.documentMode >= 9 ? ["wheel"] : ["mousewheel", "DomMouseScroll", "MozMousePixelScroll"],
        i = Array.prototype.slice;
    if (a.event.fixHooks)
        for (var j = g.length; j;) a.event.fixHooks[g[--j]] = a.event.mouseHooks;
    var k = a.event.special.mousewheel = {
        version: "3.1.12",
        setup: function() {
            if (this.addEventListener)
                for (var c = h.length; c;) this.addEventListener(h[--c], b, !1);
            else this.onmousewheel = b;
            a.data(this, "mousewheel-line-height", k.getLineHeight(this)), a.data(this, "mousewheel-page-height", k.getPageHeight(this))
        },
        teardown: function() {
            if (this.removeEventListener)
                for (var c = h.length; c;) this.removeEventListener(h[--c], b, !1);
            else this.onmousewheel = null;
            a.removeData(this, "mousewheel-line-height"), a.removeData(this, "mousewheel-page-height")
        },
        getLineHeight: function(b) {
            var c = a(b),
                d = c["offsetParent" in a.fn ? "offsetParent" : "parent"]();
            return d.length || (d = a("body")), parseInt(d.css("fontSize"), 10) || parseInt(c.css("fontSize"), 10) || 16
        },
        getPageHeight: function(b) {
            return a(b).height()
        },
        settings: {
            adjustOldDeltas: !0,
            normalizeOffset: !0
        }
    };
    a.fn.extend({
        mousewheel: function(a) {
            return a ? this.bind("mousewheel", a) : this.trigger("mousewheel")
        },
        unmousewheel: function(a) {
            return this.unbind("mousewheel", a)
        }
    })
});
Das sieht mir also sehr danach aus, als wenn sie per Javascript die Scrollpositionen auslesen und dann erhöhen oder erniedrigen.
Das würde ebenfalls das Ruckeln erklären.

Mit den Tasten brauchst du ja nichts machen, solange die Scrollbalken da sind, was, wenn ich dich richtig verstanden habe, eh dein Plan war:
Misanthrop schrieb:
Der Scrollbalken soll unter dem Bild sichtbar sein.
Zum Vergrößern anklicken....

Um mit dem Mauswheel steuern zu können, müsstest du dir dann dein eigenes kleines Script schreiben.
Ist nicht sonderlich kompliziert und es gibt natürlich in diversen threads in Foren (Stackoverflow, etc.) schon Antworten auf diese Frage, da muss ich ja jetzt nichts copy & pasten.
 
Du brauchst doch nur das Script auf deiner Seite einfügen. Ich habe das mal mit einer div box gemacht.
basti1012.bplaced.net

Horizontale Website für eine Bildergalerie

Horizontale Website für eine Bildergalerie ich habe hier mal ein Experiment unternommen für eine horizontale Website in der ich Bilder präsentieren möchte. Ähnlich aufgebaut wie diese Website hier, die auch von einer Künstlerin ist: <a href="http://www.justyna-janetzek.de/46/">schönes Beispiel...
basti1012.bplaced.net basti1012.bplaced.net
Du siehst da ist nur der Code von @Aaron3219 und die eine Zeile aus den Quellcode reinkopiert und das wahrs.
Ich würde dir den ja in deiner Seite einbauen aber immer wenn ich deine Seite betrette stürzt mein Browser ab. Ich habe keine ahnung was das soll. Ich kann auch nicht mal die developer Tools starten um zu kucken was da los ist ,weil vorher alles abschmiert bei mir.
Ich glaube ich brauche einen neuen Browser
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben