Html href not opening link

Issue

I am making a portfolio page, which is going fine, except the uploading project link. This is the code I am working on (it's a free online template so cannot change much of the code)

<article class="from-left">
  <a href="images/fulls/01.jpg" class="image fit">
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
   </a>
</article>

The issue is that when I replace the image with a link to a github page, nothing happens and the webpage goes into a loop type waiting image.

 <article class="from-left">
  <a href="www.google.com" class="image fit">
    <img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
  </a>
</article>

My HTML and CSS skills are very basic level, not sure what is the issue. What I want is that when I click a picture it opens up the link provided. Below is the free html template I am using

https://html5up.net/big-picture

Solution

I've read your template readme file and understood what is happening. The problem is that the template uses a component called "jquery.poptrox". This component makes the gallery links to open a popup with that picture.

To do what you want, find the file "main.js". Then look for $gallery.poptrox

You have to comment this entire block. It will be like this:

//$gallery.poptrox({
//    baseZIndex: 10001,
//    useBodyOverflow: false,
//    usePopupEasyClose: false,
//    overlayColor: '#1f2328',
//    overlayOpacity: 0.65,
//    usePopupDefaultStyling: false,
//    usePopupCaption: true,
//    popupLoaderText: '',
//    windowMargin: 50,
//    usePopupNav: true
//});

Notice that I put a double slash to comment each line. This should disable that component and your links now will open what you want instead of opening a popup. You can also delete this block of code, but I don't know if you would like the original behaviour back in the future. So, it's up to you.

Important:

Your links should start with "https://". So, it'll be like this:

<article class="from-left">
    <a href="https://www.google.com" class="image fit">
        <img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
    </a>
</article>

If you want your link to open in a new tab of the browser, add the target="_blank" attribute.

<article class="from-left">
    <a href="https://www.google.com" target="_blank" class="image fit">
        <img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
    </a>
</article>

Answered By - Felipe Jacob