Add floating button to Magnific images

trummonte · 2016-03-15 05:51:35

First of all, I am new to PHP plugins. I was wondering if it would be possible to a a floating button on top of the large Magnific images? I would like it to link to another webpage. Thanks in advance!

Monte

rod barbee · 2016-03-15 06:32:28

I don't think it's going to be a phplugins sort of enhancement unless it's to inject additional javascript into a gallery page. You'll likely need to alter the Magnific javascript, if it's even possible to do what you want. Here's the documentation page for Magnific:
http://dimsemenov.com/plugins/magnific- … ation.html

Depending on exactly what you're trying to do, there may be another way. For example, if you simply want a gallery of images that all link to different pages, that's easy enough to do with Autoindex and the Autoindex Enabler.

trummonte · 2016-03-15 06:37:22

Hi Rod. All I really want to do is have a link for each large image to go to another webpage. I tried the HTML trick of adding a href in the caption and it shows up, but when I go to click on it, the top bar and bottom bar go away. The Autoindex idea won't work because the main reason for the gallery is to view the images large. Thanks much!

Monte

rod barbee · 2016-03-15 07:59:21

I'm guessing the html in the caption is messing with the script. Are you using double quotes or single quotes in the link html?
If single, try double. If double, try single.

trummonte · 2016-03-15 08:04:26

I am using single quotes and it seems to be working fine. If I hover over the link, the correct path shows. The problem is that the behavior for when you click on on a large image is to cycle between turning the top and bottom bars on and off. You can never click on the link! Thanks for your help Rod.

Monte

Matthew · 2016-03-15 15:07:48

Hi Monte,

Does the button have a unique link for each image, or do all images have the same button (w/ same destination)?

You would want to look at my code for launching Magnific. There's already lots of examples in there how to add a button to the interface, as that's exactly what my code is doing. You'll find that in the footer area of the page's source code, not in the .js file.

Or if you're working in the plugin source, rather than the exported gallery, then you'd find it in /lib/js/magnific.cfg.js.

The section beginning here is the physical markup for the buttons:

                image: {
                    markup: '<div class="mfp-figure">'+

What occurs when clicking those buttons is defined in the "delegate" functions above that. You'll see that each button has it's own delegate function matched by class.

So this button:

                                    '<li class="mfp-permalink"><a><i class="fa fa-fw fa-link"></i></a></li>'+

Is governed by this delegate function:

                    .delegate(".mfp-permalink a","click", function(e){
                        e.preventDefault();
                        window.location.href= albumURL + currentImage + "-single.php?mobile=true";
                    })

If you want to add a button, then you'll need to setup a similar pair of new items, then provide styling for the button in your custom CSS.

Take note, adding a button here is NOT a job for PHPlugins. You will need to get your hands dirty and make additions to the source, either in the plugin itself or in an exported gallery template.

I hope that's helpful.

Cheers,
Matt

trummonte · 2016-03-15 22:04:58

Thanks Matt. I will dig in and see what I can do. I sure appreciate the help!

Monte

trummonte · 2016-03-16 07:27:25

Hi Matt. I have been playing around with this today. If possible I would want the button to be unique per image. Would it be possible to put that info in the image metadata and use it as a variable in the Magnific javascsript? Thanks Matt.

Monte

Matthew · 2016-03-16 17:12:38

trummonte wrote:

Hi Matt. I have been playing around with this today. If possible I would want the button to be unique per image. Would it be possible to put that info in the image metadata and use it as a variable in the Magnific javascsript? Thanks Matt.
Monte

Well, there are two ways to go about it then.

The easiest way, if you have control over these button URLs, is to make those URLs uniform, except for the image file name. This is basically what we do with our single-image HTML pages. So you might have URLs like:

domain.com/always-the-same-path/image-file-name.html

or:

domain.com/always-the-same-path/uniform-prefix_image-file-name.html

In which case, you can get the file name using Javascript, then build your delegate around it. In the code we've already written, the image id is "currentImage", which is the file name without ".jpg". Look at what we're doing with the permalinks' delegate function, and you can see how we concatenate that id in a URL for the single-image page. Do something similar for your buttons.

The difficult way -- if you don't have the luxury of uniformly constructed URLs, or if the URLs cannot be formed using the image id -- is to edit the image loop in the gallery template or plugin, and that's going to get dicy. You'll want to insert an HTML5 "data-" attribute, which you can later pull using Javascript.

The exported gallery template will be easier for you to parse. The plugin code ... well, I wrote it and even I don't like to work on it. It's as clean as I can make it, but the nature of Lightroom plugins is such that the code is a nightmare by necessity.

Hopefully you can use the former approach, and leverage the variables we've already built into the Magnific CFG script that you're editing.

trummonte · 2016-03-17 00:59:06

Thanks Matt. I figured out I could do it the easy way and use the file name. It works just great. Here is a link to a gallery (work in progress) that I have it setup with:

https://www.portfolios.montetrumbull.com/galleries/

Clicking on the shopping cart button will take you to the same image at ArtStoreFronts. I am going to be trying out their service but still wanted my favorite images in a nice gallery like yours! I will also be using TTG for my blog and client and family albums.

Thanks so much for your help.

Monte

Matthew · 2016-03-17 15:57:53

Glad you're able to do it the easy way.

Strangely, though, I'm not able to access your gallery to check things out. If displayed errors are to be believed, the page seems to get stuck in a redirect loop. You might need to troubleshoot your Javascript, else it might be something odd with .htaccess or PHP redirects. Either way, highly peculiar.

Daniel Leu · 2016-03-18 01:10:31

Works fine for me. I like the 'hack' you did to use ArtStoreFronts. This works well!

BTW, when I do hacks like this, I am overzealous and keep a copy of the changes as a separate copy outside of the TTG installation. This way I still can get my changes back even if I overwrote my template file due to a version update... yep, it happened ;-) And then there is always yet another backup.

trummonte · 2016-03-18 01:17:24

Thanks Matt & dl. Matt, I am pretty sure the problems you were having were due to me installing a new security certificate and some changes I made to .htaccess (bad timing!). Things are getting cleaned up this morning.

dl, I made sure to save a copy of the file!

Monte

trummonte · 2016-03-18 01:34:13

Hey Rod. I am still waiting to hear back from Dreamhost to get my certificates in order. I use Cloudflare which adds another layer of complexity! You can get to the unsecure site at: http://www.portfolios.montetrumbull.com/galleries/ for now. Thanks!

Monte

rod barbee · 2016-03-18 01:36:51

after re-reading your earlier post that things were getting cleaned up, I deleted what I'd posted, figuring you already knew.

But your new button works great!

trummonte · 2016-03-18 01:38:19

Thanks Rod!

rod barbee · 2016-03-18 01:43:08

What you've done is pretty cool. I'm guessing others will be asking you how you did it

Looks like you ended up using the image title for the url to ArtStoreFronts?

Matthew · 2016-03-18 14:20:59

I'm still getting issues with the cloudflare security nonsense. Visiting the unsecure address works better for me.

This is what I've got:

There are issues with the site's certificate chain (net::ERR_CERT_COMMON_NAME_INVALID).

And this:

This server could not prove that it is www.portfolios.montetrumbull.com; its security certificate is from ssl277278.cloudflaressl.com. This may be caused by a misconfiguration or an attacker intercepting your connection.

Fun stuff, I know. Hopefully that will help you with your host.

Getting a look at the site, I always love to see your incredible images. Tremendous stuff!

Digging into your Javascript, you might update your delegate function to use "window.open", rather than "window.location". This will allow you to open the link in a new browser tab, keeping the gallery open.

.delegate (".mfp-artstorefronts a","click", function(e) {
    e.preventDefault();
    window.open("http://montetrumbull.artstorefronts.com/galleries/art_print_products/" + artstorefrontsTitle);
})

trummonte · 2016-03-19 04:11:56

Thanks Matt. Good suggestion. All is finally well with my security certificates. It really screwed things up there for a while!

Monte

Community @ The Turning Gate

#1 2016-03-15 05:51:35

Add floating button to Magnific images

#2 2016-03-15 06:32:28

Re: Add floating button to Magnific images

#3 2016-03-15 06:37:22

Re: Add floating button to Magnific images

#4 2016-03-15 07:59:21

Re: Add floating button to Magnific images

#5 2016-03-15 08:04:26

Re: Add floating button to Magnific images

#6 2016-03-15 15:07:48

Re: Add floating button to Magnific images

#7 2016-03-15 22:04:58

Re: Add floating button to Magnific images

#8 2016-03-16 07:27:25

Re: Add floating button to Magnific images

#9 2016-03-16 17:12:38

Re: Add floating button to Magnific images

#10 2016-03-17 00:59:06

Re: Add floating button to Magnific images

#11 2016-03-17 15:57:53

Re: Add floating button to Magnific images

#12 2016-03-18 01:10:31

Re: Add floating button to Magnific images

#13 2016-03-18 01:17:24

Re: Add floating button to Magnific images

#14 2016-03-18 01:34:13

Re: Add floating button to Magnific images

#15 2016-03-18 01:36:51

Re: Add floating button to Magnific images

#16 2016-03-18 01:38:19

Re: Add floating button to Magnific images

#17 2016-03-18 01:43:08

Re: Add floating button to Magnific images

#18 2016-03-18 14:20:59

Re: Add floating button to Magnific images

#19 2016-03-19 04:11:56

Re: Add floating button to Magnific images

Board footer