dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

Replace the default "X" close button with the classic lightbox cross in circle .png image #1041

Open rogerlyons opened 6 years ago

rogerlyons commented 6 years ago

I want to replace the default "X" close button with the classic lightbox cross in circle .png image but can't seem to find an example to try. Please assume no knowledge on my part. I have some existing CSS in place that I have tried for positioning and colour:

This worked well. I should say I'm using this within the WYSIWYG Web Builder 12 software which means I have to over-ride the default CSS generated by the package. Regards Roger

rogerlyons commented 6 years ago

I have found an answer that works for me. Within the document.ready script callOpen: function (scr,data,$this) { setTimeout(function() { $('.mfp-close').html('').append('<img class="mfp-closer" src="magnific/close.png" width="40px" height="40px"/>'); $('.mfp-closer').click(function() {$('.mfp-close').trigger('click')}); $('.mfp-close').on('mouseover', function () { $(this).find('img').attr('src', 'magnific/closeRed.png'); }).on('mouseout', function () { $(this).find('img').attr('src', 'magnific/close.png'); }); }, 0); },

And my other CSS changed to <style> /* Magnific Popup change close image position and overlay colour to solid */ .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close{ top: -12px !important; right: -30px !important; } .mfp-bg{ opacity: 1.0 !important; } </style>