CODEWITHSUNDEEP
jqueryfancybox-2
cksrc
cksrc

Reputation: 2347

fancybox link redirects browser to image path

I'm trying to display which is zoomed in a fancybox(2) when clicked. The problem is that when clicking on the image although it is correctly displayed inside the fancybox the browser navigates away from the page and goes to the link defined in the href. How can I prevent this?

<script type="text/javascript">
  $(document).ready(function() {
  $(".fancybox").fancybox({
    helpers :{
      title :{
         type : 'over'
      }
     }
   });
 });
</script>

<table>
  <tbody>
    <tr>
      <td>
        <a class="fancybox ui-link" title="My Image href="http://localhost/images/my_image.jpg"><img style="width:64px; height:64px;" src="images/my_image.jpg" alt=""></a>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 1570

Answers (2)

LuizEduardoMPF
LuizEduardoMPF

Reputation: 946

I know it's late, but ... it can help someone.

I had the same issue and realized that we have use data-src instead of *href:

<a data-fancybox="image" data-src={{asset('uploads/sobre/'.$itemimage)}}"  data-caption="{{$item->title}}">

Upvotes: 1

pistou
pistou

Reputation: 2867

First, there's a " missing for the Title attribute in your html code.

Second, I'm not sure but you should try with relative path to your image instead of absolute path.

For instance :

<a class="fancybox ui-link" title="My Image" href="images/my_image.jpg"><img style="width:64px; height:64px;" src="images/my_image.jpg" alt="" /></a>

Upvotes: 0

Related Questions