内容库布局

Question

我正在尝试使用此图片中的布局创建一个简单的图库（http://i.stack.imgur.com/8juB3.jpg）。当观众导航到该页面时，我希望他们最初看到主框中的文本/图像内容和较小框中的图像。如果观众点击其中一个较小的框，我希望主框中的内容会相应更改。

如果有人能指出我正确的方向，那就太棒了，谢谢！

谢谢！

Answer 1

<img src="something.jpg" onclick="changeX1()" /> //That's an example of the img tag on HTML:
<div id="gallery">Initial text</div> //This is the place where the big image will be shown, initially with text.

使用Javascript：

var x=0
var y=document.getElementById("gallery");
}
function changeX_1(){
    x=1
    changePic();
}

function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(something)";
            break;    
    }
}

我所做的是，制作了两个变量：x和y。 'x'将是图片编号，'y'将是背景。单击图像时，“x”将更改，y的innerHTML将被删除，背景图像将被更改。

我在这个例子中只使用了1张图片，真正的画廊将会更多。对于你添加的每张照片，你需要一个新的“changeX”功能和另一个案例。

如果你不了解javascript，你应该学习：）

修改 的

var x=0
var y=document.getElementById("gallery");
}
function changeX1(){
    x=1
    changePic();
}
function changeX2(){
    x=2
    changePic();
}


function changePic(){
    switch (x){
        case 1:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbookcolor.jpg?7024)";
            break;    
        case 2:
            y.style.innerHTML="";
            y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Videocolor.jpg?7178)";
            break;    
    }
}