| Autor | Zpráva | ||
|---|---|---|---|
| Tanaris Profil |
#1 · Zasláno: 4. 5. 2013, 10:57:27
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 |
#2 · Zasláno: 4. 5. 2013, 11:34:54
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 |
#3 · Zasláno: 4. 5. 2013, 15:59:53 · Upravil/a: Tanaris
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 |
#5 · Zasláno: 4. 5. 2013, 18:07:29
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 * |
#6 · Zasláno: 4. 5. 2013, 18:20:50
|
||
| Chamurappi Profil |
#7 · Zasláno: 4. 5. 2013, 18:40:53
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 |
#10 · Zasláno: 5. 5. 2013, 22:44:21
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 |
#11 · Zasláno: 7. 5. 2013, 21:55:31
Chamurappi:
Díky za rady |
||
|
Časová prodleva: 12 let
|
|||
0