0

すべての画像をインラインで表示する画像ギャラリーがあり、対象の画像はページの他の場所で大きく表示されます。解決したい問題は、対象の画像をギャラリー フローから削除せずに大きくすることです。

<div class="gallery">
    <a href="#1"><img id="1" src="http://placehold.it/100" /></a>
    <a href="#2"><img id="2" src="http://placehold.it/200" /></a>
    <a href="#3"><img id="3" src="http://placehold.it/300" /></a>
    <a href="#4"><img id="4" src="http://placehold.it/400" /></a>
</div>

フィドル: http://jsfiddle.net/GxxV5/

つまり、画像 200 が大きく表示されている場合、ページの下部に移動するだけでなく、上部のギャラリー ビューにも表示したいと考えています。

理想的には、html/css ソリューションがありますか? JavaScript ソリューションで問題ありませんが、jquery は使用しないでください。jqueryに移る前に、私はまだjavascriptを学んでいます。

4

2 に答える 2

1

ここで実際の例: http://jsfiddle.net/Stijntjhe/xxBEd/

JavaScript はそれほど多くありません<head>。

function show(img) {
    document.getElementById('big').innerHTML = '<img src="' + img.src + '" />';   
}

onclickそして、あなたの画像に単純なものを追加してください：

<img id="2" onclick="show(this);" src="http://placehold.it/200" />

<div>HTMLに次の追加を忘れないでください。

<div id="big"></div>

編集：

JavaScript がなくても可能ですが、追加の HTML が必要になります: http://jsfiddle.net/Stijntjhe/xxBEd/5/

于 2013-07-23T01:42:49.333 に答える
0

次のような基本的な JavaScript 関数をサンプルに追加するだけです。

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}

このJSFiddleで完全な変更を確認できます。それを美しくするためにCSSを追加するのを手伝ってください;）

于 2013-07-23T02:22:31.160 に答える