How to build a similar Site?

Hello,

i want to build a similar Site to this one: http://pr0gramm.com/ (this is not my site I just working on a similar website) But I don't know how i could solve the following and I hope you have some Tipps for me:

If a User clicks on a Image i want to show the Image in an Overlay (like Facebook) and i want to click on a arrow to navigate to the next one. I tried to rebuild the whole with a Bootstrap modal and when i click on an arrow i load all the things from a post (likes / dislikes, comments, comment likes / dislikes, tags) but already during testing it takes a while to load the next post so i think it's not a good solution.

When a User want to Like or Comment i do this via Ajax... do you have a better Idea?

Regards

Jaytee

9 years ago

Level 39

What you want is a thing that we refer to as a 'Lightbox'.

I won't list any lightbox's here, but a quick google search will find what you're looking for and from there, you can evaluate the one that fits your needs.

mathishuettl

9 years ago

Level 1

yeah i already thought about a lightbox... but what would you say? I as example when my User likes a Image i do everything with jQuery like this, but i think there is something better but what - I want to improve this spaghetti code..

window.likePost = function(post_id) {
    $.ajax({
        "url": "/ajax/like_post/" + post_id,
        "type": "GET",
        success: function(e) {
            if (e.success) {
                var old_like = $(".like").find(".count").html();
                $(".like").find(".count").html(parseInt(old_like) + 1);
                $(".like").addClass("active");

                if (e.swapped) {
                    $(".dislike").removeClass("active");
                    var old_dislike = $(".dislike").find(".count").html();
                    $(".dislike").find(".count").html(parseInt(old_dislike) - 1);
                }
            }

            if (e.authenticate_error) {
                alert("Du musst angemeldet sein um einen Beitrag zu Liken");
            }
        },
        error: function(e) {
            alert("ERROR");
            console.log(e);
        }
    });
}

Code Explain:

User clicks on thumbs up
Ajax request to check if user already liked this image or not
if he already liked it nothing happens
if he clicked like but he disliked it before the dislike gets transformed into a like so e.swap = true
other stuff (entry the like into db, increment/decrement like_count/dislike_count of post, ...)
if he is not logged in e.authenticate_error = true

Please or to participate in this conversation.