Magnific popup - put arrows inside of an image

Question

I put magnific popup to my site, to display Images in gallery. I love this tool, except one thing. The arrows for changing of images are displayed on the sides of screen, what is little bit inpractical when you have big screen with big resolution. So I want to ask if it is possible to move the arrows inside the image, as it is common for many other image viewiers such as lightbox and so on.

Thank you in advance.

I upvoted you. This is definitely a reasonable question and the answer helped me. — Petras, Feb 08 '14 at 02:22

score 17 · Accepted Answer · answered Oct 08 '13 at 05:54

17

You may just re-append the arrows inside container, here is example http://codepen.io/dimsemenov/pen/JGjHK

answered Oct 08 '13 at 05:54

Dmitry Semenov

4,566
2
36
39

1

Any ideas how this can be done when the item is an inline item and not an image. type: 'inline', does not work with the code pen example - thanks – ejntaylor Jun 17 '14 at 14:41

score 1 · Answer 2 · answered Sep 10 '15 at 13:09

I had an issue when building multiple gallery from database. One gallery contained an unique picture and with callback : this.contentContainer.append(this.arrowLeft.add(this.arrowRight));

this picture just won't display (you get an error on this.arrowLeft undefined or Null)

(try it on the codepen example, just erase the second picture from the DOM.You'll see the remaining image can't be opened)

To fix this, i used the following callback instead :

this.contentContainer.append(this.arrowLeft,this.arrowRight);

score 0 · Answer 3 · answered Sep 12 '14 at 13:50

0

@raison, this should work with type inline/iframe:

callbacks: {
    buildControls: function() {
        // re-appends controls inside the main container
        this.arrowLeft.appendTo(this.contentContainer);
        this.arrowRight.appendTo(this.contentContainer);
    }
}

answered Sep 12 '14 at 13:50

Microcipcip

655
9
21

Meanwhile, next and previous become unusable. – bentinata Jul 19 '15 at 18:23

Magnific popup - put arrows inside of an image

3 Answers3