Autor Zpráva
Tanaris
Profil
Když jsem testoval web tak mi v prohlížečích jede v pohodě, ale galerie obrázků, kterou mám vytvořenou s overflow vertikální lištou na mobilech nefunguje. Scroll lišta tam prostě není. Působí to pak nepěkný efekt, protože se mi obrázkové začíná opakovat a stránka se nepříjemně roztahuje. Dá se scroll lišta něják nahradit javascriptem nebo nějákým kódem v jquerry?

Takto vypadá pro zajímavost css, které na galerii používám

#fotky {
float: none;
top: 270px;
padding-right: 30px;
padding-left: 30px;
overflow: auto;
height: 320px;
background-color: rgb(102,0,0);
margin: 40px 20px 20px 20px;
box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
-moz-box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
-webkit-box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
-o-box-shadow: 5px -3px 0 0 rgba(0,0,0,1);
border-radius:7px 7px 0px 0px;  
-moz-radius:7px 7px 0px 0px; 
-webkit-radius:7px 7px 0px 0px;
-o-radius:7px 7px 0px 0px;

}  
soucekgns
Profil
Tanaris:
Je to tu zas. Mobilní prohlížeče (určitě opera, nevím jak další) overflow ignorují, protože se to velmi špatně ovládá na dotykovém displeji.
Nejelegantnějším řešením je pro mobily stránku upravit a vloženému scrollování se vyhnout. Nebo stávající scrollování předělat na carousel a tam již v kombinaci overflow hidden a absolutní pozice vše funguje všude.

Pokud jsem tě nepřesvědčil a stále chceš vertikální scrollování, zde je js knihovna jScrollPane (vyzkoušeno v mobilním chromu .. nevím jak to funguje v mobilní opeře), s kterou jde scrollovat i tam, kde není overflow podporováno (tj. i starší IE atd..)
Tanaris
Profil
Možnost carousel se mi zamlouvá více. Mohl bys mi ještě poradit jak by měl script přibližně vypadat?


Našel jsem tenhle návod http://www.gjszlin.cz/ivt/esf/php/php-jquery-iii.php , ale potřeboval bych ten kód upravit tak, aby ta galerie vypadala podobě jako tady http://kb.cz/ , ale rolovala by se vertikálně dolů a bylo by vidět 2 řady fotek a po kliknutí na šipku by to sjelo o další 2 řady. Zkouším si ten kód všelijak upravovat, ale nejde mi dosáhnout požadovaného výsledku.
soucekgns
Profil
Jednou jsem si napsal svůj script inspirovaný circular-content-carousel, který se při změně okna přizpůsobuje stránce:
<script>
TS.Slideshow = {
    set : {},
    init: function(el, opt) {
        var t = $(el), s = t.find(".slides"), i = s.children(".slide");
        set = {
            speed: 500, // speed of rotation
            show: 3, // number of displayed slides
            scroll: 1, // number of slides scrolled each time
            easing: "easeOutExpo", // type of easing
            minwidth: 180, // minimal width of slide (can be smaler if there is only 1 slide)
            minheight: 250, // used to calculate slide aspect ratio
            slidemargin: 5, // margin of slide
            length: i.length,
            window: t.width()
        };
        if (opt) $.extend(set, opt);
// Tlačítka k pohybování carouselu
        if (set.length > set.show) t.prepend('<div class="slide-nav"><span class="nav-prev">Previous</span><span class="nav-next">Next</span></div>');    
        var nPrev = t.find("span.nav-prev"), nNext = t.find("span.nav-next");
// Uložení výchozích hodnot
        var save = {
            show: set.show,
            scroll: set.scroll
        };
// Samotné zobrazení carouselu (s opakováním při resize)
        $(window).bind("resize", function() {
            set.window = t.find(".slides").width();
            set.show = save.show;
// Zmenšení počtu zobrazovaných slidů při úzké obrazovce
            if (set.window/set.show < set.minwidth+2*set.slidemargin) {
                set.show = Math.floor(set.window/(set.minwidth+2*set.slidemargin));
                if (set.show < 1) set.show = 1;
            }
            set.scroll = save.scroll;
            if (set.scroll > set.show) set.scroll = set.show;
// Spočítání výšky a šířky slidu
            set.width = Math.round(set.window/set.show);
            set.height = Math.round(set.minheight*set.width/set.minwidth);
// Nastavení pozice pro všechny slidy
            s.children(".slide").each(function(x) {
                $(this).css({
                    position: "absolute",
                    left: (x * set.width),
                    width: set.width-2*set.slidemargin,
                    height: set.height-2*set.slidemargin
                });
            });
            t.height(set.height);
        }).trigger("resize");

// Přiřazení funkce na posunutí carouselu tlačítkům
        nPrev.bind("click", function() {
            if (set.anim) return false;
            set.anim = true;
            TS.Slideshow.nav(-1, s);
        });

        nNext.bind("click", function() {
            if (set.anim) return false;
            set.anim = true;
            TS.Slideshow.nav(1, s);
        });
// Carousel se bude scrollovat i při scrollování myší nad slideshow (vyžaduje jquery.mousewheel.js)
        t.bind("mousewheel", function(e, delta) {
            if(delta > 0) {
                if (set.anim) return false;
                set.anim = true;
                TS.Slideshow.nav(-1, s);
            }
            else {
                if (set.anim) return false;
                set.anim = true;
                TS.Slideshow.nav(1, s);
            }
            return false;
        });
    },
// Scrollování
    nav: function(dir, s) {
// Naklonování nových slidů, aby se dalo scrollovat dokola
// Směr další (doprava)
        if (dir == 1) {
            s.find("div.slide:lt("+ set.scroll +")").each(function(x) {
                $(this).clone(true).css("left", (set.length + x) * set.width).appendTo(s);
            });
        }
// Směr předchozí (doleva)
        else {
            var insertBefore = s.children(".slide").eq(0);
            s.find("div.slide:gt("+ (set.length  - 1 - set.scroll) +")").each(function(x) {
                $(this).clone(true).css("left", - (set.scroll - x) * set.width).insertBefore(insertBefore);
            });
        }

        s.find("div.slide").each(function(i) {
            var t = $(this);
// Posunutí slidů (zobrazení dalších)
            t.stop().animate({
                left : ((dir == 1) ? "-=" : "+=") + set.width * set.scroll
            }, set.speed, set.easing, function() {
// Po posunutí odstraň nepotřebné klony (aby slidů bylo pořád jen výchozí počet a nezatěžovalo paměť)
                if ((dir == 1 && t.position().left < 0) || (dir == -1 && t.position().left > (set.length - 1) * set.width)) {
                    t.remove();
                }                        
                set.anim = false;
            });
        });
    }
};


// INICIALIZACE
TS.Slideshow.init("#slideshow");
</script>


// HTML
    <div id="slideshow">
        <div class="slides">
            <div class="slide">
                <a href="#" class="wrapper">
                    <img src="img/a.JPG">
                    <div class="text"></div>
                </a>
            </div>
            <div class="slide">
                <a href="#" class="wrapper">
                    <img src="img/b.JPG">
                    <div class="text"></div>
                </a>
            </div>
        </div>
    </div>


// CSS
#slideshow {
    position: relative;
    max-width: 900px;
    height: 400px;

    margin: 0 auto;
    padding: 0 30px;
}
.slides {
    position: relative;
    width: 100%;
    height: 100%;

    overflow: hidden;
}
.slides .slide {
    margin: 5px;
}
#slideshow .slide-nav span {
    display: block;

    position: absolute;
    top: 50%;
    left: -5px;
    width: 27px;
    height: 48px;

    margin-top: -24px;
    background: url(arrows.png);
    text-indent: -9000px;
    cursor: pointer;
}
#slideshow .slide-nav span.nav-next {
    left: auto;
    right: -5px;
    background-position: 27px 0;
}

Snad ti to pomůže
Tanaris
Profil
Mám v tom trošku guláš, protože ve scriptech se moc nevyznám. Do téhle části místo toho tvého odkazu dám své vlastní obrázky?

<a href="#" class="wrapper">
                    <img src="img/a.JPG">
                    <div class="text"></div>
                </a>
            </div>
            <div class="slide">
                <a href="#" class="wrapper">
                    <img src="img/b.JPG">
                    <div class="text"></div>
                </a>
margin
Profil *
Obrázky » Img
Chamurappi
Profil
Reaguji na soucekgnse:
Tvůj skript pracuje s globální proměnnou set, nikoliv se zbytečně předpřipravenou TS.Slideshow.set.
Moc nerozumím všemu tomu klonování a pozicování… už jsem kdysi nekonečný kolotoč psal a stačilo na to jedno měnění souřadnice a jedno přehazování prvku z konce na začátek (nebo naopak).


Reaguji na Tanarise:
Scroll lišta tam prostě není. Působí to pak nepěkný efekt, protože se mi obrázkové začíná opakovat a stránka se nepříjemně roztahuje.
Obrázkové se ti začínají opakovat? Tohle není moc obvyklý projev problému, většinou prostě jen nejde rolovat a obsah je useknutý. Ukázku máš?
Mimochodem, „nějak“ se píše bez čárky nad A, jQuery se píše s jedním R.

Možnost carousel se mi zamlouvá více.
Jestli na stránce s galerií není nic jiného než galerie, tak bych tam podobná udělátka necpal.
Tanaris
Profil
Dal jsem si tam tohle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  
  <link href="C:/Users/Peta/Desktop/styly.css" rel="stylesheet" type="text/css" />
  
  

  
 <script>
TS.Slideshow = {
    set : {},
    init: function(el, opt) {
        var t = $(el), s = t.find(".slides"), i = s.children(".slide");
        set = {
            speed: 500, // speed of rotation
            show: 3, // number of displayed slides
            scroll: 1, // number of slides scrolled each time
            easing: "easeOutExpo", // type of easing
            minwidth: 180, // minimal width of slide (can be smaler if there is only 1 slide)
            minheight: 250, // used to calculate slide aspect ratio
            slidemargin: 5, // margin of slide
            length: i.length,
            window: t.width()
        };
        if (opt) $.extend(set, opt);
// Tlačítka k pohybování carouselu
        if (set.length > set.show) t.prepend('<div class="slide-nav"><span class="nav-prev">Previous</span><span class="nav-next">Next</span></div>');    
        var nPrev = t.find("span.nav-prev"), nNext = t.find("span.nav-next");
// Uložení výchozích hodnot
        var save = {
            show: set.show,
            scroll: set.scroll
        };
// Samotné zobrazení carouselu (s opakováním při resize)
        $(window).bind("resize", function() {
            set.window = t.find(".slides").width();
            set.show = save.show;
// Zmenšení počtu zobrazovaných slidů při úzké obrazovce
            if (set.window/set.show < set.minwidth+2*set.slidemargin) {
                set.show = Math.floor(set.window/(set.minwidth+2*set.slidemargin));
                if (set.show < 1) set.show = 1;
            }
            set.scroll = save.scroll;
            if (set.scroll > set.show) set.scroll = set.show;
// Spočítání výšky a šířky slidu
            set.width = Math.round(set.window/set.show);
            set.height = Math.round(set.minheight*set.width/set.minwidth);
// Nastavení pozice pro všechny slidy
            s.children(".slide").each(function(x) {
                $(this).css({
                    position: "absolute",
                    left: (x * set.width),
                    width: set.width-2*set.slidemargin,
                    height: set.height-2*set.slidemargin
                });
            });
            t.height(set.height);
        }).trigger("resize");
 
// Přiřazení funkce na posunutí carouselu tlačítkům
        nPrev.bind("click", function() {
            if (set.anim) return false;
            set.anim = true;
            TS.Slideshow.nav(-1, s);
        });
 
        nNext.bind("click", function() {
            if (set.anim) return false;
            set.anim = true;
            TS.Slideshow.nav(1, s);
        });
// Carousel se bude scrollovat i při scrollování myší nad slideshow (vyžaduje jquery.mousewheel.js)
        t.bind("mousewheel", function(e, delta) {
            if(delta > 0) {
                if (set.anim) return false;
                set.anim = true;
                TS.Slideshow.nav(-1, s);
            }
            else {
                if (set.anim) return false;
                set.anim = true;
                TS.Slideshow.nav(1, s);
            }
            return false;
        });
    },
// Scrollování
    nav: function(dir, s) {
// Naklonování nových slidů, aby se dalo scrollovat dokola
// Směr další (doprava)
        if (dir == 1) {
            s.find("div.slide:lt("+ set.scroll +")").each(function(x) {
                $(this).clone(true).css("left", (set.length + x) * set.width).appendTo(s);
            });
        }
// Směr předchozí (doleva)
        else {
            var insertBefore = s.children(".slide").eq(0);
            s.find("div.slide:gt("+ (set.length  - 1 - set.scroll) +")").each(function(x) {
                $(this).clone(true).css("left", - (set.scroll - x) * set.width).insertBefore(insertBefore);
            });
        }
 
        s.find("div.slide").each(function(i) {
            var t = $(this);
// Posunutí slidů (zobrazení dalších)
            t.stop().animate({
                left : ((dir == 1) ? "-=" : "+=") + set.width * set.scroll
            }, set.speed, set.easing, function() {
// Po posunutí odstraň nepotřebné klony (aby slidů bylo pořád jen výchozí počet a nezatěžovalo paměť)
                if ((dir == 1 && t.position().left < 0) || (dir == -1 && t.position().left > (set.length - 1) * set.width)) {
                    t.remove();
                }                        
                set.anim = false;
            });
        });
    }
};
 
 
// INICIALIZACE
TS.Slideshow.init("#slideshow");
</script>
  
  </head>
  <body>

  
 
 
    <div id="slideshow">
        <div class="slides">
            <div class="slide">
                <a href="#" class="wrapper">
                     
                    <img src="stranky/pictures/fotogalerie_sluzeb/0019.jpg" />
                    
                    
                    <div class="text"></div>
                </a>
            </div>
            
            <div class="slide">
                <a href="#" class="wrapper">
                     
                    <img src="stranky/pictures/fotogalerie_sluzeb/0019.jpg" />
                    
                    
                    <div class="text"></div>
                </a>
            </div>
            
            <div class="slide">
                <a href="#" class="wrapper">
                     
                    <img src="stranky/pictures/fotogalerie_sluzeb/0019.jpg" />
                    
                    
                    <div class="text"></div>
                </a>
            </div>
            
            <div class="slide">
                <a href="#" class="wrapper">
                     
                    <img src="stranky/pictures/fotogalerie_sluzeb/0019.jpg" />
                    
                    
                    <div class="text"></div>
                </a>
            </div>
            <div class="slide">
                <a href="#" class="wrapper">
                     
                    <img src="stranky/pictures/fotogalerie_sluzeb/0019.jpg" />
                </a>
            </div>
        </div>
    </div>
 
 



  </body>
</html>

ale šipky ani žádné rolování mi nefunguje jen se zobrazí obrázky
soucekgns
Profil
Chamurappi:
Ano, pro tenhle případ je TS.Slideshow zbytečnost, ale nepředpokládal jsem že to bude použito 1:1.
Moc nerozumím všemu tomu klonování a pozicování
Tak pozicování je klasicky jen left: +-směr + počet scrollovaných slidů*šířka slidu
Klonování je napsané takto, protože není pevně daný počet scrollovaných slidů na jeden klik.. pokud znáte lepší řešení, rád se přiučím:)

Tanaris:
Jak píše Chamurappi, tak používat TS.Slideshow v tomto případě je nesmysl. A aby ti tohle vůbec fungovalo, tak musíš ještě TS specifikovat
var TS = {};
Chamurappi
Profil
Reaguji na soucekgnse:
Ano, pro tenhle případ je TS.Slideshow zbytečnost
To jsem nepsal. Upozorňoval jsem, že používáš (varem nedeklarovanou) globální proměnnou jménem set.

Tak pozicování je klasicky jen left: +-směr + počet scrollovaných slidů*šířka slidu
Pokud jsou naskládané vedle sebe, nebo pod sebou, tak stačí hýbat jen jedním, ne? Není nutné je absolutně pozicovat.

Klonování je napsané takto, protože není pevně daný počet scrollovaných slidů na jeden klik
Pokud není možné, aby byl jeden slajd vidět zároveň dvakrát, je zbytečné ho klonovat, stačí je přesouvat.
soucekgns
Profil
Chamurappi:
Díky za rady

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: