Ahojte,
potreboval bych vytvorit galerku podobnou jako je tahle http://www.kriesi.at/themes/enfold/port ... ?skin=Cyan
Nepotrebuju aby tam neco vyjizdelo. Potrebuju jen obrazky ktere se pri zmene velikosti okna budou zmensovat ale zachovaji si proporce. Vite jak to myslim ze?
Mate s tim nekdo zkusenoti?
Masonry responsive gallery "nakonec flexImages"
Re: Masonry responsive gallery
css media query pre zadefinovanie breakpointov, nejaky responzivny grid a animacia je asi len obycajny css3 transition
-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery
Sharky, nasel jsem si jiny plugin ktery to resi plus minus tak jak potrebuju akorat mam jeden problem. Potrebuju nacist realnou velikost obrazku a zapsat ji do atributu data. Akorat se mi nedar zmerit velikost vsech tech obrazku.V nekterych pripadech mi to dalo velikost obrazku az po zmacknuti F5. Zkousel jsem i funkci each().on('load',.... ale nejak to nechce fungovat 
Tusis jak by se to dalo zapsat aby to fungovalo? Nebo tusi i nekdo jiny jak?
Muj kod vypada zatim takto:
Tusis jak by se to dalo zapsat aby to fungovalo? Nebo tusi i nekdo jiny jak?Muj kod vypada zatim takto:
Kód: Vybrať všetko
<script type="text/javascript" src="/design/js/flex/jquery.flex-images.js"></script>
<script type="text/javascript">
$( function() {
$('#demo1 .item img').on('load', function(){
var iw = $(this).width();
var ih = $(this).height();
$(this).closest('.item').attr('data-w', iw);
$(this).closest('.item').attr('data-h', ih);
});
$('#demo1').flexImages({
rowHeight: 468
});
});
</script>
Kód: Vybrať všetko
<div style="max-width:936px">
<div id="demo1" class="flex-images">
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/936x468.jpg" alt="" /></a>
</div>
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/campaigne-separator.jpg" alt="" /></a>
</div>
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/624x468.jpg" alt="" /></a>
</div>
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/312x468.jpg" alt="" /></a>
</div>
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/624x468.jpg" alt="" /></a>
</div>
<div class="item" data-w="" data-h="">
<a href=""><img src="/design/img/312x468.jpg" alt="" /></a>
</div>
</div>
</div>
-
*****HERO*****
Guru wannabe
- Príspevky: 2446
- Registrovaný: 08 máj 2006, 1:34
Re: Masonry responsive gallery
obrazky sa defaultne cachuju browserom a "onload" event sa ti na nich odpali len vtedy, ked sa stiahnu zo servera a nie vtedy, ked sa nacitaju z cache
-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery
A co to pro me tada znamena? 
-
*****HERO*****
Guru wannabe
- Príspevky: 2446
- Registrovaný: 08 máj 2006, 1:34
Re: Masonry responsive gallery
pre teba to teda znamena, ze musis najst alternativu .. 
Image ma ako DOM instancia bool property "complete", ktora urcuje, ci uz je nacitany alebo nie, takze mozes vyuzit to
napr takto nejak
Image ma ako DOM instancia bool property "complete", ktora urcuje, ci uz je nacitany alebo nie, takze mozes vyuzit to
napr takto nejak
Kód: Vybrať všetko
function imgOnLoadHandler($img) {
//tvoja funkcia, ktora sa ma odpalit po nacitani obrazku
$img.closest('.item').attr('data-w', $img.width()).attr('data-h', $img.height());
}
$(function () {
$('img').each(function () {
var $img = $(this);
if (this.complete) {
imgOnLoadHandler($img);
} else {
$img.load(function(){
imgOnLoadHandler($img);
});
}
});
}-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery
Tak jsem to udelal takto. Data se naplni sirkou a vyskou, avsak "flexImages" vypise jen height az po zmacknuti F5 se data nactou spravne a cely plugin zacne fungovat jak ma. Netusis cim to muze byt?
Pred zmacknutim F5
Po zmacknuti F5
Pred zmacknutim F5
Kód: Vybrať všetko
<div class="item" data-h="468" data-w="936" style="height: 468px;">Kód: Vybrať všetko
<div class="item" data-h="468" data-w="936" style="width: 936px; height: 468px;">Kód: Vybrať všetko
<script type="text/javascript">
function imgOnLoadHandler($img) {
//tvoja funkcia, ktora sa ma odpalit po nacitani obrazku
$img.closest('.item').attr('data-w', $img.width()).attr('data-h', $img.height());
}
$(function () {
$('img').each(function () {
var $img = $(this);
if (this.complete) {
imgOnLoadHandler($img);
} else {
$img.load(function(){
imgOnLoadHandler($img);
});
}
});
$('#demo1').flexImages({
rowHeight: 468
});
});
</script>
-
*****HERO*****
Guru wannabe
- Príspevky: 2446
- Registrovaný: 08 máj 2006, 1:34
Re: Masonry responsive gallery
asi to flexImages musis zavolat az potom, ako budes mat tie data-w/data-h parametre naplnene. cize si sprav nejaky counter (premennu) a v tej funckii imgOnLoadHandler ho inkrementuj o 1. ked sa bude rovnat poctu obrazkov, znamena to, ze su vsetky obrazky pripravene a mozes to zavolat.
dalsia moznost je si tie parametre naplnit na strane servera a vratit uz komplet tvar <div class="item" data-w="456" data-h="123">
dalsia moznost je si tie parametre naplnit na strane servera a vratit uz komplet tvar <div class="item" data-w="456" data-h="123">
-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery
To bych velmi rad udelal ale rozumim asi tak pulce vyrazu ktere jsi pouzil
neco takoveho?
//autoeditácia príspevku (07 Feb 2015, 16:38)
Muzete mi to nekdo prosim napsat nebo se z toho fakt,....
//autoeditácia príspevku (07 Feb 2015, 19:16)
Takhle si to myslel?
neco takoveho?
Kód: Vybrať všetko
function imgOnLoadHandler($img) {
$img.closest('.item').attr('data-w', $img.width()).attr('data-h', $img.height());
var $count = $img++;
}
Muzete mi to nekdo prosim napsat nebo se z toho fakt,....
//autoeditácia príspevku (07 Feb 2015, 19:16)
Takhle si to myslel?
Kód: Vybrať všetko
<script type="text/javascript">
$(function () {
var imageTotal = $('.flex-images .item img').length;
var imageCount = 0;
function imgOnLoadHandler($img) {
$img.closest('.item').attr('data-w', $img.width()).attr('data-h', $img.height());
if(++imageCount == imageTotal) {
$('.flex-images').flexImages({
rowHeight: 468
});
}
}
$('.flex-images .item img').each(function () {
var $img = $(this);
if (this.complete) {
imgOnLoadHandler($img);
} else {
$img.load(function(){
imgOnLoadHandler($img);
});
}
});
});
</script>-
*****HERO*****
Guru wannabe
- Príspevky: 2446
- Registrovaný: 08 máj 2006, 1:34
Re: Masonry responsive gallery
hej, presne tak nejak a? facha to?
a? facha to?-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery
Ano, funguje to 
Akorat muzes mi prosim vysvetlit jaky je rozdil mezi ++imageCount a imageCount++.? Jako prvni jsem tam daval prave to imageCount++ a to nefungovalo.
Akorat muzes mi prosim vysvetlit jaky je rozdil mezi ++imageCount a imageCount++.? Jako prvni jsem tam daval prave to imageCount++ a to nefungovalo.
-
audiotrack
VIP
- Príspevky: 25958
- Registrovaný: 09 sep 2005, 18:39
- Kontaktovať používateľa:
Re: Masonry responsive gallery
++imageCount najprv inkrementuje hodnotu o 1, a túto novú hodnotu použije
imageCount++ použije hodnotu, a následne ju inkrementuje o 1
imageCount++ použije hodnotu, a následne ju inkrementuje o 1
-
fikotek
King
- Príspevky: 1618
- Registrovaný: 21 dec 2004, 16:13
- Bydlisko: Zamilovany :-)
- Kontaktovať používateľa:
Re: Masonry responsive gallery "nakonec flexImages"
Dekuju audio za vysvetleni.