enlarge cell with image

[deeredealerParticipant]

Bear with me as a newbie… I’m using css transition to enlarge an image in a cell onhover. The result is, onhover the image enlarges but within the confines of the cell size, which seems set somehow. I can’t get the cell to enlarge with the image. If I place it outside of the grid in regular html, it works ok. Not sure how much info to provide, but in brief as follows:

1. Cell Defined: { text: 'Details', datafield: 'imageref', cellsrenderer: imagerender},

2. `var imagerender = function (row, column, value) {
return ‘<img style=position:absolute; class=”img-zoom” src=’ + value + ‘>’; }`

3. `cellhover: function (element, pageX, pageY) {
$(‘.img-zoom’).hover(function () {
$(this).addClass(‘transition’);
},
function () {
$(this).removeClass(‘transition’);
});
},`

4. CSS:
` .img-zoom {

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}

.transition {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}`

appreciate any guidance.

[ivailoParticipant]

Hi deeredealer,

You can’t resize the cells according to image size, but like a workaround you can simulate this behavior with external image that overlaps the cell. The image shows/hides when is needed. Just have to be attached to the right coordinates, covering the needed cell.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[deeredealerParticipant]

Thanks Ivailo,

Do you know or have any examples of how that would be done? I am just to green at this point to understand overlaying a grid cell with a larger element without seeing some sort of framework.

thanks
mark

[ivailoParticipant]

Hi deeredealer,

Unfortunately we don’t have that example.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts