Fotorama - clickable images on slider for external URL

Question

PHP

<? php
//slider content
$slider_img_1 = 'images/main001.jpg';
$slider_text_1 = 'Urban living is about being an animal';
$slider_link_1 = 'livemag/01/';
?>
 
<div data-img="<?php echo $slider_img_1 ?>" data-caption="<?php echo $slider_text_1 ?>" >
    <a href='<?php echo $slider_link_1 ?>' target='_blank'></a> 
</div>

 

CSS

.fotorama__html {
    a, div {
      display: block;
      height: 100%;
      // Transparent links are not clickable in IE,
      //    but non-existent background fixes this.
      //   (Put an empty 1×1 image here to avoid
      //    errors in console.)
      background: url(_.gif);
    }
}