CODEWITHSUNDEEP
javascriptjquerycssasp.netcss-transitions
user4593252
user4593252

Reputation: 3506

Replacing img src, easing on height/width differences?

I've tried a few things and I'm not quite sure if my problem is code or frameworks competing. For disclosure, I'm in an aspx site, linked css, Kentico 10, using jquery, jquery ui, and bootstrap.

What I'm doing: replacing img src via jquery. This works.

The goal: Not all images have the same dimensions. I want the dimensions of the image to "animate" between the old size and the size of the new image source. What it's doing, as you would expect, is just flashing to the new size. Surrounding layout objects just teleport to the new location.

The problem: The transition I have applied to the image tag does not seem to do squat.

The code... note that the image tag with CSS class productImage is inside a repeater:

CSS:

.mainImage {
    max-width: 551px;
    cursor: pointer;
    -webkit-transition: all .6s ease-in-out !important;
    -moz-transition: all .6s ease-in-out !important;
    -o-transition: all .6s ease-in-out !important;
    -ms-transition: all .6s ease-in-out !important;
    transition: all .6s ease-in-out !important;
}

HTML:

This is the main image, the target that will change img src.

<div class="col-md-6">
    <asp:Image ImageUrl="http://placehold.it/551x373" runat="server" ID="imgProduct" AlternateText="Product Image" ToolTip="Product Image" CssClass="mainImage" />
</div>

...

This is the image thumbnail that you click on that fires the javsacript src replacement and is inside of a repeater. Note that the data-target attribute is set server-side and only contains the url of the src url that we want the main image to be changed to.

<div class="col-sm-1">
    <asp:Image ImageUrl="http://placehold.it/64x64" runat="server" ID="img1" AlternateText="Product Image" ToolTip="Product Image" CssClass="productImage" onclick="ShowImage(this);" />
</div>

JavaScript:

function ShowImage(ctl) { //this is already a jquery item...
    var targetImage = $("#<%= imgProduct.ClientID %>");    
    targetImage.attr("src", $(ctl).attr("data-target"));
}

$(document).ready(function () {
    ShowImage($("[id$='img1']:first"));
});

Upvotes: 1

Views: 432

Answers (1)

cloudworks
cloudworks

Reputation: 619

For the height and width transition to work, you'll need to specify the height and width in CSS or style tags.

It appears that you're swapping the image URL and letting the image's native sizes (provided by placehold.it's URL) to set the layout. Without parameters to animate, the browser instantly re-render the layout without any transition.

Upvotes: 2

Related Questions