圖像隱藏和顯示不工作

我正在使用此jquery.smoothZoom.min.js來縮放和平移圖像。我已經成功地應用到我的項目的單個圖像，現在我想添加（<，>。即corousal），以便我可以將其用於多個圖像。當我在custom.js中添加相應的部件時，它無法正常工作。圖像隱藏和顯示不工作

我將連接兩個屏幕種類，這將清除畫面

這是第一種情況 enter image description here

，然後點擊右邊corousal按鈕

enter image description here 後

我只能看到背景但不是所需的圖像。我不明白我錯過了什麼，

這HTML部分我一直在使用

<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>

和

<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>

和相應的JS部分在顯示和隱藏在鼠標單擊圖像圖片。

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(); 
    } 
});

我試圖像加display:none樣式屬性，但它並不能幫助我的事業，對此有何幫助？

來源

2014-04-22 Sham

你有現場演示嗎？ – Godinall

你的意思是像jsfiddle，我試過了，dint成功創建了 – Sham

yes或是一個實時網站預覽 – Godinall

刪除嵌入樣式顯示：img標籤中沒有，然後當您初始化頁面時，然後使用hide（）函數隱藏該圖像。

直列造型可能會重寫此

來源

2014-04-22 06:55:13 Ishita

Ishita太原始瞭解您的解決方案可以üplz精確定位 – Sham

您有此代碼：

...現在，從此標記中刪除display：none，當您的頁面加載或無論哪個第一個函數被調用以顯示您的頁面，寫這一行$（「＃almogplan1」）。hide（）; – Ishita

@ ishita嘗試了你的解決方案，它的不工作可能是我要求我隱藏$（「＃almogplanII」）。hide（）;我試過這也$（「＃almogplan1」）。hide（）; ，但無論如何它不工作 – Sham

由於雙方你的答案，既ü可能不完全正確，但絕對幫助我讓我我的解決方案。

訣竅我失蹤：

I）使用了兩種不同的div，但我沒有定位在第二個，（我只注意到，當我試圖在整個事件中一個新的網頁，只有2它們的圖像沒有正確定位）我的需求需要divs被隱藏，我不得不隱藏它們。

2）我不得不刪除的另一件事是從個人形象元素position:absolute事情。現在一旦糾正它涼爽。

來源

2014-04-23 09:39:28 Sham

圖像隱藏和顯示不工作

回答

相關問題