No more Magnific Popup in Backlight 2 possible?

Markus · 2019-02-17 01:45:29

Hi,

in this article http://backlight.theturninggate.net/?page=mfp Matt reported about the introduction of the Magnific Popup in Backlight. I also added this to the maps on my homepage under Pangolin 1.1.1. (e.g. here: http://der-canonier.de/galleries/03-lan … apo-testa/).

If I click on the map, it will open. The magnifying glass with the minus sign appears and the background is darkened, but still shines through. If I click again, the map is faded out normally.

The code looks like this:

<a class="mfp-image" href="/Photos/Sardinia/Capo-Testa.jpg"><img title="Capo Testa - click to enlarge" src="/Photos/Sardinia/Capo-Testa.jpg" class="alignleft" style="border: 2px grey solid; padding: 5px; margin-top: 7px; margin-bottom: 20px;" width="420"></a>

Now with Backlight 2 the code on http://mc-photografie.de/galleries/03-l … apo-testa/ is still the same. But the effect is different. The appearance of the card is different (without white border) and the background is no longer translucent.

I can also click as I like, I can only get out of the view with BACK button.

Is Magnific Popup no longer available in Backlight 2? I think that would be a pity. Or did I do something wrong?
How else can I achieve the effect?

I would be happy about help

Many greetings
Markus

rod barbee · 2019-02-17 02:14:07

Magnific is no longer used. It’s now Fancybox
http://community.theturninggate.net/vie … hp?id=7774

Markus · 2019-02-17 02:24:53

Thanks Rod,

Ah, okay. I've already used that in the photo search. http://mc-photografie.de/backlight/search/

But I don't know exactly why the Close button with the X moved from top right to bottom left in my photo search.

I had also thought of Fancybox in this context. Can I use it - as with Magnific Popup - to create the Image Galleries on-the-fly?

rod barbee · 2019-02-17 03:58:02

Markus wrote:

I had also thought of Fancybox in this context. Can I use it - as with Magnific Popup - to create the Image Galleries on-the-fly?

I don’t know

rod barbee · 2019-02-17 04:16:07

Markus wrote:

But I don't know exactly why the Close button with the X moved from top right to bottom left in my photo search.

It's because of your custom css (line 479). The position:relative; is causing the problem.

Try adding this to your custom css:

#popup .fancybox-button {
    position: absolute;
}

Matthew · 2019-02-17 08:15:02

Markus wrote:

I had also thought of Fancybox in this context. Can I use it - as with Magnific Popup - to create the Image Galleries on-the-fly?

Should be able to. Off the top of my head, something like this ought to just work:

<div class="custom-gallery">

	<a href="image01.jpg" data-fancybox="custom-gallery">
		<img src="thumbnail01.jpg" alt="Caption 01" />
	</a>

	<a href="image02.jpg" data-fancybox="custom-gallery">
		<img src="thumbnail02.jpg" alt="Caption 02" />
	</a>

</div>

This will not pick up on your album designs, though; it will just do the default Fancybox thing.

Markus · 2019-02-17 19:02:18

rod barbee wrote:

It's because of your custom css (line 479). The position:relative; is causing the problem.
Try adding this to your custom css:
#popup .fancybox-button {
    position: absolute;
}

this has worked before, great

Markus · 2019-02-18 16:40:59

Matthew wrote:

Should be able to. Off the top of my head, something like this ought to just work:
<div class="custom-gallery">

	<a href="image01.jpg" data-fancybox="custom-gallery">
		<img src="thumbnail01.jpg" alt="Caption 01" />
	</a>

	<a href="image02.jpg" data-fancybox="custom-gallery">
		<img src="thumbnail02.jpg" alt="Caption 02" />
	</a>

</div>
This will not pick up on your album designs, though; it will just do the default Fancybox thing.

it works the way you suggested, thanks

Markus · 2019-02-18 16:59:31

Good Morning,

I've solved the map thing (https://www.mc-photografie.de/galleries … malediven/) by using this code

<div class="route-maps">
    <a href="/Photos/Sardinien/Mitte-Westen.jpg" data-fancybox="route-maps">
        <img src="/Photos/Sardinien/Mitte-Westen.jpg" title="Capo Testa - Zum Vergrößern klicken" class="alignleft" style="border: 2px grey solid; padding: 5px; margin-top: 7px; margin-bottom: 20px;" width="450">
    </a>
</div>

But now I would like to enlarge the size of the map in the fancybox.

When I check with the Inspector I notice that the size is controlled by this point:

<div class="fancybox-content" style="transform: translate(490px, 125px); width: 700px; height: 587px;"><img class="fancybox-image" src="/Photos/Sardinia/Middle-West.jpg"></div>

But if I now change the size of fancybox-content to e.g. 900px - 755px, this change will affect all Fancybox galleries.

Can I do this somehow with my <div class="route-maps"> or data-fancybox="route-maps"?

rod barbee · 2019-02-18 23:27:20

Yes, in your custom css, override the width setting. You should be able to target to only the route maps by starting with the .route-maps selector.

Since the width is applies with inline css you’ll probably also need to use !important

Markus · 2019-02-19 15:28:17

rod barbee wrote:

Yes, in your custom css, override the width setting. You should be able to target to only the route maps by starting with the .route-maps selector.
Since the width is applies with inline css you’ll probably also need to use !important

with the .route-maps selector it doesn't seem to work.

In fancybox mode, the .fancybox-content selector seems to be the most important one where I can change the size.

 <div class="fancybox-slide fancybox-slide--image fancybox-slide--current fancybox-slide--complete" style=""><div class="fancybox-content" style="transform: translate(490px, 101px); width: 700px; height: 587px;"><img class="fancybox-image" src="/Photos/Sardinia/Middle-West.jpg"></div></div>

If I change width and height there, however, it will also have a direct effect on the other galleries. There I have a max-widht of 1600px, which can be changed with css.

Markus · 2019-02-19 16:28:57

I've found the solution. After these instructions https://codepen.io/fancyapps/pen/bxXJRronly this addition must be added

data-width="900" data-height="756"

<div class="„route-maps“">
    <a href="/Photos/Sardinien/Mitte-Westen.jpg" data-fancybox="route-maps" data-width="900" data-height="756">
        <img src="/Photos/Sardinien/Mitte-Westen.jpg" title="Capo Testa - Zum Vergrößern klicken" class="alignleft" style="border: 2px grey solid; padding: 5px; margin-top: 7px; margin-bottom: 20px;" width="450">
    </a>
</div>

Obviously, this only affects the individual image

rod barbee · 2019-02-19 23:10:23

Markus wrote:

rod barbee wrote:
Yes, in your custom css, override the width setting. You should be able to target to only the route maps by starting with the .route-maps selector.
Since the width is applies with inline css you’ll probably also need to use !important
with the .route-maps selector it doesn't seem to work.

I was thinking of something like this in your custom css file:

.route-maps .fancybox-content {
....your css...
}

that would only affect fancybox content that's within a div with the class of "route-maps"

rod barbee · 2019-02-19 23:11:31

<div class="„route-maps“">

Is this just a typo in the post? it should be:

<div class="route-maps">

Markus · 2019-02-19 23:19:42

I was thinking of something like this in your custom css file:
.route-maps .fancybox-content {
....your css...
}
that would only affect fancybox content that's within a div with the class of "route-maps"

Ah, ok, I understand

Markus · 2019-02-19 23:21:23

rod barbee wrote:

<div class="„route-maps“">
Is this just a typo in the post? it should be:
<div class="route-maps">

Thank you for pointing that out. Every now and then my App iA Writer makes the additional quotes. I don't know why

Community @ The Turning Gate

#1 2019-02-17 01:45:29

No more Magnific Popup in Backlight 2 possible?

#2 2019-02-17 02:14:07

Re: No more Magnific Popup in Backlight 2 possible?

#3 2019-02-17 02:24:53

Re: No more Magnific Popup in Backlight 2 possible?

#4 2019-02-17 03:58:02

Re: No more Magnific Popup in Backlight 2 possible?

#5 2019-02-17 04:16:07

Re: No more Magnific Popup in Backlight 2 possible?

#6 2019-02-17 08:15:02

Re: No more Magnific Popup in Backlight 2 possible?

#7 2019-02-17 19:02:18

Re: No more Magnific Popup in Backlight 2 possible?

#8 2019-02-18 16:40:59

Re: No more Magnific Popup in Backlight 2 possible?

#9 2019-02-18 16:59:31

Re: No more Magnific Popup in Backlight 2 possible?

#10 2019-02-18 23:27:20

Re: No more Magnific Popup in Backlight 2 possible?

#11 2019-02-19 15:28:17

Re: No more Magnific Popup in Backlight 2 possible?

#12 2019-02-19 16:28:57

Re: No more Magnific Popup in Backlight 2 possible?

#13 2019-02-19 23:10:23

Re: No more Magnific Popup in Backlight 2 possible?

#14 2019-02-19 23:11:31

Re: No more Magnific Popup in Backlight 2 possible?

#15 2019-02-19 23:19:42

Re: No more Magnific Popup in Backlight 2 possible?

#16 2019-02-19 23:21:23

Re: No more Magnific Popup in Backlight 2 possible?

Board footer