1

まず、ここにフィドルがあります：http://jsfiddle.net/ribbs2521/Q7C3m/1/

フィドルで JS を実行できると思っていましたが、うまくいきません。どちらにしても、すべてのコードがそこにあるので、うまくいくはずです。

そのため、PREV と NEXT を実装しようとするまでうまく機能していた独自のカスタム画像ビューアを作成しようとしています (フィドルではテキストですが、実際には画像です)。[次へ] をクリックすると、ビューアーの画像が変更されますが、オーバーレイ div が消えます。

実際に画像が変更されることがわかっている理由は、prevImage() および/または nextImage() の最後にアラートを配置すると、変更された画像が表示されますが、[OK] をクリックするとすべてが消えるためです。

何が起こっているのかわかりません。問題の原因が自分の JS なのか CSS なのかわかりません。私は JS、CSS、HTML にかなり慣れていません。

この関数が実行された後に私の div が消える理由を誰か教えてもらえますか?

JS は次のとおりです。

var images = Array();
var cursor = 0;

function showHide(obj) {
    alert("Working");
    var overlay = document.getElementById("ImgOverlay");
    if (obj instanceof HTMLImageElement) {
        // Get list of images in gallery
        var gallery = document.getElementById("gallery");
        images = gallery.getElementsByTagName("img");
        cursor = -1;
        while (images[++cursor].src != obj.src) {}

        // Show the image
        putImageInViewer(obj);
        overlay.style.display = "block";

    } else if (overlay.style.display !== "none" && overlay.style.display !== "") { // If it's the div that you clicked...
        hideElement(overlay);
    }
}

function hideElement(element) {
    element.style.display = "none";
}

function putImageInViewer(obj) {
    var img = new Image();
    img.src = obj.src;
    var size = 600;
    var h = img.height;
    var w = img.width;
    // We want a max size of 600 but don't want to blow images up (bad graphics)
    // Images should be their actual size but limited to 600px MAX
    if (h <= 600 && w <= 600) {
        if (h > w) {
            size = h;
        } else {
            size = w;
        }
    }
    if (h > w) {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" height=\"" + size + "\">";
    } else {
        document.getElementById("overlay-img").innerHTML = "<img src=\"" + img.src + "\" width=\"" + size + "\">";
    }
}

function nextImage() {
    // Check if we need to loop around
    if (cursor < images.length) {
        cursor++;
    } else {
        cursor = 0;
    }
    putImageInViewer(images[cursor]);
}

function prevImage() {
    // Check if we need to loop around
    if (cursor > 0) {
        cursor--;
    } else {
        cursor = images.length;
    }
    putImageInViewer(images[cursor]);
}

CSSは次のとおりです。

#wrap {
    margin: 0 auto;
}
#wrap li {
    float:left;
    position:relative;
    display:inline-block;
    width:240px;
    height:240px;
    margin:10px;
    padding:10px;
    background:#fff;
    box-shadow:0 0 5px rgba(0, 0, 0, .35);
    overflow: hidden;
}
#wrap li div {
    position:absolute;
    height:0;
    width:220px;
    background:rgba(0, 0, 0, .45);
    overflow:hidden;
    bottom:10px;
    left:10px;
    padding: 0 10px;
    line-height:50px;
    color:#fff;
    transition:height 1s;
}
#wrap li:hover div {
    height:50px;
}
#wrap li img {
    width: 240px;
    height: 240px;
    margin: 0px 0 0 0px;
    cursor: pointer;
}
#ImgOverlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    /*fallback*/
    background-color: rgba(0, 0, 0, 0.6);
    /*background-image:none;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;*/
    display: none;
}
#imgnav {
    position: fixed;
    top: 38%;
    left: 50%;
    margin: -15px 0 0 -363px;
    width: 730px;
    height: 60px;
}
#overlay-img {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -300px;
    width: 600px;
    height: 600px;
}
#overlay-img img {
    border: 2px solid white;
    display: block;
    margin: auto;
}

そして最後に、HTML:

<div id="wrap">
    <h1>An Image Gallery</h1>
    <ul id="gallery">
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 1</div>
        </li>
        <li>
            <img src="w" onclick="showHide(this);">
            <div>Image 2</div>
        </li>
    </ul>
    <div id="clear"></div>
</div>
<!-- For Image Viewer -->
<div id="ImgOverlay" onclick="showHide(this);">
    <div id="imgnav"> <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">PREV</span>
        <div id="overlay-img">
            <!-- Image will go here -->
        </div>  <span style="color: white; cursor: pointer; float: left" height="60px" width="60px" onclick="prevImage();">NEXT</span>

    </div>
</div>
<!-- End Image Viewer -->
4

1 に答える 1

3

おそらく、JavaScriptイベントの伝播が発生しています。簡単に言えば、DOM 要素で発火するイベント (「PREV」ボタンや「NEXT」ボタンの「クリック」イベントなど) は、DOM をバブルアップさせ、元の要素のそれぞれの親で再び発火します。あなたの場合、これは、「次へ」ボタンをクリックするとprevImage()起動し、イベントが にバブルアップすると が起動することImgOverlayを意味しますshowHide(this)。

イベント ハンドラーを変更して、ブラウザーにイベントを伝達しないように指示する必要があります。ボタンのマークアップを次のように変更します。

<span id="nextButton" style="color: white; cursor: pointer; float: left" height="60px" width="60px">NEXT</span>

次に、以下を使用してクリック イベントを処理します。

var nextButton = document.getElementById('nextButton');
nextButton.onclick = function (ev) {
  nextImage();

  if (!ev) {
    // Old versions of Internet Explorer do not pass the event to handlers.
    ev = window.event;
  }
  ev.cancelBubble = true;
  if (ev.stopPropagation) {
    // W3C standard, works in Chrome, Firefox, Safari, etc.
    ev.stopPropagation();
  }
};
于 2013-06-07T15:53:11.260 に答える