Image-in-Frame


            http://dynapi.sourceforge.net/
GNU LESSER GENERAL PUBLIC LICENSE
Version 2.1, February 1999


DynAPI - Image Frame


dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('dynapi.functions.Image');
dynapi.library.include('dynapi.gui.Frame');
dynapi.library.include('dynapi.gui.BorderManager');
dynapi.library.include('dynapi.gui.TemplateManager');


var doc=dynapi.document;
var p='./dynapiexamples/images/';
var f=dynapi.functions;
var fN=f.getImage(p+'f1-n.jpg',100,17), fE=f.getImage(p+'f1-e.jpg',17,100), fS=f.getImage(p+'f1-s.jpg',100,17), fW=f.getImage(p+'f1-w.jpg',17,100);
var fNE=f.getImage(p+'f1-ne.jpg',17,17), fSE=f.getImage(p+'f1-se.jpg',17,17), fSW=f.getImage(p+'f1-sw.jpg',17,17), fNW=f.getImage(p+'f1-nw.jpg',17,17);
var fa=[ // Array of frame styles to choose from.
  {w:2, s:'red'},
  {w:2, s:['white','black','black','white']},
  {w:2, s:['black','white','white','black']},
  {w:[1,0,3,4], s:['red','yellow','green','blue']},
  {w:[2,2,0,0], s:['yellow','blue']},
  {w:2, s:['red','green']},
  {w:[2,0,0,2], s:'blue'},
  {w:[0,2,4,0], s:'red'},
  {w:[0,0,2,2], s:'blue'},
  {w:[0,0,2], s:'red'},
  {w:1},
  {}
];
// Frame style with image sides and corners.
var albumFrame=doc.addChild(new Frame(17,[fN.src,fE.src,fS.src,fW.src],[fNE.src,fSE.src,fSW.src,fNW.src]));
albumFrame.setBgColor('#c4c2c7');
var albumHTML=[
'',
'Click on an image to cycle it\'s frame.',
'{@thumb0}{@thumb1}{@thumb2}{@thumb3}{@thumb4}',
'{@thumb5}{@thumb6}{@thumb7}{@thumb8}{@thumb9}',
'{@thumb10}{@thumb11}{@thumb12}{@thumb13}{@thumb14}',
'{@thumb15}{@thumb16}{@thumb17}{@thumb18}{@thumb19}',
''
];
var albumTemplate=new Template(albumHTML.join(''),10,10,250,220);
albumFrame.addContent(albumTemplate);
albumFrame.setSize(300,270);
var album=[
{thumb:p+'arrowdown.gif',tw:9,th:5}, {thumb:p+'arrowleft.gif',tw:5,th:9}, {thumb:p+'arrowright.gif',tw:5,th:9}, {thumb:p+'arrowup.gif',tw:9,th:5}, {thumb:p+'left.gif',tw:20,th:22},
{thumb:p+'btn_delete.gif',tw:25,th:22}, {thumb:p+'btn_first.gif',tw:25,th:22}, {thumb:p+'btn_last.gif',tw:25,th:22}, {thumb:p+'btn_new.gif',tw:25,th:22}, {thumb:p+'btn_next.gif',tw:25,th:22},
{thumb:p+'btn_prev.gif',tw:25,th:22}, {thumb:p+'btn_save.gif',tw:25,th:22}, {thumb:p+'btn_undo.gif',tw:25,th:22}, {thumb:p+'calc.gif',tw:32,th:32}, {thumb:p+'eicon1.gif',tw:32,th:32},
{thumb:p+'eicon2.gif',tw:32,th:32}, {thumb:p+'eicon3.gif',tw:32,th:32}, {thumb:p+'bin_full.gif',tw:32,th:32}, {thumb:p+'bin_off.gif',tw:32,th:32}, {thumb:p+'bin_on.gif',tw:32,th:32}
];
var n, a, img, frame, length=album.length;
for(n=0;n  a=album[n];
  img=f.getImage(a.thumb,a.tw,a.th);
  frame = albumTemplate.addChild(new Frame(fa[0].w,fa[0].s),'thumb'+n)
  frame.addContent(new DynLayer(img.getHTML(),null,null,img.w,img.h));
  frame._fImage=img;
  img._fFrame=frame;
  a.frame=frame;
  frame.addEventListener({
    onclick:function(e){
      var o=e.getSource();
      o._fState=(o._fState      o.setBorder(fa[o._fState].w,fa[o._fState].s);
    }
  });
}
function futureSetBorder(frame,style) {
  frame._fState=style;
  var rand=Math.floor(100+Math.random()*(500-101)); // 100ms to 500ms
  setTimeout(frame+'.setBorder(fa['+style+'].w,fa['+style+'].s)',rand);
};
dynapi.onLoad(function() {
  for(n=0;n    a=album[n]; frame=a.frame; img=frame._fImage;
    if(img.complete) futureSetBorder(frame,1);
    else img.onload=function() { futureSetBorder(this._fFrame,2); };
  }
});






           
        
dynapi.zip( 791 k)
Ajax Layer JavaScript DHTML
