Lightbox, prettyPhoto, MagnificPopup (?)

[ARCHE]

Hi,

I’ve been trying to wrap my head around how the image pop-up works. Please help me understand a couple of things:

Some background: here is the link to my website.
I have a custom page for Portfolio items, if it matters.

1st issue. While creating blog posts with images, I noticed that linking the images to “Media file” it is automatic that when I click on the image, this effect comes out.
BUT it is NOT automatic for Portfolio items.

I googled around and I found out that by putting prettyPhoto as image Link Rel I could have this pop-up window also for Portfolio items. But is this normal? Is there any setting I could edit to make this automatic also for portfolio items images without specifying prettyPhoto for each image?

2nd issue. I have noticed, so far, that there are two types of “light box”. See this link. How can I choose when to use which effect? And is it possible to have just one “pop-up window” effect for all images?

3rd issue. How can I display title / caption / description? Please see this.

Thank you in advance.

[Laura]

Hello, will assign the ticket to a higher support lever who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[ARCHE]

Any update on this please? Thanks…

[Andrei]

Unfortunately there is no option to control on which elements you have the lightbox feature enabled, at least no without some core changes to the theme.

Also regarding your screenshots, the first is magnific popup, what we use by default in our theme, meanwhile the second gallery might probably been created with a third party gallery plugin which might load it’s own lightbox script ( prettyPhoto in the second screenshot ).

Please let me know if you need any more details on this subject.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ARCHE]

Hi @Andrei,

Thanks for the clarification. I would like to ask you some more though:

So do you confirm that it is normal that when images are inserted within Portfolio Items and they are linked to Media File, magnific popup doesn’t show by default? And I that must put as Rel Link “prettyPhoto” or “modalPhoto” to enable it?

I would like you also to bring to your attention these questions of mine from another ticket related to this matter: https://archived.seventhqueen.com/forums/topic/magnific-popup-questions

Thank you.

[Andrei]

It totally depends on how you format the content of a portfolio page, I recommend you to enable visual composer for editing portfolio pages ( from visual composer settings ), and then you’ll have more control over it. By default, yes, images entered in the content links to their attachment page, but I assume this can be easily changed if you use visual composer and enter your image as an element.

Please let me know if I can help you with anything else.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ARCHE]

Hi @Andrei,

Visual Composer is already enabled for editing portfolio pages and as also already described previously images are set to link to the MEDIA FILE (and not attachment page).

And please try to answer to the following:

1. While creating blog posts with images, I noticed that linking the images to “Media file” it is automatic that when I click on the image, magnific popup comes out. BUT it is NOT automatic for Portfolio items. For the latter I must input “prettyPhoto” or “modalPhoto” as Link Rel to enable this. Can’t it be automatic also for Portfolio items?

2. The images that I have on my website don’t show by default any title (or description, or caption) at the bottom-left when they are clicked (and magnific popup effect is shown) even though I have input all the information for each image. How to fix this?

3. Also, I would like to have a popup with map. I saw that it is possible but could you kindly explain me how?

[Andrei]

Hi,

1. Yes, by default magnificPopup is available only for posts, here is a code snippet which should be added in your functions.php file:

COPY CODE

function kleo_before_main_content_portfolio(){
    if(is_singular('portfolio')){ echo '<div class="article-content">'; }
}
add_action('kleo_before_main_content', 'kleo_before_main_content_portfolio');

function kleo_after_main_content_portfolio(){
    if(is_singular('portfolio')){ echo '</div>'; }
}
add_action('kleo_after_main_content', 'kleo_after_main_content_portfolio');

2. Captions are available just in the post content not in the modal.

3. In order to be able to open links in iframe you will have to do two steps:

First add the following code in “Theme Options > General Settins > JavaScript code”:

COPY CODE

<script>jQuery(document).ready(function(){ jQuery('.openiniframe').magnificPopup({ type: 'iframe' }); });</script>

Secondly, create a link with the “openiniframe” class, here is an example:

COPY CODE

<a href="https://maps.google.com/maps?q=1+Place+Giovanni+da+Verrazzano,+69009+Lyon,+France&hl=fr&iframe=true" class="openiniframe">Open Google map</a>

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ARCHE]

Hello @Andrei,

I have one additional question about Google map in iframe as you described in your last message. I did it as you instructed, but now I would like the map to be in greyscale. Can you assist me how to do this properly? Thank you in advance…

[ARCHE]

PS. I had found this link, but I would need help how to apply it practically within Kleo theme.

[Author]

Posts