Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #687549

    I have created a masonry with several images that represent the cover of a brochure. Upon selecting (clicking on) the image I don’t want the image to be opened in a lightbox but to open a PDF file. I use the Real3D Flipbook plugin for this.

    I am able to use the provided shortcode on the Masonry itself but then clicking on an image will always open the same PDF file. How can I set the shortcode on an individual image within the masonry?
    The creator of the Real3D Flipbook plugin provided me with this: “add custom css class to each image, either from the admin or with some javascript code”.
    Does any know how can achieve this or how to use javascript for this? (I am newbie….)

    Related to my question I came across another topic talking about the same thing () and tried that code but am not sure where I can then put the custom css on an individual image.

    #688767

    Hey winnieandbuzz,

    It would be the best if you posted a link to your page and point out the image you would like to target :)

    Best regards,
    Yigit

    #688787

    Hey Yigit,

    Website is under construction. Please find login details and link to page concerned in private content.
    The issue is that I can assign a Custom CSS to the masonry element itself but then clicking on ANY image in the gallery will result in opening the same PDF file.

    When I add individual images all works fine because I can add the custom css to the element itself but I need it to work on individual images within the Masonry gallery. I made a trial page with three pictures and three different PDF’s, all stored in the media library in a folder named Kriesi Real3D Flipbook. Added the custom css to each individual image by using a plugin named “Custom Image CSS Classes” but that does not do the trick either. Feel free to deactivate this plugin if it conflicts with what you have in mind that could resolve this for me.

    I hope you can help!

    • This reply was modified 7 years, 6 months ago by winnieandbuzz.
    #690039

    Hi!

    We managed to make it work in the test page but we had to disable the theme’s default lightbox. And we added this code in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    ?>
    <script type="text/javascript">
    (function($) {
        function gh() {
    		var i = 0;
    		$('#masonry-flipbook .av-masonry-entry').each(function(i){	   
    		   $(this).addClass('flipbook' + i);
    		   i++;
    		});
    	}
    
    	gh();
    })(jQuery);
    </script>
    <?php
    }

    Cheers!
    Ismael

    #690185

    Thanks and appreciate your work. Downside is that my other galleries are not working anymore and therefore I will need to look for another solution.

    How can I turn on the lightbox that you switched off?

    #690387

    Solved, you can close this thread :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adding custom css to an individual image in a masonry gallery’ is closed to new replies.