Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Open Popup (Image Gallery) from Link

See original GitHub issue

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

Issue Analytics

State:
Created 10 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

ryanjbonnellcommented, Nov 11, 2013

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'
    });
});

1reaction

ghostcommented, Jun 5, 2015

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