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

General Discussion

Christian Lüthy
Christian Lüthy
18,715 Points

Feedback on my personal project

Hi everyone,

I’ve been useing the skills I’ve learned to create a new photography website.

Take a look at http://gws-chl.ch. (Maybe also take a look at it on your phone for the mobile version.) I used everything from html and css to php, javascript and jquery.

I would love to know what you think and to tell me of any bugs you may find.

Thanks, Chris

2 Answers

Holt Hunter
Holt Hunter
4,629 Points

I can't find any problems, but I think it would be neat if when you click on a picture it slides out instead of just suddenly becoming bigger. Not sure how possible that is but it's just an idea.

Christian Lüthy
Christian Lüthy
18,715 Points

Yes that would be cool. I haven't thought of that. I've found a little issue there. Sometimes the images enlarge to the left side and other times to the right side and I have no idea why or how to fix it.

Holt Hunter
Holt Hunter
4,629 Points

What kind of code are you using for that?

Christian Lüthy
Christian Lüthy
18,715 Points

I've written some jquery that toggles classes on the images and the p tags for the image captions:

javascript:

$(function(){
            // Enlarge Photo on click
            $('.photo').on('click', function(){
              $(".photo").not(this).removeClass("photoBig")
              $(this).toggleClass('photoBig')
              $('img ~').not($(this).nextAll()).removeClass('photo_beschrieb')
              $(this).nextAll().toggleClass('photo_beschrieb')

            });

div of 1 image in the markup:

<div>
  <img src='img/logo/placeholder.gif' data-original='img/photo09/photo09_no01.jpg' alt='No 01' class='photo lazy'>
  <p class='photo_beschrieb_hidden bildbeschrieb'><span>No 01</span></br>Hünenberg, Zug, Switzerland</br></br>47° 11′ North , 8° 26′ East</br></br>04.07.2006</br></br>NIKON D70s</br>AF-S DX Zoom-Nikkor 18-70mm ƒ/3.5-4.5G IF-ED</br></br>27 mm</br>ISO </br>ƒ/13</br>6″</p>
  <img src='img/maps/map_photo09_no01.png' alt='Karte Hünenberg' class='karte bildbeschrieb'>
</div>

in the css I just changed the percentage of the height of the image in the .photo class from 61.8% to 100% in the .photoBig class.

Holt Hunter
Holt Hunter
4,629 Points

You could try this CSS, all you really need to do is add transition: all 1s ease; to each class.

.photo {
display: inline-block;
height: 61.8%;
width: auto;
margin-right: 4px;
vertical-align: top;
background-color: #fff;
transition: all 1s ease;
}

.photoBig {
height: 100%;
transition: all 1s ease;
}

This should work. I tested it using the developer tools on Chrome. I am not sure if it will work on all browsers though

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

I love the styling and overall look. Nice use of white space.

Functionality-wise I think the scrolling method has to change. It took me a few seconds to realize how to go left and right. I also think you need to increase the font size a bit in the photo captions, and possibly heavier font-weight.

Overall great work though. I viewed on 1980x1020 laptop in Chrome.

Christian Lüthy
Christian Lüthy
18,715 Points

Thank you for your feedback. What do you mean by scrolling method?

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

I just mean to go left and right. I had to bring the mouse to the very bottom of the page using the scroll bar there.

Christian Lüthy
Christian Lüthy
18,715 Points

I'm just so used to my trackpad on the notebook and my magicMouse that it didn't even occur to me that you also have to provide a way to physically click and drag a scroll bar. thanks