Cek this website: http://fresway.com/

On the left corner you see there is a big circle when you press it hides all other round buttons around it. Now, I would like it to hide the profile_picture as well and the light jpg under it. How to make such a thing?

Here is the profile_image codes:

home.blade.php

<div id="profile_image">

                <img id="profile_picture" src="{{url("").'/'.$user->image_profile}}"/>
                {{--<div class="dropzone" id="edit_image" data-width="176" data-height="174" data-resize="true" data-url="{{action('AjaxController@postUploadProfile')}}" style="width: 176px;height: 174px;left: 0px;display: none;">--}}
                {{--<input type="file" id="profilefileupload" name="thumb" />--}}
                {{--</div>--}}

                <div id="image_upload"></div>

                <div id="profile_image_edit" style="display: none;">
                    <a href="#" id="btn_upload" onclick="javascript:editProfile();"><span
                                class="glyphicon glyphicon-edit icon-pp" aria-hidden="true"></span></a>
                </div>

                {{--<div id="profile_pict" class="dropzone" data-resize="true" data-url="canvas.php">--}}
                {{--<img src="{{url("")}}/images/user1.png"/>--}}
                {{--<input type="file" id="profilefileupload" name="thumb" />--}}
                {{--</div>--}}
            </div>

What other codes should I add to hide the profile image and the light jpg under it?

Here is the js code to hide the round buttons under it:

$('#profile_picture').click(function (e) {

    toggleOptions($(".selector"));
});

What other codes should I add to it to hide the light jpg?

You'll want to either toggle or set display: none on:
$('.image_road img') and $('.profile_picture img')

Although you'll want to remember that if you hide the profile pic completely there is nothing left to click on to bring the buttons back.

You could do this:

$('#profile_picture').click(function (e) {
    toggleOptions($(".selector"));
    $('#profile_picture, .image_road').hide();
});

But theh you can't interact wth the profile picture anymore, because it wil set it to display: none, so you will have to be more specific how you want to hide it and how do you want it to to show up again.

To show it up again I create another image that initially should be hidden under the profile_picture.

<img id="water" src="{{url("").'/images/water.gif'}}" height="100">

...

$('#water').click(function (e) {

    $('#profile_picture, .image_road').show();
});

I already create the jquery and I wonder why the gif image is not clickable just like the profile_picture?

I wonder why the gif image is not clickable

Hard to tell why without seeing any page with that image

Recheck the page again:

http://fresway.com/

If you click the profile image it will hide the light jpg and profile image. Then, there is this gif water image. but I you cannot click it. I thought I already code it right for it to be clickable.

Your .selector .social-media-box is covering that water.gif image due to the position: absolute;. If you add a z-index: -1; then it doesn't cover the image anymore.

1) What should I do so that the gif image is clickable?

I forget where I put the z-index: -1;

Should I write it like this:

$('.selector open .social-media-box #profile_image #water').click(function (e) {

    $('#profile_picture, .image_road').show();
});

There are too many id and class parent for water. There are around 8.

2) Another thing: how to create water effect for each background changes?

I try to put a water gif image on top of the background but it doesn't do any good. Is there any other way to create a water effect for every background changes?

3) Is it possible to make it like this: on the first click it hides the circle navigation around it. on the second click it hides the light jpg.

$('#profile_picture').click1(function (e) {

    toggleOptions($(".selector"));
  });

$('#profile_picture').click2(function (e) {

    $('#profile_picture, .image_road').hide();
});

How to code it correct?

1 - Add the z-index to the CSS block .selector .social-media-box in your CSS file

2 - I have no idea what you want with a water effect

3 - No that's not how it works. Just use a delay. In the example below if you click on the profile picture first the options gets hidden and after 2 seconds, the profile picture itself and the rays of light gets hidden. Adjust the delay to your linking.

$('#profile_picture').click(function () {
    toggleOptions($(".selector")).delay(2000).queue(function () {
        $('#profile_picture, .image_road').hide();
    }).dequeue();
});

I already try placing the following code:

$('#profile_picture').click(function (e) {

    toggleOptions($(".selector")).delay(2000).queue(function () {
      $('#profile_picture, .image_road').hide();
    }).dequeue();  
});

I wait after 2 seconds and nothing happen.

commented: and I wait again for a live example of your issue! -1

Okay, not sure why it gives a delay undefined, but try it with a setTimeout function instead.

$('#profile_picture').click(function () {
    toggleOptions($(".selector"));
    setTimeout(function() {
        $('#profile_picture, .image_road').hide();
    }, 2000);
});

Thanks it works. You solved no 3).

I still have two more:

1) What should I do so that the gif image is clickable?

I forget where I put the z-index: -1;

Should I write it like this:

$('.selector open .social-media-box #profile_image #water').click(function (e) {
    $('#profile_picture, .image_road').show();
});

There are too many id and class parent for water. There are around 8.

2) Another thing: how to create water effect for each background changes?

I try to put a water gif image on top of the background but it doesn't do any good. Is there any other way to create a water effect for every background changes?

Thanks.

I explained 1 already in a previous post and 2 also kind of. For that you might want to look into HTML5 Canvas and/or SVG.