MooFlow V0.2 - JSON Example

Double click on a image

Javascript

  1. var myMooFlowPage = {
  2.  
  3. start: function(){
  4.  
  5. var div = new Element('div').inject($('content'), 'top');
  6. var mf = new MooFlow(div, {
  7. startIndex: 3,
  8. offsetY: 40,
  9. useCaption: true,
  10. useMouseWheel: true,
  11. useKeyInput: true,
  12. useViewer: true,
  13. onEmptyinit: function(){
  14. this.loadJSON('skyset.json');
  15. },
  16. onClickView: function(obj){
  17. var a = new Element('a',{
  18. 'class':'remooz-element',
  19. 'href':obj.href,
  20. 'title':obj.title + ' - '+ obj.alt,
  21. 'styles':{'border':'none'}
  22. });
  23. var img = new Element('img',{
  24. 'src':obj.src,
  25. 'title':obj.title,
  26. 'alt':obj.alt,
  27. 'styles':obj.coords
  28. }).setStyles({
  29. 'position':'absolute',
  30. 'border':'none'
  31. }).inject(a);
  32. a.inject(document.body);
  33. var remooz = new ReMooz(a, {
  34. centered: true,
  35. resizeFactor: 0.8,
  36. origin: img,
  37. onCloseEnd: function(){
  38. a.destroy();
  39. delete remooz;
  40. }
  41. }).open();
  42. }
  43. });
  44.  
  45. }
  46.  
  47. };
  48.  
  49. window.addEvent('domready', myMooFlowPage.start);

JSON Source

  1. {"images":[
  2. {"src":"img/skyset/sonnenuntergang.jpg", "title":"Sonnenuntergang", "href":"img/skyset/big/sonnenuntergang.jpg", "alt":"Photos www.pixelio.de"},
  3. {"src":"img/skyset/wolken.jpg", "title":"Wolken", "href":"img/skyset/big/wolken.jpg", "alt":"Photos www.pixelio.de"},
  4. {"src":"img/skyset/juli_su.jpg", "title":"Sonnenuntergang Juli", "href":"img/skyset/big/juli_su.jpg", "alt":"Photos www.pixelio.de"},
  5. {"src":"img/skyset/wolkenformationen.jpg", "title":"Wolkenformationen", "href":"img/skyset/big/wolkenformationen.jpg", "alt":"Photos www.pixelio.de"},
  6. {"src":"img/skyset/wolken-schmetterling.jpg", "title":"Wolken-Schmetterling", "href":"img/skyset/big/wolken-schmetterling.jpg", "alt":"Photos www.pixelio.de"},
  7. {"src":"img/skyset/sunrising.jpg", "title":"Sunrising", "href":"img/skyset/big/sunrising.jpg", "alt":"Photos www.pixelio.de"},
  8. {"src":"img/skyset/mondfeeling.jpg", "title":"Mondfeeling", "href":"img/skyset/big/mondfeeling.jpg", "alt":"Photos www.pixelio.de"},
  9. {"src":"img/skyset/bunter-abend.jpg", "title":"Bunter Abend", "href":"img/skyset/big/bunter-abend.jpg", "alt":"Photos www.pixelio.de"},
  10. {"src":"img/skyset/here-comes-the-sun.jpg", "title":"Here Comes the Sun", "href":"img/skyset/big/here-comes-the-sun.jpg", "alt":"Photos www.pixelio.de"},
  11. {"src":"img/skyset/gewitter.jpg", "title":"Gewitter", "href":"img/skyset/big/gewitter.jpg", "alt":"Photos www.pixelio.de"},
  12. {"src":"img/skyset/gefetzte-wolken.jpg", "title":"Gefetzte Wolken", "href":"img/skyset/big/gefetzte-wolken.jpg", "alt":"Photos www.pixelio.de"},
  13. {"src":"img/skyset/sonnenuntergang-am-meer.jpg", "title":"Sonnenuntergang am Meer", "href":"img/skyset/big/sonnenuntergang-am-meer.jpg", "alt":"Photos www.pixelio.de"},
  14. {"src":"img/skyset/gewitterwolke.jpg", "title":"Gewitterwolke", "href":"img/skyset/big/gewitterwolke.jpg", "alt":"Photos www.pixelio.de"},
  15. {"src":"img/skyset/ueber-den-wolken.jpg", "title":"Über den Wolken", "href":"img/skyset/big/ueber-den-wolken.jpg", "alt":"Photos www.pixelio.de"},
  16. {"src":"img/skyset/abendrot-am-cospudener-see.jpg", "title":"Abendrot am Cospudener See", "href":"img/skyset/big/abendrot-am-cospudener-see.jpg", "alt":"Photos www.pixelio.de"},
  17. {"src":"img/skyset/zunehmender-mond.jpg", "title":"Zunehmender Mond", "href":"img/skyset/big/zunehmender-mond.jpg", "alt":"Photos www.pixelio.de"}
  18. ]}