SVG Files with Linked Images

jaherbert's Avatar

jaherbert

27 May, 2020 04:38 PM

Hi Dmitry,

The slider doesn't seem to support svg files with linked images.

Here's the page with an SVG with embedded images.
http://jgdtest1.com/products/aqua/aqua_chandelier/index.html

Here's the page with an SVG with linked images.
http://jgdtest1.com/products/aqua/aqua_chandelier/dmitry.html

Here's the SVG file with linked images. The browser displays this fine.
http://jgdtest1.com/images/_tearsheets/dmitry.svg

Is there a way to get the slider to display this image properly?

Thanks,

Jeff

  1. Support Staff 1 Posted by Dmitry Semenov on 27 May, 2020 06:20 PM

    Dmitry Semenov's Avatar

    Hello,

    It'll work the same if you just add img element with the same SVG outside of the slider, check https://stackoverflow.com/questions/41195669/images-in-svg-image-ta...

  2. 2 Posted by jaherbert on 27 May, 2020 07:39 PM

    jaherbert's Avatar

    Ok, thanks, I see that.

    The suggested solutions is to use an embed tag. Is there any way to get that to work? My first attempts didn't work.

    If so, any way it can be lazy-loaded?

    Thanks.

  3. Support Staff 3 Posted by Dmitry Semenov on 28 May, 2020 07:44 PM

    Dmitry Semenov's Avatar

    I don't think it can be lazy-loaded, but each slide can contain any HTML, so embed tag might also work.

  4. 4 Posted by jaherbert on 30 May, 2020 11:14 PM

    jaherbert's Avatar

    In your template, content-slider-1, I replaced the contents of your first div:
       <h3>Slide HTML Text</h3>
       ...
    with
       <embed src='Aqua Chandelier Link.svg'>

    The content displays, but it also appears to break navigateByClick on this first slide as clicking doesn't cause it to slide.

    Thanks for looking.

  5. 5 Posted by jaherbert on 30 May, 2020 11:19 PM

    jaherbert's Avatar

    It breaks sliderDrag, too.

  6. Support Staff 6 Posted by Dmitry Semenov on 01 Jun, 2020 04:29 AM

    Dmitry Semenov's Avatar

    You may try pointer-events: none; style on the embed element.

  7. 7 Posted by jaherbert on 01 Jun, 2020 05:28 AM

    jaherbert's Avatar

    Thanks. I was typing the same thing as you replied with reference to:

    https://stackoverflow.com/questions/24078524/svg-click-events-not-firing-bubbling-when-using-use-element

  8. 8 Posted by jaherbert on 02 Jun, 2020 06:26 AM

    jaherbert's Avatar

    Still working away on this issue. I appreciate your patience, Dmitry.

    I do my own lazy loading of this image by adding an embed element before initializing the slider. I'd like to have the preloader display while the image is loading.

    If I attach an .rsImg to this embed statement, the preload symbol displays continuously while the image never loads. The rest of the slider is functional, since I only have one embed(ded) image (on the first slide).

    I tried adding .rsPreloader myself that I intended to remove onload. Didn't work.

    Any ideas?

    Thanks.

  9. 9 Posted by jaherbert on 02 Jun, 2020 07:11 AM

    jaherbert's Avatar

    I got it to work by adding a sibling div with a removable preloader class.

    Was this the best solution, or is there some way to make it work within the slider proper?

  10. Support Staff 10 Posted by Dmitry Semenov on 02 Jun, 2020 03:37 PM

    Dmitry Semenov's Avatar

    You may use rsAfterContentSet event that triggers for each slide that is supposed to be loaded and dynamically create svg/embed/img element inside it. Here is example with dynamically generated img:

    $('.royalSlider').royalSlider({
        autoScaleSlider:false
    });
    
    var slider = $('.royalSlider').data('royalSlider');
    var addImageToSlide = function(slideContent) {  
        if(slideContent.attr('data-image-appended')) {
            return;
        }
    
        var linkElement = slideContent.is('a') ? slideContent : slideContent.find('a').eq(0);
      
      var imgElement = $('img');
      imgElement.attr('src', linkElement.attr('href'));
      imgElement.attr('srcset', linkElement.attr('data-srcset'));
      linkElement.html(imgElement);
    
      slideContent.attr('data-image-appended', 'true');
    };
    slider.ev.on('rsAfterContentSet', function(e, slideObject) {
        addImageToSlide(slideObject.content);
    });
    $('.royalSlider .rsSlide').each(function() {
        addImageToSlide( $(this).children().first() );
    });
    
  11. Support Staff 11 Posted by Dmitry Semenov on 02 Jun, 2020 03:37 PM

    Dmitry Semenov's Avatar

    ^ for markup:

    <div class="royalSlider rsDefault">
     
        <a href="image1.jpg" data-srcset="image1-100.jpg 100w, image1-400.jpg 400w ...">
          Image 1
        </a>
        <a href="image-2.jpg" data-srcset="image2-100.jpg 100w, image2-400.jpg 400w ...">
          Image 2
        </a>
    </div>
    
  12. 12 Posted by jaherbert on 02 Jun, 2020 09:17 PM

    jaherbert's Avatar

    Thanks, Dmitry.

    I appreciate you showing me another way to lazy load an image. I'm curious if this will affect the preloader behavior.

    If not, is there something else I should be doing besides creating my own sibling div?

  13. Support Staff 13 Posted by Dmitry Semenov on 03 Jun, 2020 04:25 AM

    Dmitry Semenov's Avatar

    If you mean loading indicator - the example above doesn't have it.

  14. 14 Posted by jaherbert on 03 Jun, 2020 07:15 AM

    jaherbert's Avatar

    Yes, I do mean the indicator, which I'll refer to as .rsPreloader.

    As I mentioned in post #8, I tried adding .rsImg to the <embed> and it fails to load (which also happens if I modify your templates). I don't know if adding .rsImg is the key to getting .rsPreloader to work, but I imagined it might be.

    The main reason I'm concerned about implementing an alternate method of posting my own .rsPreloader is that I don't want it to compete with what the slider does natively. If the only time it posts an indicator is while the main content of the slide is loading, then I have no worries, because for the non-.rsImg-labeled SVGs I'm embedding, there is no .rsPreloader (hence my fabricating my own). However, if you also post an indicator at other times (e.g., while the thumbnails are filling), then we have a potential for two image loading indicators to be posted simultaneously.

    Is there some snippet you can offer that will prevent me from possibly competing with your display of .rsPreloader.

    If not, can I assume that our separate strategies won't conflict?

    I hope all that makes sense. Thanks.

  15. Support Staff 15 Posted by Dmitry Semenov on 04 Jun, 2020 04:35 AM

    Dmitry Semenov's Avatar

    They won't conflict, the default indicator appears only for rsImg element.

  16. 16 Posted by jaherbert on 04 Jun, 2020 04:50 AM

    jaherbert's Avatar

    Great, thanks.

  17. jaherbert closed this discussion on 05 Jun, 2020 07:50 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac