Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 10, 2019 at 8:57 am #1117335
    4jDesigns

    Hi All,

    I have been searching everywhere for a solution to get the close ‘X’ button position:fixed.
    I have applied the css to ‘.mfp-close’ and on inspection (chrome) I can clearly see it has the fixed position, but it still scrolls on the frontend.
    I fixed positioned the arrows and those work fine.

    Any solution would be greatly appreciated. I have attached a private link as still in development.

    July 10, 2019 at 2:38 pm #1117476
    4jDesigns

    Still can’t get it to work. Does this happen to anyone else? Is it only not working for me?

    July 11, 2019 at 7:27 am #1117692
    4jDesigns

    All sorted… I’ve managed a little hack to get it work like I want it to. So far it is the best solution I can find that won’t alter the plugin’s files. If anyone is interested, here is what I did…..

    Remember to use child-theme and you will need to be able to add your own jquery to the theme. Please check the forum for this.

    Anyways..

    1. Create a div just under the opening <body> tag in the header.

    <div id="close-image-modal" class="close-image-modal">×</div>

    2. Style the div/button as you wish in your child themes stylesheet, but remember to add the fixed positioning. (This is mine)

    .close-image-modal {
	display: none; /* hide initially. important */
	position:fixed;
	top:50px;
	right:20px;
	height:50px;
	width:50px;
	text-align:center;
	line-height: 50px;
	font-size:30px;
	background-color: #fff;
	color:#000;
	z-index:2000;
	border-radius: 50%;
	transform: all 0.5s ease-out;
}
.close-image-modal:hover {
	background-color: #76787c;
	color:#fff;
}
/* hide the close button the magnific poopup creates */
button.mfp-close {
	display:none !important;
	opacity: 0 !important;
	visibility:hidden !important;
}

    3. Now add this jquery to your custom .js file.

    (function($) {
  $(document).ready(function() {
    $("#close-image-modal").hide(); // make sure that the close button is hidden on document load
    $(".avia_image").on("click", function() { // when image is clicked it needs to display the close button (if you ot using lightboxes everywhere, you will need play around with classes related.
      $("#close-image-modal").show();
    });
    $("#close-image-modal").on("click", function() { // when custom div/button is clicked, it will trigger the actual close button and hide itself again.
      $(".mfp-close").trigger("click");
      $("#close-image-modal").hide();
    });
  });
})(jQuery);

    Make sure you clear all cache and all should be good to go. This is a quick solution for me, but if anyone has a more elegant way, please do post.
    Cheers.

    July 12, 2019 at 12:12 pm #1118044
    Ismael

    Hi,

    It looks awesome. Good job! And thank you for sharing.

    Have a nice day!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.