Image hide and show not working

Question

I am using this jquery.smoothZoom.min.js to zoom and pan image.I have successfully applied that to my project for single image,now i want to add (<,>.ie corousal) ,so that I can use it for multiple images.When I add the corresponding part in my custom.js it does not work properly.

I will attach two screen sorts which will clear the picture

This is the first case

and after clicking the right corousal button

I can see only the background but not the required image . I can not understand what i am missing ,

This the html part i have been using

    <div class="image-display" id="displayplan4" style="width:70%;height:120%; left:39%;top:10%;position:absolute;display:none;"> 

        <img src="images/amenities.jpg" style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;overflow:auto; z-index:1;">
        <div style="width:150%;height:130%; left:-60%;top:-20%;position:absolute;background:rgba(255,255,255,0.7);z-index:2;">
        </div>

        <img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog1.jpg" id = "almogplan0" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;">
                    <!--button for forward and backward movement-->
            <a href="#" > <img src="innerimages/forward.gif" id="almogforward" style="position:absolute;height:3%;width:2%;z-index:3;top:25%;right:20%;"></a>
            <a href="#" ><img src="innerimages/back.gif"     id="almogback"    style="position:absolute;height:3%;width:2%;z-index:3;top:25%;left:0%;"></a>
    </div>

and

<div id = "almogplandivII">
            <img class="planzoom" src="gallery/Residential/ongoing/Almog/Plan/almog2.jpg" id= "almogplan1" style="width:100%;height:100%; right:3%;top:50%;position:absolute;z-index:3;display:none;">      
        </div>

and the corresponding js part to show and hide image on mouse click upon the image.

var almog_plan_div=0;

//Function for image forward with forward button
$("#almogforward").click(function () 
{
    if(almog_plan_div<1)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div++;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=0;
        $("#almogplan"+almog_plan_div).show();
    }
}); 

//Function for image backward with backward button
$("#almogback").click(function () 
{ 
    if(almog_plan_div>0)
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div--;
        $("#almogplan"+almog_plan_div).show();
    }
    else
    {
        $("#almogplan"+almog_plan_div).hide();
        almog_plan_div=1;
        $("#almogplan"+almog_plan_div).show();
    }
});

I have tried like adding display:none style properties but it does not help my cause, any help on this ?

Answer 1

Remove inline styling display: none from the img tag and then when u initialize your page, then hide that image using hide() function.

Inline-styling might be overriding this

Answer 2

Thanks to both of your answers ,both of u may not be exactly correct but definitely helped me getting me my solution.

The trick i was missing:

I) have used two different divs ,but i have not positioned the second one, (I noticed only that when I tried the whole thing in a new web page with only 2 images in it ,they were not positioned properly )my requirement needs the divs to be hidden ,i had to hide them.

2) The other thing i had to remove was the position:absolute thing from individual image elements. Once rectified its cool now.