JavaScript可視性点滅あり

Question

サムネイルギャラリーページをオーバーレイする画像ビューアボックスをプログラミングしています。イメージビューアは、ユーザーがサムネイルをクリックすると表示されるように設定されています。

現在のところ、サムがクリックされると、ビューアが表示され、すぐに再び表示されなくなります。ビューアを完全な可視性に呼び出す方法を知りたいのですが、それをそこに置いておきたいと思います。

外部の.jsファイルを使用しています。

のonclickイベント：

<div class="thumb_box"> 
    <a href="" alt="gallery thumb" onclick="invokeViewer()"> 
     <img class="thumbnail" src="../thumbs/jacob/jacob1.png" /> 
    </a> 
</div> 

JavaScript関数：

function invokeViewer(){ 

    var viewerBack = document.getElementById('imagebox_foreground'); 
    var viewerFore = document.getElementById('imagebox_background'); 
    var currentImage = document.getElementById('current_image'); 

    viewerBack.style.visibility='visible'; 
    viewerFore.style.visibility='visible'; 
    currentImage.style.visibility='visible'; 

    return false; 
} 

ビューア本部のHTML：

<div id="imagebox_foreground" style="visibility:hidden"> 
    <img id="current_image" style="visibility:hidden" src="imageurl.jpg" /> 
</div> 

<div id="imagebox_background" style="visibility:hidden"></div> 

ビューア本部のCSS

#imagebox_foreground{ 
    position:absolute; 
    left:50%; top:50%; 
    height:570px; width:880px; 
    margin-left:-430px; margin-top:-285px; 
    background-color:transparent; 
    z-index:992; 
} 
#imagebox_background{ 
    position:absolute; left:50%; top:50%; 
    height:570px; width:880px; 
    margin-left:-430px; margin-top:-285px; 
    background-color:black; 
    border-right:solid 4px rgb(40,40,40); border-left:solid 4px rgb(40,40,40); 
    opacity:.85; filter:alpha(opacity=85); 
    z-index:991; 
}   
#current_image{ 
    display:block; 
    margin-right:auto; 
    margin-left:auto; 
    margin-top:10px; 
} 

Answer 1

私はあなたのhrefがトリガされると、ページが再読み込みされている疑いがあります。リンクがトリガーされないようにするには、return falseをイベントハンドラに追加します。

<a href="" alt="gallery thumb" onclick="return invokeViewer()"> 

または：：

<a href="" alt="gallery thumb" onclick="invokeViewer(); return false;">