Tagged: ,

Viewing 30 posts - 1 through 30 (of 32 total)
  • Author
    Posts
  • #965659

    Greetings Team,

    I currently have titles showing on the grid for image thumbnails: http://ilanwittenberg.com/tunnel-beach-dunedin/
    How can I have the titles show when an image is selected and enlarged in lightbox?
    Would like to have the title centred and be displayed just for a specific portfolio items please. Happy to add a CSS code for that.

    Many Thanks,

    ofekw

    #965801

    Hey ofekw,
    Right now your “mfp-title” is empty for the image in lightbox, please try adding your title to the “caption” field:
    2018-06-02_055732
    so it will show in lightbox:
    2018-06-02_060227

    Best regards,
    Mike

    #965837

    Hello Mike,

    Thanks for the prompt reply.
    Unsure what “mfp-title” is. All images have a caption.
    Currently the title is showing on the grid view. Can the title show when a thumbnail is selected from the grid and enlarged?
    Would like to have the title centred and be displayed just for a specific portfolio items please. Happy to add a CSS code for that.
    http://ilanwittenberg.com/tunnel-beach-dunedin/
    If the title cannot be displayed when enlarged than I will look at displaying the caption.

    Many Thanks,

    ofekw

    #965851

    Hi,
    Sorry “mfp-title” is the class of the element that shows the caption in lightbox, that means enlarged. Yours is empty. Please see the second image above, the arrow points to where it is suppose to show.
    I do see that in grid view it is showing. Can you please include a admin login in the private content area so we can take a closer look.
    Now that you see from the second image above, where the title is suppose to show, do you mean that you want the title centered below the image, or did you want the title centered over the image?

    Best regards,
    Mike

    #965853

    Hello Mike,

    Would be great to show the title centered below the image when enlarged – for specific portfolio items only.
    Admin rights granted.

    Thanks,

    ofekw

    #965856

    Hi,
    Sorry I get “Invalid username”
    please check

    Best regards,
    Mike

    #965858

    Apologies Mike,

    Let’s try again.

    #965860

    Hi,
    We are getting there :)
    user name seems good, password bad.

    Best regards,
    Mike

    #965867

    Must be a senior moment or two…
    Please try this one.

    #965869

    Hi,
    Thanks, I’m in now :)
    I’ll take a look and see what is going on.

    Best regards,
    Mike

    #965898

    Hi,
    I see that the lightbox, enlarged image, has the bottom bar hidden in your custom css, the class is “.mfp-bottom-bar” I commented out to allow this to show.
    But this is not why the title element is empty, I believe it is due to the old header.php in your child theme, many people are having issues with their lightbox because of the header.php in their child themes, different issues than you, but it’s worth a try.
    via ftp, please save a copy of your child theme header.php and then update to the new one and see if that helps.
    I also see that you are using a custom script in your child theme for the “magnific-popup” which is the other name for the lightbox, I wonder if that is causing a conflict?
    Perhaps try removing it and the code calling to it in your child theme functions.php via ftp, if updating the header.php doesn’t help.

    Best regards,
    Mike

    #967031

    Hi Mike,

    Backed up header.php and copied a new one from Enfold 4.4 (not from enfold-child). This made no difference. Is that where I was supposed to take a fresh copy from?

    Have also disabled “magnific-popup” in functions.php which made no difference either (it is used to open a popup when clicking on ‘Read More’ – there must be an easier and nicer solution?)

    Would love upgrading from Enfold 4.1.2 to Enfold 4.4 but all previous attempts caused the Lightbox to break: no navigation arrows, no ‘X’ to close and ‘WP Content Copy Protection’ plugin stopped working. Happy to follow specific detailed instructions!
    http://ilanwittenberg.com/tunnel-beach-dunedin/

    Thanks,
    ofekw

    #967798

    Hi,
    I have found the issue, it was this script in your custom-js.js:

    $('[title]').mouseover(function () {
          $this = $(this);
          $this.data('title', $this.attr('title'));
          // Using null here wouldn't work in IE, but empty string will work just fine.
          $this.attr('title', '');
      }).mouseout(function () {
          $this = $(this);
          $this.attr('title', $this.data('title'));
      });

    I have commented it out so you can see the title now works.
    2018-06-06_060118
    the color of the lightbox title and counter was very light and hard to see once the script was deactivated, so probably why we missed it the first time. I added this code in the General Styling > Quick CSS field for now so you could see it:

    .mfp-title,.mfp-counter {color: #000 !important;}

    Please clear your browser cache and check.

    Best regards,
    Mike

    #967817

    Great Job Mike!

    Well done on identifying the issue and changing the color. A few requests for the text showing under the enlarged images in Lightbox please:

    a. Can this be enabled for a single portfolio item only please? http://ilanwittenberg.com/tunnel-beach-dunedin/
    Please note that the Masonry Gallery, Element captions tab is showing: ‘Display Title’ for that portfolio item only, all other portfolio items are showing ‘Display Neither’. (Note: this seems to control the grid view only?)
    b. The displayed text is currently showing the caption inserted under the thumbnails inside the Edit Gallery screen. Can it show the Title field showing on the right side of the Edit Gallery page, inside ATTACHMENT DETAILS field when an image is selected? (same text as the title which is currently showing under each thumbnail on the grid view)
    Grid view: http://ilanwittenberg.com/tunnel-beach-dunedin/
    c. Can the numerator currently showing on the right side be removed?
    d. Can the title be centred under the image (currently showing left justified)?
    Items a. and b. are critical, items c. and d. are preferred.

    Much appreciated!
    ofekw

    #969945

    Hi,
    a. to enable only on this one page I changed the code to:

    .mfp-title,.mfp-counter {
    display: none;
    }
    #top.postid-10774 .mfp-title {
    display: block !important; 
    color: #000 !important;
    text-align: center !important; 
    }

    b. sorry in this case please try changing the caption text to reflect the title text you wish it to show.
    c. the numbers are hidden from the solution in part a.
    d. the text is centered from the solution in part a.
    Please clear your cache and check.

    Best regards,
    Mike

    #969994

    That’s great Mike!

    I see that Section ID contains the code line: ‘show-mfp-title’
    Moved the code from Quick CSS to style.css
    Very much appreciated,

    ofekw

    #970065

    Hi,
    Sorry I forgot to remove “show-mfp-title”, I was testing with it, but didn’t use it in the final solution.

    Best regards,
    Mike

    #1028652

    Hello Mike,

    Am trying to show the title currently displayed successfully for Tunnel Beach gallery (http://ilanwittenberg.com/tunnel-beach-dunedin/) in another gallery called New York (http://ilanwittenberg.com/new-york/)

    Have replicated the css code as showing below, but that did not do the trick.

    /*Centred caption for Tunnel Beach portfoilio item without counter */
    .mfp-title,.mfp-counter {
    display: none;
    }
    #top.postid-10774 .mfp-title {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }
    
    /*Centred caption for New York portfoilio item without counter */
    .mfp-title,.mfp-counter {
    display: none;
    }
    #top.postid-12132 .mfp-title {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }

    Any ideas please?
    Thanks,
    ofekw

    #1028684

    Hi,
    I took a look at the two pages, and the titles look the same to me, perhaps you just need to clear your browser cache, or I mis-understood.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    #1028686

    Hello Mike,
    Thanks for the prompt reply.

    I’m looking to display a title under each image similar to the one showing under each image when displayed large (not the grid) at http://ilanwittenberg.com/tunnel-beach-dunedin/

    I could not get the title to show in this album: http://ilanwittenberg.com/new-york/

    Thanks,
    ofekw

    #1028709

    Hi,
    Oh I see the title under the lightbox (popup) of the image.
    Well first please note that in your css above this code is ment to hide the title:

    .mfp-title,.mfp-counter {
    display: none;
    }

    Please make sure this is only in your css once for your whole site, because the next section is meant to override the first code by being placed right after it with more value for one page:

    #top.postid-12132 .mfp-title {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }

    So you only want to clone this code for your new page, but it has to be after the code that is trying to hide the element, I hope this makes sense.

    This is a trick we do when someone wants to hide all of the lightbox titles except for one page. It this still needed for your site?

    I recommend looking though all of your css and removing:

    .mfp-title,.mfp-counter {
    display: none;
    }

    then check that the titles are showing, then add this code back in only once at the beginning of all of your code, and ensure that it works on the pages you want it to and not on the others. If it didn’t work right more the code to the end of all of your code and try again, one way or the other it should work. Don’t forget to clear your browser cache, and any caching plugin, after each code change to make sure your looking at the live version.

    If you still are having trouble after this please include a admin login so we can assist.

    Best regards,
    Mike

    #1028728

    Hello Mike,
    Thanks for the detailed explanation.
    The title is currently showing fine for http://ilanwittenberg.com/tunnel-beach-dunedin/
    Can I display the title under additional portfolio galleries (such as http://ilanwittenberg.com/new-york/) if I repeat the code again for each page xxxx, when it is placed right after the one that works?

    #top.postid-xxxx .mfp-title {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }

    Thanks,
    ofekw

    #1028838

    Hi,
    Yes that should work, as long as there is not another insistence of the “display: none;” code further down.

    Best regards,
    Mike

    #1028951

    Hello Mike,

    Working now, had to tick “Delete old CSS and JS files” under performance.
    Can I include a hyperlink inside that footer? Tried the code below but nothing shows up under the first image (Empire State Building) when showing large:
    <a href=&quot;http://ilanwittenberg.com/contact/&quot;>Empire State Building</a>
    Thanks,
    ofekw

    • This reply was modified 1 year, 7 months ago by  ofekw.
    #1028981

    Hi,
    Yes you can use a link in the lightbox popup footer, you’ll want add some color to the link, because by default it is white.
    Also your element seems to be “display:none” right now.

    .single-portfolio .mfp-title a {
        color: #000 !important; 
    }
    .single-portfolio .mfp-title,.single-portfolio  .mfp-counter {
        display: block !important; 
        color: #000 !important;
    }

    Best regards,
    Mike

    #1028987

    Hello Mike,

    Yes, the links seems to be working, but the color is white! Two questions please:
    a. The current css code is:

    #top.postid-12132 .mfp-title {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }

    What code needs to be added or changed in css so the footer will display a hyperlink under the first image of http://ilanwittenberg.com/new-york/?

    b. The current caption under the first photo is:
    <a href=&quot;http://ilanwittenberg.com/contact/&quot;>Empire State Building</a>
    What changes are required to display it under the image when showing large?

    Thanks!
    ofekw

    #1028994

    Hi,
    Your css is for changing the text black, to change the link black you need to add “a” after the class, to make it work for both add another sector, like this:

    #top.postid-12132 .mfp-title,#top.postid-12132 .mfp-title a {
    display: block !important; 
    color: #000 !important;
        text-align: center !important; 
    }

    In my test, there is no need to change the link to make it show, just try the css above.
    If this doesn’t help, please include admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    #1029392

    Hello Mike,
    Works beautifully, thanks so much for your help!
    When using the following caption: <em>The Empire State Building</em>, 2018 © Ilan Wittenberg 2018, Limited Edition of 9 + 2AP <a href="&quot;http://ilanwittenberg.com/contact/&quot;">Buy Now</a> The hyperlink Buy Now drops to the second line when showing on a desktop with plenty of space: http://ilanwittenberg.com/new-york/
    Is there a way to keep the text on a single line please?
    Cheers,
    ofekw

    #1029393

    Hi,
    In the css above, please change “display: block !important;” to:
    “display: inline-block !important;”

    Best regards,
    Mike

    #1031057

    Hello Mike,

    The caption works nice on desktops. Unfortunately the text is displayed above the image when showing on smaller mobile devices.
    a. Is there a way to show the caption under the image or alternatively, prevent it from showing all together on smaller displays?
    b. How can the hyperlink Buy Now show in blue instead of black?
    The Empire State Building, 2018 © Ilan Wittenberg 2018, Limited Edition of 9 + 2AP Buy Now

    Thanks,

    ofekw

    • This reply was modified 1 year, 6 months ago by  ofekw.
Viewing 30 posts - 1 through 30 (of 32 total)

You must be logged in to reply to this topic.