Html href not opening link - html

Question

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

Answer 1

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>

Answer 2

Try changing "www.google.com" to "https://www.google.com", right now the link may be sending you to [your website]/www.google.com

Answer 3

You can add https:// in URL and target="_blank" so that the link will open in a new tab.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="Sample Image" />
</a>
</article>
Here is link of JSBin