simple image viewer

[zican]

var imageWin;

Ext.onReady(function() {

Ext.imageViewer = function (url){

var store = new Ext.data.JsonStore({
data: {"images": [{"name":"image","url":url}]},
root: 'images',
fields: ['name', 'url']
});
//store.load();

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}" onload="imageWin.setSize(this.width+14, this.height+10)"></div>',
'</tpl>',
'<div class="x-clear"></div>'
);


var width = 535;

imageWin = new Ext.Window({
width: width,
autoHeight: true,
layout: 'fit',
closeAction: 'hide',
plain: true,
deferredRender: false,
border: false,

items: new Ext.DataView({
store: store,
tpl: tpl,
autoWidth:true,
autoHeight:true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',

prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
return data;
}
})
}); // end of imageWin

imageWin.show(this);
}
});


sorry, poor my english
I made a single image viewer using in webpage
i'm newbie, please fix my code refined :)

window is not resized automatically when contents loading
refer this document
http://extjs.com/forum/showthread.php?t=20080

so, resize window when loading image

[rafa.ferreira]

no news???

[ByteLess]

anything better available than this?

[Animal]

It's simpler than that.



ImageViewer = Ext.extend(Ext.Window, {

initComponent: function() {
this.bodyCfg = {
tag: 'img',
src: this.src
};
ImageViewer.superclass.initComponent.apply(this, arguments);
},

onRender: function() {
ImageViewer.superclass.onRender.apply(this, arguments);
this.body.on('load', this.onImageLoad, this, {single: true});
},

onImageLoad: function() {
var h = this.getFrameHeight(),
w = this.getFrameWidth();
this.setSize(this.body.dom.offsetWidth + w, this.body.dom.offsetHeight + h);
if (Ext.isIE) {
this.center();
}
},

setSrc: function(src) {
this.body.on('load', this.onImageLoad, this, {single: true});
this.body.dom.style.width = this.body.dom.style.width = 'auto';
this.body.dom.src = src;
},

initEvents: function() {
ImageViewer.superclass.initEvents.apply(this, arguments);
if (this.resizer) {
this.resizer.preserveRatio = true;
}
}
});


then



imageWindow = new ImageViewer({
title: "Test",
src: "http://cdn.media.cyclingnews.com//2009/07/25/2/pic50838s_600.jpg",
hideAction: 'close'
}).show();


Then to change the image:



imageWindow.setSrc("http://www.roadcycling.com/artman2/uploads/1/mark_cavendish_wins_6.jpg");

[ByteLess]

this is amazing animal, I really not thought that it is that simple.
Special thanks to you.

now another issue.

I have the following where I need to sneak my code to open the image
so I wanted to use the following code

new ImageViewer({
title: "Test",
src: "http://myhost.com/img/foto/foto1.jpg"
}).show();

here

new Ext.DataView({
emptyText: "No Picture to display",
itemSelector: "div.dataview1",
overClass: "dataview1Over",
store: qProfilesDetailsJSON,
tpl: new Ext.XTemplate("<tpl for=\".\"><div class=\"dataview1\"> <span class=\"dataviewClass\">{profile_desc}</span> </div></tpl>"

)

[ByteLess]

Forget about the earlier question. I added the listener to open the window.
now another issue

This is creating a new window every time when click on the image in my dataview.

Is this possible to update the same window, rather then creating the new window everytime?
or I can create a button to close all open windows for this image?


The issue is if user click 3 times, the window open 3 times, I want to update the same window somehow.

thanks once again.

[Animal]

I have amended the class.

[ByteLess]

not working..
error is

ImageWindow is not defined

[Animal]

Come on.

[ByteLess]

I ran your first and second codeset first, it does render the image in the window. then I try to run the code in firebug and it throw an error.

[ByteLess]

I really didn't get it why its throwing imageWindow is not defined.

[ByteLess]

animal:
I know I maybe asking a very basic question, but after have a hard time debugging, I still not able to solve this.

I also have a listener but not sure how do I ref. to the item which is clicked.


function (view, index, node, e) {
imageWindow = new ImageViewer({
title: "Test",
src: "http://cdn.media.cyclingnews.com//2009/07/25/2/pic50838s_600.jpg",
hideAction: 'close'
}).show();
imageWindow.setSrc("http://www.roadcycling.com/artman2/uploads/1/mark_cavendish_wins_6.jpg");
}
Can you please please help...
thanks,

[Animal]

You know all this. It's all public and well known. Give it an ID, then look it up.

[ByteLess]

I swear I tried that.
but it worked this time.
thx

[rchavan]

I want to keep the size of image as per the image size and the window size constant.

currently i had set the window size as constant as .

imageWindow = new ImageViewer({

title: "Image Viewer",
width:500,
height:500,
src: "../img/add16.gif",
hideAction: 'close',
border: true,

buttonAlign:'center',
buttons:[{
scope:this,
text:'Previous',
height: 20,
width:65,
handler:function() {
imageWindow.setSrc("../img/add16.gif");
var imageName = imageWindow.getSrcName("../img/add16.gif");
imageWindow.setTitle(imageName);
}
},{
scope:this,
text:'Next',
height: 20,
width:65,
handler:function() {
imageWindow.setSrc("../img/cal.gif");
var imageName = imageWindow.getSrcName("../img/cal.gif");
imageWindow.setTitle(imageName);
}
}]
}).show();

but unable to set the size of image as per the actual size..it is taking the size of window..

Please help me..

[dchristensen]

Your code works like a charm for me! It's a great example that allowed me to get what I wanted to do done!

Thank you!