CODEWITHSUNDEEP
javascriptjquery
Diogo Reis
Diogo Reis

Reputation: 11

How to link a url in a javascript image

I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.

<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>

Upvotes: 1

Views: 218

Answers (1)

walroar
walroar

Reputation: 82

You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.

For example on the HTML

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

And your Javascript

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

EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/

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

Upvotes: 2

Related Questions