 |
|
| sinisake |
01. 02. 2013. 17:17 |
JQuery plugin ili neko slicno gotovo resenje
Treba da se odradi redizajn (i jos stosta) jednog sajta... ovde je link:
http://bybyweb.com/mealbook/
Ideja za header 'slideshow' je ovo:
Dakle, 3 bloka, svaki po 4 slike, srednji blok centriran, a preostala dva sa umanjenim opacityjem, levo i desno od njega (vidljivost zavisi od rezolucije, je l...)...
E, sad, trebalo bi na hover (i levo, i desno), da se slike (blokovi) pomeraju i da se menja opacity: hover desno - desni blok dolazi u centar, ostali se pomeraju u skladu s tim... nadam se da ste razumeli...
Moje pitanje je postoji li neki plugin za ovakve i slicne akcije, koji bi odradio i centriranje i ostalo; ne verujem da je ovo 100% originalna ideja, mislim da su klijenti to, ili nesto vrlo slicno vec videli negde, pa ako ste se slucajno sretali sa slicnim zahtevima, cenio bih pomoc. :)
Ako sam osudjen na potpuno custom resenje: imam problem sa centriranjem na svim rezolucijama, posto je sirina slideshowa 3000 px, a taj srednji div treba vec u startu centrirati...
Hvala! |
| Br@nkoR |
01. 02. 2013. 19:12 |
Citat:
Originalno napisao sinisake
(Napišite 109848)
imam problem sa centriranjem na svim rezolucijama, posto je sirina slideshowa 3000 px, a taj srednji div treba vec u startu centrirati...
|
Nešto kao:
Kôd:
$(function() {
var slideshow = $('#slideshow'),
content = $('#content');
function resizeCallback() {
slideshow.css({
'margin-left': ((content.width() - slideshow.width())/2) + 'px'
});
}
resizeCallback();
$(window).on('resize', resizeCallback);
});
|
| sinisake |
01. 02. 2013. 19:33 |
Elegantno, kao i uvek. ;)
Hvala lepo, sad jos samo da dodam ostatak, sa nadom da sam pogodio sta zapravo zele... :)
|
| sinisake |
02. 02. 2013. 11:12 |
E, jbg... ne ide ovo meni... :(
Ne znam kako da odradim ono sto sam opisao gore, a nisam nasao ni zgodan plugin...
Ne znam sta da radim uopste, i da li ce ova html/css struktura zapravo morati da se menja...
Probao sam sa animiranjem margine kompletnog slideshowa, medjutim, ne mogu da zaustavim animaciju na odredjenoj tacki, probao sam neke hover carousel plugine, nece ni da mrdnu, pretpostavljam da html/css ne odgovara...
Ako neko ima savet, ideju, link, sta god... hvala!
|
| sinisake |
02. 02. 2013. 12:35 |
|
| sinisake |
02. 02. 2013. 13:34 |
Hm... ovo ce mi sranje oduzeti vise vremena i zivaca no sto sam mislio...
Elem... animacija bi trebalo da se pokrece na hover, no - nakon prve - sve staje... takodje, mislim da sam event (hover) nije bas najsrecnije resenje, trebala bi mi mozda neka simulacija... ako neko ima vremena da gvirne u kod i baci koju korisnu, krasno! :)
|
| Br@nkoR |
02. 02. 2013. 13:39 |
Još sinoć počeo da pišem, pa videh da je problem samo centriranje.
Nešto na brzinu, moglo bi ovo i drugačije,
javascript :
Kôd:
$(function() {
var slideshow = $('#slideshow'),
content = $('#content');
function resizeCallback() {
slideshow.css({
'margin-left': ((content.width() - slideshow.width())/2) + 'px'
});
}
resizeCallback();
$(window).on('resize', resizeCallback);
$('.slide_block:even').addClass('not-active');
slideshow.on('click', '.not-active a', function(e) {
e.preventDefault();
}).on('mouseover', '.not-active', function(e) {
var elem = $(e.currentTarget);
if(!elem.hasClass('slide_block')) {
elem = elem.parentsUntil('.slide_block');
}
elem.removeClass('not-active');
$('.slide_block').not(elem).addClass('not-active');
switch(elem.attr('id')) {
case 'block1':
var margineLeft = (content.width() - 1000)/2;
break;
case 'block2':
var margineLeft = (content.width() - slideshow.width())/2;
break;
case 'block3':
var margineLeft = (content.width() - slideshow.width())/2 - 1000;
break;
}
slideshow.stop().animate({
'margin-left': margineLeft + 'px'
}, 1300);
});
});
css:
Kôd:
.not-active {
filter: alpha(opacity=30);
-khtml-opacity: .30;
-moz-opacity: .30;
opacity: .30;
}
|
| sinisake |
02. 02. 2013. 13:51 |
Br@nko, care, fala, sad cu da metim ovaj kod na stranu, pa da vidim...
(centriranje sam resio u medjuvremenu, ne bas tako elegantno, no ostale neke druge stvari...) :)
Carski, flawless, sto bi Anglosaksonci rekli!!!
|
| Br@nkoR |
02. 02. 2013. 14:15 |
Nema na čemu.
Sada videh ovo, umesto:
Kôd:
var elem = $(e.currentTarget);
if(!elem.hasClass('slide_block')) {
elem = elem.parentsUntil('.slide_block');
}
stavi:
Zaboravo sam da izmenim. |
| sinisake |
02. 02. 2013. 21:15 |
Hvala mnogo! Cekam da se jave... bice tu mnogo akcija na hover... i te velike slike u blokovima, treba (valjda, jos nisam siguran!) na hover da prikazu onaj beli box (random kategorija sa 3 random recepta), pa onda i ovi thumbovi... na hover treba da se pojavi transparent box sa imenom i srcetom™... (nesto kao like)...
http://www.backslash.gr/demos/conten...jquery-plugin/
Vec vidim da ce ovo da jede resurse (svaka strana najmanje dva slideshowa), i da ce morati da padne kesiranje, ali o tome u drugoj temi... :D |
| Vreme je GMT +2. Trenutno vreme je 13:34. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.