Question

我需要在图像中放置一个href来链接一个url，这将在包含下面代码的三个图像中完成。当有人＆＃34;点击＆＃34;在图像上转到另一页。

<div class="header_slider">    
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
  /* index slider */
  jQuery(function(){
    jQuery('#camera_wrap').camera({
      alignmen: 'topCenter',
      height: '32.882%',
      minHeight: '50px',
      loader : false,
      fx: 'simpleFade',
      navigationHover:false,
      thumbnails: false,
      playPause: false 
    });
  });
// ]]></script>
<div class="fluid_container">
  <div class="camera_wrap camera_orange_skin" id="camera_wrap">
    <div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_1"></div>
      </div>
    </div>
    <div  data-src="{{media 
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_2"></div>
      </div>
    </div>
    <div  data-src="{{media     url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
      <div class="camera_caption fadeIn">
        <div class="right_slider_side sl_3"></div>
      </div>
    </div>
</div>
<div class="clear"></div>

Answer 1

您可以在每个div上添加一个带有data-src标记的类，并在click事件上使用JQuery将它们重定向到另一个页面。添加另一个数据标记以存储目标网址。

例如在HTML

上

<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">

和你的Javascript

$('.clickMe').on("click", function() {
  window.location.href = $(this).data('destination');
});

编辑：实际上，您使用的插件已经内置了它的功能。在您的div上添加data-link属性，如下所示。在此处阅读其所有功能https://www.pixedelic.com/plugins/camera/

<div  data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">

如何在javascript图像中链接网址

1 个答案: