no src tag

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

MB 273 posts 936 karma points

Jan 08, 2017 @ 16:10
0

No Src tag
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")"
Copy Link
MB 273 posts 936 karma points

Jan 08, 2017 @ 19:38

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?

Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jan 09, 2017 @ 10:29

1

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

Copy Link
MB 273 posts 936 karma points

Jan 09, 2017 @ 11:05

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.

Copy Link
Tommy Enger 72 posts 277 karma points c-trib

Jan 09, 2017 @ 12:20
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.
Copy Link

MB 273 posts 936 karma points

Jan 09, 2017 @ 13:55

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:

jQuery
Slimmage Settings
Slimmage.js
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();
    }
});

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Jan 09, 2017 @ 14:05
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.
Copy Link
MB 273 posts 936 karma points

Jan 09, 2017 @ 14:29

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)

Copy Link
Paul Wright (suedeapple) 277 posts 704 karma points

Jan 09, 2017 @ 14:41

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.

Copy Link
MB 273 posts 936 karma points

Jan 09, 2017 @ 14:58
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!:)
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?