PDA

View Full Version : Help with image alignment



t0ad999
1 Feb 2011, 7:07 AM
Hi, I'm working on an image gallery using the Desktop... Everything is working great, but I can't seem to control how many images are displayed before breaking to a new line. At the moment each image spans an entire row..

My Module for the gallery is below.. after that I need to work on the onClick sliding, but that's next on my list.

Thanks!


MyDesktop.GalleryModule = Ext.extend(Ext.app.Module, {
id: 'gallery-win',
init : function(){
this.launcher = {
text: 'Image Gallery',
iconCls:'image_sm',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('gallery-win');
var root;
var myapp = src;
var album_view;
var west_panel;
var center_panel;

west_panel = new Ext.ux.tree.TreeGrid({
animate: true,
enableDD: true,
containerScroll: false,
rootVisible: false,
iconCls: 'image_sm',
region: 'west',
width: 253,
split: true,
collapsible: true,
title: 'Album Selections',
autoScroll: false,
margins: '3 0 3 3',
columns:[{
//header: 'Album',
dataIndex: 'name',
width: 250
}],
viewConfig: {
forceFit:true
},
loader: new Ext.tree.TreeLoader({
dataUrl: 'http://v2.swimmingturtle.com/com/albums.php'
})
});

west_panel.on('click', on_tree_click, this);

center_panel = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
frame: true ,
layoutOnTabChange: true,
enableTabScroll: true,
monitorResize: true
/***,
items: [{
title: 'Images',
closable: false,
autoScroll: true
//,autoLoad: '/help/albums'
}]
***/
});

if (!win) {
win = desktop.createWindow({
id: 'gallery-win',
title: 'Image Gallery',
width: 840,
height: 480,
iconCls: 'tabs',
shim: false,
animCollapse: false,
border: false,
constrainHeader: true,
layout: 'border',
items: [west_panel, center_panel]
});
}

//root.expand(true);
win.show();

function on_photo_click(d, index, node, event) {

var text = node.id;
var array = text.split('/');
var photo_id = array.join('-');
var win = desktop.getWindow('slide-win');

if (!win) {
win = desktop.createWindow({
id: 'slide-win',
title: node.id,
width: 650,
height: 490,
iconCls: 'image_sm',
layout: 'fit',
html: '<img src="' + node.id + '">'
});
}

win.show();

}

function on_tree_click(node, obj, options) {

var comp = Ext.getCmp(node.id);
var nodeName = node.attributes.name;
//alert(nodeName);


if (!comp) {

var datastore = new Ext.data.JsonStore({
url: 'http://v2.swimmingturtle.com/com/pictures.php?album='+nodeName,
root: 'photos',
fields: [
{name: 'filename', type: 'string'},
{name: 'title', type: 'string'},
{name: 'caption', type: 'string'},
{name: 'filepath', type: 'string'}
]
});


var template = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{filename}">',
'<div class="thumb">',
'<img src="" alt="{title}" class="thumb-img" width="160" height="120" />',
'</div>',
'<span>{filename}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
);

var album_view = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
style: 'overflow: auto; padding: 10px;',
overClass:'x-view-over',
emptyText: 'No images to display',
multiSelect: false,
autoHeight: true,
store: datastore,
tpl: template
});

album_view.on('click', on_photo_click, this);

datastore.load({
callback: function(r, o, s) {
if (s) {
center_panel.add({
title: nodeName,
id: node.id,
closable: true,
autoScroll: true,
items: [album_view]
});
comp = Ext.getCmp(node.id);
center_panel.setActiveTab(comp);

comp.on('bodyresize', function() {
comp.doLayout();
}, this);

} else {
Ext.Msg.alert('Error', 'Unable to load ' + node.id);
}
}
});

} else {

center_panel.setActiveTab(comp);

}
}

}

});

Condor
1 Feb 2011, 7:15 AM
You need to change your css for .thumb-wrap and .thumb (why are you even using <div class="thumb">?).

I would recommend something like:

.thumb-wrap {float: left;}

1 Feb 2011, 7:17 AM
Please post code within [code] tags!

t0ad999
1 Feb 2011, 7:26 AM
Condor - Thanks! that did it. I just ripped the structure from the data-view example to display my thumbs.

jgarcia - Will do! I tried to edit my comment and wrap my code around the [code] tag but the change wasn't committing. I'll try again in a little bit.

Thanks again all!

t0ad999
1 Feb 2011, 7:29 AM
FYI on error when trying to save edited entry

RELPATH is not defined
chrome://firebug/content/blank.giffunction vB_AJAX_QuickEdit_Init(C){if(...QuickEditor=new vB_AJAX_QuickEditor();


I'm using FF 3.6.13

Condor
1 Feb 2011, 7:30 AM
The forum software was recently updated and the Save and Go Advanced buttons are currently broken.