使用javascript提取当前img src值

阿尔巴兹·侯赛因

我有以下模板，我要在其中提取当前img srcURL并使用它的花式框按钮。

例如：在下面的模板中，我们有3来自的https://farm6.staticflickr.com图像，单击这些图像时，fancybox将打开，并且右上角有3个按钮Facebook,Twitter,Close。现在，当我单击twitter按钮时，它应该打开当前图像的实际图像URL，即https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg在我们的情况下是第一个图像，其余图像也是如此。

https://codepen.io/anon/pen/JxmYVK

<style>
.fancybox-button--fb {
  padding: 14px;
}

.fancybox-button--tw {
  padding: 13px;
}

.fancybox-button--close {
  padding: 9px;
}

.fancybox-button--fb svg path,
.fancybox-button--tw svg path {
  stroke-width: 0;
}
</style>

<script>

// Create templates for buttons
$.fancybox.defaults.btnTpl.fb = '<button data-fancybox-fb class="fancybox-button fancybox-button--fb" title="Facebook">' +
  '<svg viewBox="0 0 24 24">' +
  '<path d="M22.676 0H1.324C.594 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294h-3.13v-3.62h3.13V8.41c0-3.1 1.894-4.785 4.66-4.785 1.324 0 2.463.097 2.795.14v3.24h-1.92c-1.5 0-1.793.722-1.793 1.772v2.31h3.584l-.465 3.63h-3.12V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .594 23.408 0 22.676 0"/>' +
  '</svg>' +
  '</button>';

$.fancybox.defaults.btnTpl.tw = '<button data-fancybox-tw class="fancybox-button fancybox-button--tw" title="Twitter">' +
  '<svg viewBox="0 0 24 24">' +
  '<path d="M23.954 4.57c-.885.388-1.83.653-2.825.774 1.013-.61 1.793-1.574 2.162-2.723-.95.556-2.005.96-3.127 1.185-.896-.96-2.173-1.56-3.59-1.56-2.718 0-4.92 2.204-4.92 4.918 0 .39.044.765.126 1.124C7.69 8.094 4.067 6.13 1.64 3.16c-.427.723-.666 1.562-.666 2.476 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.06c0 2.386 1.693 4.375 3.946 4.828-.413.11-.85.17-1.296.17-.314 0-.615-.03-.916-.085.63 1.952 2.445 3.376 4.604 3.416-1.68 1.32-3.81 2.105-6.102 2.105-.39 0-.78-.022-1.17-.066 2.19 1.394 4.768 2.21 7.557 2.21 9.054 0 14-7.497 14-13.987 0-.21 0-.42-.016-.63.962-.69 1.8-1.56 2.46-2.548l-.046-.02z"/>' +
  '</svg>' +
  '</button>';

// Make buttons clickable using event delegation
$('body').on('click', '[data-fancybox-fb]', function() {
  window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+encodeURIComponent(document.title), '','left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
});

$('body').on('click', '[data-fancybox-tw]', function() {
  window.open('https://replaceme.please');
});


// Custom options
$( '[data-fancybox="images"]' ).fancybox({
  buttons : [
    'fb',
    'tw',
    'close'
  ]
});


</script>
<h2>fancyBox v3.2 - Custom toolbar button</h2>

<p>
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
    <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
  </a>

  <a href="https://farm6.staticflickr.com/5820/30164525694_af1a1553df_k_d.jpg" data-fancybox="images">
    <img src="https://farm6.staticflickr.com/5820/30164525694_ec5f32fb0f_m_d.jpg" />
</a>

  <a href="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_b_d.jpg" data-fancybox="images">
      <img src="https://farm1.staticflickr.com/560/31434966252_8e1bc946da_m_d.jpg" />
  </a>
</p>

永远不能

尝试$.fancybox.getInstance()在您的click()回调中使用，fancybox实例将包含有关当前显示项目的信息。

$('body').on('click', '[data-fancybox-tw]', function() {
  let src = $.fancybox.getInstance().current.src;

  console.log('image src is', src);

  window.open(src);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。