jQuery UI Widgets Forums Grid enlarge cell with image

This topic contains 3 replies, has 2 voices, and was last updated by  ivailo 4 years, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • enlarge cell with image #71241

    deeredealer
    Participant

    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.

    enlarge cell with image #71262

    ivailo
    Participant

    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

    enlarge cell with image #71284

    deeredealer
    Participant

    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

    enlarge cell with image #71316

    ivailo
    Participant

    Hi deeredealer,

    Unfortunately we don’t have that example.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.