Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • MBE 237 posts 818 karma points
    Jan 08, 2017 @ 16:10
    MBE
    0

    Everything worked fine untill I made a @foreach. I have added max-width: 100% to the image class but still no success. Only the first image is being rendered.

    Live example can be seen here if you hover one of the color choices.

    My foreach looks like this:

     @foreach (var img in images)
                    {
                        <div class="categoryImage" data-frame-color="@img.GetPropertyValue("frameColor")">
                            <img src="@img.GetResponsiveImageUrl(270, 161)" class="productImage" alt="@img.GetPropertyValue("altText")" title="@img.GetPropertyValue("title")" />
                        </div>
                    }
    

    It works fine if I use "@img.GetCropUrl("product image")"

  • MBE 237 posts 818 karma points
    Jan 08, 2017 @ 19:38
    MBE
    0

    Alright I found out it's because theres a display: none on the .categoryImage which somehow makes the plugin miss the source.

    Do you guys have any suggestion as to how I can use display: none and make the plugin work?

  • Jeavon Leopold 3005 posts 13196 karma points MVP 7x admin c-trib
    Jan 09, 2017 @ 10:29
    Jeavon Leopold
    1

    Depending on what you are doing you will likely need to use the checkResponsiveImages method, check the Slimmage JS documentation here

  • MBE 237 posts 818 karma points
    Jan 09, 2017 @ 11:05
    MBE
    0

    Hey Jeavon,

    Thank you for the response!

    What I'm trying to accomplish to is always hide the product images with a display: none. But apparently, all the images that has a display: none is not rendered.

    Would the checkResponsiveImages help with that issue? I just read it but I can't seem to figure out if it's the solution.

  • Tommy Enger 71 posts 276 karma points c-trib
    Jan 09, 2017 @ 12:20
    Tommy Enger
    1

    Does it make any difference if the "max-width: 100%" is put directly on the image tag?

       <img style="max-width:100%" src"......" ...>
    

    Do you use a 3rd party javascript library to run the image transition when you choose colors? If yes, you might need to run Slimmage.js before the other library.

  • MBE 237 posts 818 karma points
    Jan 09, 2017 @ 13:55
    MBE
    0

    Hey Tommy!

    Sadly that doesn't work either. As soon as the Display: none is applied the image src disappears.

    The priority of my scrips are:

    1. jQuery
    2. Slimmage Settings
    3. Slimmage.js
    4. Anyting else

    The Javascript I use for the color choices are this:

        $(".frameColor").each(function () {
        var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
        categoryImage.first().show();
    
        if ($(categoryImage).length > 1) {
    
            $(this).on('mouseover', function () {
                var color = $(this).data('color').replace('#', '');
                $(".frameColor").removeClass("active");
                $(this).addClass("active");
    
                $(categoryImage).hide().filter(function () {
                    return $(this).data('frame-color') === color;
                }).show();
            });
        }
        else {
            $(this).hide();
        }
    });
    
  • Paul Wright (suedeapple) 258 posts 660 karma points
    Jan 09, 2017 @ 14:05
    Paul Wright (suedeapple)
    1

    You might be better not using the .hide() method in your jquery, but manipulating the style attribute directly by using:

    http://api.jquery.com/attr/

    Or you could have a new class, called ".not-active", and append that to your hidden elements.

    $(this).addClass("not-active");
    
    $(this).removeClass("not-active");
    
    etc...
    

    And use some other CSS magic to hide your elements.

  • MBE 237 posts 818 karma points
    Jan 09, 2017 @ 14:29
    MBE
    0

    Hey Paul!

    The problem occurs when the page is loaded and both images are shown.

    I wan't to hide all .categoryImage containers except the first one. The first one is shown through Javascript categoryImage.first().show(); but the rest of the images has a display: none;

    This display: none; makes the src disappear on the images.

    Maybe this video can illustrate it better than I can explain: https://youtu.be/MdJHR32PVXU

    :o)

  • Paul Wright (suedeapple) 258 posts 660 karma points
    Jan 09, 2017 @ 14:41
    Paul Wright (suedeapple)
    100

    Hi Mike

    If the images are the same dimensions, maybe you could play with the z-index, rather than the "display".

    I think setting display:none, hits problems with the browser not calculating the image width (and that the browser chooses not to load the image), and thus not being able to set a max-width attr on it.

    Thus slimmage cant give the element a "src" attr.

  • MBE 237 posts 818 karma points
    Jan 09, 2017 @ 14:58
    MBE
    0

    Ah that makes sense Paul!

    I ended up using a bit of, well.. Bad code to fix it but this is how I solved it:

    Each image AFTER the first image becomes absolute underneath the first image.

    When you hover the color choice, each of the .categoryImage containers gets a class called .active. This class makes the images static which solves the problem:

     .categoryImage {
                &:nth-child(1n+2) img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity:0;
                }
                    &.active img {
                    position:static;
                    opacity:1;
                }
            }
    

    Thanks for the inputs, help and brainstorming guys, I really appreciate it!:)

Please Sign in or register to post replies

Write your reply to:

Draft