DevProTalk

Forumi IT profesionalaca
web development, web design, e-business, SEO


Idite nazad   DevProTalk > Web development i web aplikacije > (X)HTML, JavaScript, DHTML, XML, CSS
Želite da se reklamirate ekskluzivno na ovoj poziciji? Javite se

(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi

Odgovori
 
Alati teme Način prikaza
Staro 01. 02. 2013.   #1
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default 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!
sinisake je offline   Odgovorite uz citat
Staro 01. 02. 2013.   #2
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Citat:
Originalno napisao sinisake Pogledajte poruku
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);
});
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
"Hvala" Br@nkoR za poruku:
Staro 01. 02. 2013.   #3
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

Elegantno, kao i uvek.
Hvala lepo, sad jos samo da dodam ostatak, sa nadom da sam pogodio sta zapravo zele...
sinisake je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #4
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

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 je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #5
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

Hm... blizu sam... samo jos da se dotegne...
http://bybyweb.com/mealbook/
sinisake je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #6
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

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!
sinisake je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #7
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

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;
}
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
"Hvala" Br@nkoR za poruku:
Staro 02. 02. 2013.   #8
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

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!!!

Poslednja izmena od sinisake : 02. 02. 2013. u 14:54.
sinisake je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #9
Br@nkoR
banned
Professional
 
Avatar Br@nkoR
 
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
Br@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoroBr@nkoR će postati "faca" uskoro
Default

Nema na čemu.
Sada videh ovo, umesto:
Kôd:
var elem = $(e.currentTarget);
    if(!elem.hasClass('slide_block')) {
      elem = elem.parentsUntil('.slide_block');   
    }
stavi:
Kôd:
var elem = $(this);
Zaboravo sam da izmenim.
__________________
Don't look at me; I'm lost too.
“If you can't dazzle them with brilliance, baffle them with bul*s**t.”
Br@nkoR je offline   Odgovorite uz citat
Staro 02. 02. 2013.   #10
sinisake
član
Certified
 
Datum učlanjenja: 26.07.2008
Poruke: 76
Hvala: 15
296 "Hvala" u 10 poruka
sinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished roadsinisake is on a distinguished road
Default

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...
sinisake je offline   Odgovorite uz citat
Odgovori


Alati teme
Način prikaza

Pravila pisanja
Možete ne započinjati nove teme
Možete ne slati odgovore
Možete ne slati priloge
Možete ne izmeniti svoje poruke
vB kôd je Uključen
Smajliji su Uključen
[IMG] kod je Uključen
HTML kôd je Isključen
Pogledajte forum


Vreme je GMT +2. Trenutno vreme je 11:38.


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.