Posted By

smartweb on 08/20/10


Tagged

slide photo galleries


Versions (?)

JCoverFlip


 / Published in: jQuery
 

jCoverFlip: permet de présenter les images et le contenu associé à un élément pour créer facilement des interfaces de type coverflow.\r\npermet de glisser ou cliquez sur la fonctionnalité de mettre en valeur en vedette des éléments de contenu sur demande par l\'utilisateur.

  1. jQuery(document).ready(function(){
  2. jQuery('#flip').jcoverflip({
  3. current: 4,
  4. beforeCss: function(el, container, offset){
  5. return [$.jcoverflip.animationElement(el, {
  6. left: (container.width() / 2 - 268 - 110 * offset + 20 * offset) + 'px',
  7. bottom: '20px'
  8. }, {}), $.jcoverflip.animationElement(el.find('img'), {
  9. width: Math.max(10, 100 - 20 * offset * offset) + 'px'
  10. }, {})];
  11. },
  12. afterCss: function(el, container, offset){
  13. return [$.jcoverflip.animationElement(el, {
  14. left: (container.width() / 2 + 167 + 110 * offset) + 'px',
  15. bottom: '20px'
  16. }, {}), $.jcoverflip.animationElement(el.find('img'), {
  17. width: Math.max(10, 100 - 20 * offset * offset) + 'px'
  18. }, {})];
  19. },
  20. currentCss: function(el, container){
  21. return [$.jcoverflip.animationElement(el, {
  22. left: (container.width() / 2 - 150) + 'px',
  23. bottom: 0
  24. }, {}), $.jcoverflip.animationElement(el.find('img'), {
  25. width: '300px'
  26. }, {})];
  27. },
  28. change: function(event, ui){
  29. jQuery('#scrollbar').slider('value', ui.to * 12.5);
  30. }
  31. });
  32.  
  33.  
  34. jQuery('#scrollbar').slider({
  35. value: 50,
  36. stop: function(event, ui){
  37. if (event.originalEvent) {
  38. var newVal = Math.round(ui.value / 12.5);
  39. jQuery('#flip').jcoverflip('current', newVal);
  40. jQuery('#scrollbar').slider('value', newVal * 12.5);
  41. }
  42. }
  43. });
  44. });

Report this snippet  

You need to login to post a comment.