JQuery plugin ili neko slicno gotovo resenje

[sinisake]

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]

Originalno napisao sinisake

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:

$(function() {
  var slideshow = $('#slideshow'),
      content = $('#content');
  function resizeCallback() {
    slideshow.css({
      'margin-left': ((content.width() - slideshow.width())/2) + 'px'
    });
  }
  resizeCallback();
  $(window).on('resize', resizeCallback);
});

[sinisake]

Elegantno, kao i uvek.
Hvala lepo, sad jos samo da dodam ostatak, sa nadom da sam pogodio sta zapravo zele...

[sinisake]

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]

Hm... blizu sam... samo jos da se dotegne...
http://bybyweb.com/mealbook/

[sinisake]

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]

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:

$(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:

.not-active {
  filter: alpha(opacity=30);
       -khtml-opacity: .30;
         -moz-opacity: .30;
              opacity: .30;
}

[sinisake]

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]

Nema na čemu.
Sada videh ovo, umesto:

var elem = $(e.currentTarget);
    if(!elem.hasClass('slide_block')) {
      elem = elem.parentsUntil('.slide_block');   
    }

stavi:

var elem = $(this);

Zaboravo sam da izmenim.

[sinisake]

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