Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 16, 2016 at 3:14 pm #687549
    winnieandbuzz

    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.

    September 19, 2016 at 8:41 pm #688767
    Yigit

    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

    September 19, 2016 at 9:00 pm #688787
    winnieandbuzz

    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 8 years, 2 months ago by winnieandbuzz.
    September 22, 2016 at 4:45 am #690039
    Ismael

    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

    September 22, 2016 at 10:43 am #690185
    winnieandbuzz

    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?

    September 22, 2016 at 8:00 pm #690387
    winnieandbuzz

    Solved, you can close this thread :)

  • Author
    Posts
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.