Переместите кнопку «закрепить» в Fancybox v3 - PullRequest
Новая
       101

Переместите кнопку «закрепить» в Fancybox v3

0 голосов
/ 09 апреля 2020

Я действительно изо всех сил пытаюсь вставить кнопку Pinterest "прикрепить его" в подарочную коробку. Кнопка отображается при наведении на изображение (в «режиме галереи»), но она не включена, и исчезает, когда мышь оставляет изображение, чтобы щелкнуть по нему ...

Вот код: 

jQuery(document).ready(function($) {
$('[data-fancybox]').fancybox({
		afterShow : function() {
			 
			// Try to fix pinterest button on fancybox
			$(".fancybox-image").mouseenter(function(){
				//console.log("hover");
				$("span[class^='PIN']").appendTo($(".fancybox-content"));
			});
			$(".fancybox-image").mouseleave(function(){
				//console.log("delete the pin");
				$("span[class^='PIN']").remove();
			});
		}
	});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="span-6 span-3">
		    	<li class="projects hover_img">
					<p>
								<a data-fancybox="group15" class="gallery" href="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"><img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" alt="" height="289" width="230"/></a>
                <a data-fancybox="group15" class="gallery" href="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg"><img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" alt="" height="289" width="230"/></a>
		    			
            			</div>
            		</p>
            	</li>
            </div>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
	<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
  <script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true" data-pin-round="true"></script>

Как вы можете видеть из фрагмента, я попытался переместить диапазон, созданный сценарием pinterest, с помощью appendTo (), но он не работает .. .

Если кто-нибудь может мне помочь, у меня нет идей ...

Большое спасибо!

...