Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #251301

    Hi, I am trying to make a function to add an overlay to the images on my site, and I nearly have it working. I’ve tried for a number of hours today but I cant get any further and would appreciate any help.

    The images have this as the class when I load the page:

    class="avia_image avia-builder-el-9 el_before_av_textblock avia-builder-el-first avia-align-center avia_animated_image avia_animate_when_almost_visible top-to-bottom avia_start_animation"

    What I would like to try do is after each image with this class (or just the avia_image is maybe needed?) is to add the below code by using a function.

    $output;
    $output .= ‘<div class=”box-overlay”>’;
    $output .= ‘<span class=”overlay-background” style=”width:300px;height:200px;”></span>’;
    $output .= ‘<div class=”text-wrap”>’;
    
    $output .= <h4>***Image Title with some code?***</h4>
    $output .= <p>***Image Description Here with some code?***</p>
    
    $output .= ‘</div>’;
    $output .= ‘</div>’;

    I am stuck on two things.

    1. How to add the code after each image with that class. (I think I need an if statement in my function somehow)

    2. How to take the Title and Description set for the image and place it in the code.

    Thanks for any help!

    • This topic was modified 9 years, 11 months ago by danieldunn10.
    #251475

    Hi danieldunn10!

    Your best route would be to a find a plugin that does what you are looking for via javascript after the page is loaded. PrettyPhoto, which is already running in the theme does this already so you can look at that in the js folder as an example.

    Its far beyond what we can assist with via support however as the depth of customization is pretty big.

    Regards,
    Devin

    #251482

    Hi Devin, thanks for your reply.

    I almost have it working perfectly using this css

    .image-overlay.overlay-type-extern .image-overlay-inside
    {
    content: url(https://kristinadunn.co.uk/wp-content/uploads/2014/04/KristinaOverlay.png);
    top: 0px;
    left: 0px;
    width: 100%;
    }

    The only problem is I cant change the overlay for each image. Would there be a way to add to the class of the overlay, something like the title to be able to distinguish them.

    Would you mind taking a quick look at the site? I am so close! – http://goo.gl/NjMxBI

    Thanks v much

    #251617

    Hi!

    Please see scope of support once again. Thank you for your understanding!

    Best regards,
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Function to add a DIV to the page’ is closed to new replies.