RS + Magnific Popup

info's Avatar

info

17 Jun, 2013 12:35 PM

I am trying to implement lightbox to RS, but it does not work.

jQuery('.royalSlider').magnificPopup({ delegate: 'img', type: 'image' });

In this case i have en error with message: "The image cant be loaded". And GET url with "undefined" (at console).
Tel me plz, what iam doing wrong.

  1. Support Staff 1 Posted by Dmitry Semenov on 17 Jun, 2013 03:02 PM

    Dmitry Semenov's Avatar

    Hi,

    Magnific Popup can get URL from options objet, from href attribute of A tag, or from data-mfp-src attribute of any tag. Are you sure that the images in slider have data-mfp-src attribute?

    Dmitry

  2. 2 Posted by info on 17 Jun, 2013 03:08 PM

    info's Avatar

    They have no "data-mfp-src". How may i add this attribute to slider, can u show me place to edit?

  3. Support Staff 3 Posted by Dmitry Semenov on 18 Jun, 2013 04:40 PM

    Dmitry Semenov's Avatar

    Well, it depends on type of slider and how you handle images.

    Example 1: click on <a> element in slide opens lightbox

    Simply modify markup of your slide or images to include data-mfp-src attribute, e.g.:

    <div class="rsContent">
        <a href="{{image_url}}" class="element-that-opens-lightbox">Open lightbox</a>
    ...
    
    jQuery('.royalSlider').magnificPopup({ delegate: '.element-that-opens-lightbox', type: 'image' });
    

    http://help.dimsemenov.com/kb/wordpress-royalslider-tutorials/wp-us...

    Example 2: click on any part of slide opens lightbox:

    Make sure that you add this code after the slider initialization (.royalSlider() call).

    var slider = $('.royalSlider').data('royalSlider');
    slider.ev.on('rsSlideClick', function(e) {
    
        // get URL of image for lightbox, 
        // slider.currSlide.content is a jQuery HTML element, you may use it to get some attrubute
        // but in this example we just use slider.currSlide.image, which is just URL to slider image
        var lightboxImageURL = slider.currSlide.image;
    
    
        $.magnificPopup.open({
            items: {
                src: lightboxImageURL
            },
            type: 'image'
        }, 0);
    });
    

    Magnific Popup documentation - http://dimsemenov.com/plugins/magnific-popup/documentation.html

    About where to put code in WP version - http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

    The above code opens only current image in lightbox, to open all images – generate items array from slider.slides array.

  4. 4 Posted by info on 19 Jun, 2013 05:34 AM

    info's Avatar

    Thx!

  5. info closed this discussion on 19 Jun, 2013 05:34 AM.

  6. info re-opened this discussion on 19 Jun, 2013 05:34 AM

  7. info closed this discussion on 19 Jun, 2013 05:34 AM.

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