Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Add Image Gallery Content

Michael Leismeister
Michael Leismeister
3,706 Points
Posted by Michael Leismeister
Michael Leismeister
3,706 Points

How to link back to website after someone clicks picture in gallery?

I have been going through how to make a website course... In the portfolio page there is a gallery of art... I am wondering how a person can add a 'back to portfolio page link' once someone clicks on a picture. Can this be done with HTML? or is it a JS?

code -example <a href="img/pic.jpg"> <img src="img/pic.jpg" alt="" class="circle_port"> <p>Experimentation with color and texture.</p>

3 Answers

Christian Ebner
Christian Ebner
12,132 Points
Christian Ebner
Christian Ebner
12,132 Points

Hey Michael,

Maybe you could clarify your question a little. To me it seems like you want to get back from the source image after clicking a link like:

<a href="/images/nameOfImage.jpg"><img src="/images/nameOfThumbnailImage.jpg"></a>

This is in most cases a bad idea to do (as to everything there are exceptions) as the user is pretty much stuck on the image and has to hit the back-button to get back to your page.

For a nice solution you may want to check out ways to include lightboxes in your portfolio page. This will increase the design-value of your site by not redirecting directly to the image but showing the picture and having an easy way for the User of the Site to go back to the portfolio. In fact - with lightboxes they never leave the portfolio. You can find lightbox tutorials here on TTH.

Check out the JQuery Basics Course for a simple yet nice Lightbox Tutorial: JQuery-Basics

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It can be as simple as just adding a link back to the index.html page.

But if the course puts the page in a separate directory from from the index.html page then there's a way of linking back to the home page by putting "../" before the relative file path.

<a href="../index.html">

Doing this tells the browser to go one directory out and then search again for the page, and then link to it. If did not have this, the browser would look for the index file in that folder and hence cause a broken link.

This might not be what you're looking for but it's certainly a way to lonk back to the home page by putting a link on the image. :-)

Michael Leismeister
Michael Leismeister
3,706 Points
Michael Leismeister
Michael Leismeister
3,706 Points

<a href="img/pic.jpg"> <img src="img/pic.jpg" alt="" a href="../index.html"> <p>Experimentation with color and texture.</p> </a> so how would you add a link to the image? Something like this? This does not seem right.