This post is for my social network course and is assuming you have enrolled and reached the relevant section. If you haven’t yet enrolled in the course, click here to enrol.

For this tutorial, you should already have completed the video which shows you how to incorporate uploading images to the newsfeed.

Let’s implement a little feature where the images on the newsfeed are smaller, but when clicked, increase in size.

So in your css file, we already added this style to the uploaded images:

.postedImage img { 
    max-height: 300px;
    max-width: 100%; 
    display: block; 
    margin: 5px auto;
}

All you need to do is change the max-height value to be a smaller value such as 100px:

.postedImage img {
    max-height: 100px; //Change this (makes image smaller)

And then also add a new css style to your file:

.postedImage img.large {
    max-height: 300px;
}

Which means, any .postedImage img where the img also has the class large will have a max-height of 300px.

Finally, just add this JQuery to your javascript file:

$(document).on("click", ".postedImage img", function() {
    $(this).toggleClass("large");
});

What this does is when the image is clicked, it will toggle the class “large”. Toggle class means if it already has the class “large”, it will remove it, if it doesn’t have the class “large” it will give it the class. If it gives it the class “large” then the css that we added above with the larger height kicks in 🙂

In the above JQuery code, this refers to the element which was clicked (which in our case is the image). Putting this inside of $() is how we create a JQuery object from an html element. By creating a JQuery object, we are able to use all the JQuery functions (e.g. toggleClass).

The very last thing to do is just to prevent the comment section from opening when the image is clicked. In Post.php inside our loadPostsFriends function, change this:

if (!target.is("a") && !target.is("button")) {

To this:

if (!target.is("a") && !target.is("button") && !target.is("img")) {

This just says ‘and when the target is not an image’.

Check out my facebook page for tutorials, tips and tricks!

Reece