How do I link gallery images to custom popups?

PopUp Pro is a dream come true for me. I needed somthing to create popup pages that were each customized. Creating the content is a breeze. Now, how can I create an image gallery and point each image to the customized popup? I'm using Headway Themes and there are any number of gallery options. Perhaps the WP gallery would work as well? I've attached an image of what I want to do. My site will feature performers and, when you click on the image in the gallery, it will popup with information about that performer. Thanks!

  • Tyler Postle

    Hey Terry,

    Hope you're doing well today and thanks for your question!

    For that option in the Pop up you first need to activate the "Javascript Events" condition in the PopUp > Settings :slight_smile:

    Then you will see the option in the behaviour section as my screenshot illustrates. Then, providing each image has it's own CSS ID then it would be as simple as pasting that ID in the field shown.

    Hope this helps Terry! Let us know if you need any further assistance here.

    All the best,
    Tyler

  • Terry

    Hi,
    Looks like this discussion is still open and I need some more help. I've been able to make some rudimentary popups (intending to finalize as time goes on). Before I spend more time, I want to make sure they will work with my gallery. I'm using Headway Themes and their Headyway Rocket Gallery Plus.

    You've commented already on what needs to be done. Now I need to know how to find the CSS id for each popup and what exactly to do with it. (I did say I'm a novice and that means I don't know much about code...which is why I'm using Headway...although that's not as easy as proposed....but that's another story.)

    Check out this page and let me know if you have any advice. I've made rough popups for the first three images in the gallery. How do I connect the photo to the popup?

    http://yodelinghalloffame.com/yodelers/yodelers-now/

    Thanks in advance for your help and let me know if you need any more information.

  • Tyler Postle

    Hey Terry,

    Hope you're doing well today!

    I'm not too familiar with the headway rocket gallery plus. Are you able to enter your own links for the images in the gallery?

    You can make your ID's whatever word(s) you like and then place it in the pop up field I highlighted above such as "#yodeler-1"

    Then, in the link for the image you want it to look like this:

    <a id="yodeler-1" href="http://yodelinghalloffame.com/yodelers/yodelers-now/#" ><img src="http://imageurl.com" ></a>

    Notice how i included the "id=yodeler-1" in the 'a tag'. If you're still unsure on this then do you mind granting support access so we can take a closer look at the gallery options? :slight_smile:

    You can grant support access via admin dashboard - WPMU DEV > Support > Support Access > Grant Access.

    Look forward to hearing back!

    All the best,
    Tyler

  • Terry

    I would love for you to go in and look around so I have activated the access. I started with headwaythemes because you're not supposed to have to know code. Funny thing is, the answer to every challenge is "you have to add this code". So, i've accepted that and have decided I might as well see what I can do. By the looks of it, code is easy but overwhelming. Hopefully, one day I'll be able to help myself. It's pretty late in the game for me, but learning keeps you young!

    On the other hand, I have to say I have seldom seen the high level of friendly and eager support that I have experienced with you guys! It is such a relief to have such a responsive resource who will not only help with the products they sell but just about every other aspect of Worpress. I'm looking forward to the time I can take advantage of your other products.

    Thank you!
    Terry

  • Michelle Shull

    Hey there, Terry!

    Okay, we're going to look at each yodeler in your grid as their own person.

    Let's call David here #1, so you can use Tyler's code above:

    <a id="yodeler-1" href="http://yodelinghalloffame.com/yodelers/yodelers-now/#" ><img src="http://imageurl.com" ></a>

    For David's gallery link, you'll use this, changing http://imageurl.com to the URL for David's image.

    For David's popup, you'll add:

    #yodeler-1

    as the CSS selector.

    Next, move through all the yodelers, giving each one a number, so, for example, you could have something like this:

    Jane - #2
    Joe - #3
    Jim - #4
    Jamilla - #5, etc.

    You'd adjust each yodeler's gallery link by changing the "1" in the first part of Tyler's link to the number for each yodeler, and changing the link to match that particular yodelers image.

    Same for the popups. In each yodelers pop up, add #yodeler-2, #yodeler-3, #yodeler-4, etc. until each yodeler has a pop up devoted to them.

    Support access expired, sorry about that. We're a little short staffed due to the holiday. I'm happy to set up an example if you need me to and want to re-enable access, but I didn't want to leave you hanging if you wanted to give it a go yourself, as well.

    Thanks, Terry!

  • Terry

    Well, I couldn't figure it out. I put the link in the gallery album edtiing the artist's image. This is the link I used:

    <img src="http://yodelinghalloffame.com/wp-content/uploads/2014/11/David-Bradley.jpg; >

    I also put in the CSS selector in the popup settings.

    if you go to the page, It looks like now both link urls are being used. It appears I can't delete the original url from the edit window in the album. I'm thinking I'm putting the url in the wrong place. I've attached a couple of images.

    I've submitted a support request to Headway Rocket to see if they can help. They've assured me I can add a custom link to an image. Hopefully they can give me a better idea of just how that works. Unfortunately, their documentation is far from complete.

    If you'd still be willing to go in and look around to see what you can find, that would be okay with me. I've given you access again.

    Thanks again for your help.
    Terry

  • Terry

    Me again.

    I've been told (finally) that the pop-up will not work in the Gallery block for Headway.

    Apparently I can create a Wordpress Gallery and insert it with shortcode. I'm guessing that Popup would work the same way with any wordpress gallery.

    Can you guide me on how to get Popup to work in a basic wordpress gallery? I'm not finding were I can add the code you provided. Or, can you recommend a gallery plugin that will work with Popup? Then I can put into Headway with the shortcode.

    I'm not ready to give up yet.

    Any help is greatly appreciated!

    Terry

  • Michelle Shull

    Hi, Terry!

    I just tried this on my own site with a default WP gallery, and I was able to make it work with PopUp by using the nth-of-type CSS pseudoelement, like so:

    .gallery-item :nth-of-type(1)

    This targeted the first image in my gallery, each subsequent image, left to right, then top to bottom, is assigned a different number in the parentheses.

    So this: .gallery-item :nth-of-type(2) would be the second image in the top row.

    On the gallery settings themselves, I set the link to "none" instead of the default "attachment page" or "media file."

    I attached some screenshots, let me know if any of this isn't clear!