Magnific-popup: Open Popup (Image Gallery) from Link

[ghost]

First: Thank you very much for this great peace of code. One question left. Are there ways to open a gallery from a single Textlink?

Sample:

<div class="gallery-link">
<a href="#">Open the Gallery</a>
</div>

<div class="gallery">
<img src="" />
<img src="" />
<img src="" />
.
.
.
</div>

Thank you

[dimsemenov]

Depends on how you initialized the gallery, but basically:

$('.gallery').magnificPopup('open');

To open at specific index:

$('.gallery').magnificPopup('open', 3);

[ghost]

Thank you very much.

[ryanjbonnell]

You can view a working example on CodePen.

HTML:

<div class="gallery-link">
    <a href="#">Open Gallery</a>
</div>

<div class="gallery">
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg"></a>
    ...
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg"></a>
</div>

jQuery:

// Bind Click Handler to Link, then Open Gallery
$('.gallery-link').on('click', function () {
    $(this).next().magnificPopup('open');
});

// Initialize Magnific Popup Gallery + Options
$('.gallery').each(function () {
    $(this).magnificPopup({
        delegate: 'a',
        gallery: {
            enabled: true
        },
        type: 'image'
    });
});

[pierrocknroll]

Hi, and thanks for this great solution.

Is it possible to have animations with this kind of gallery ? I can't get http://codepen.io/dimsemenov/pen/GAIkt to work with it.

[ghost]

Thank you for the great piece of code.

Have an issue with

$(document).ready(function () {
$('.gallery-link').click(function () {
jQuery(this).next().magnificPopup('open');
});
$('.gallery').each(function () {
jQuery(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true
},
fixedContentPos: false
});
});
});

On .magnificPopup('open') Error: Unable to get property 'items' of undefined or null reference
Line: 930 in jquery.magnific-popup.js (v1.0.0 - 2015-01-03 )

Please help.

Thank you