Question

我已使用this tutorial关注使用广播标签制作可点击的缩略图到更大的图片div。

我想知道的是，在点击缩略图之前是否可以在div中显示默认的大图像。现在我拥有我想要的一切，除了当我打开模式弹出窗口div时，大图像直到点击缩略图才出现...搜索了两个晚上但找不到任何有用的，因此这个问题。

编辑：添加了有关网站的链接 - 对于朋友来说是一个匆匆的小屋，所以请原谅我的代码！ http://badsekta.com/trix/shop.html

编辑：添加了更多代码示例以帮助诊断。以下代码似乎在孤立的情况下工作正常（至少在Firefox中），所以是否有人知道任何可能阻止其在现场工作的常见冲突？如果需要，我可以发布更多代码，但是尽量不要完全填写！

CSS＆gt;

/* CSS only gallery (using radio inputs)
 * See http://css-tricks.com/forums/topic/click-thumbnail-and-make-it-larger-image-image-gallery-wo-javascript/
 * Support needed for IE7 & older - see http://css-tricks.com/child-and-sibling-selectors/
 */
#column1-wrap {
    float: left;
    width: 100%;
    display: table-cell;
}
#column1 {
    width: 360px;
    text-align:center;
}
.wrapper {
    width: 350px;
    position: relative;
    }
.wrapper .thumbnails {
    width: 350px;
    float: left;
    margin-top: 385px;
}
.wrapper a {
    margin: 2px;
}
.wrapper img {
    border: 3px solid #fff;
}
.wrapper img:hover {
    border: 3px solid #F00;
}
.wrapper label > img {
    opacity: 0.6;
}
.wrapper label > img:hover {
    opacity: 1;
}
.wrapper input {
    display: none;
}
.wrapper input:checked + .full-image {
    display: block;
}
.wrapper input:checked ~ img {
 opacity: 1;
}
.wrapper .full-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

HTML＆gt;

<div id="column1-wrap">
      <div id="column1">
        <div class="wrapper">
          <div class="full-image" ></div>
          <div class="thumbnails">
            <label>
            <input type="radio" name="full-image" checked>
            <div class="full-image"> <img src="http://picbook.in/wp-content/uploads/2014/07/happy_diwali__sms_images_.jpg" width="340" height="365"  /> </div>
            <img src="http://picbook.in/wp-content/uploads/2014/07/happy_diwali__sms_images_.jpg" width="69" height="73" />
            </label>
            &nbsp;
            <label>
            <input type="radio" name="full-image">
            <div class="full-image"> <img src="http://i.kinja-img.com/gawker-media/image/upload/s--OpFMWJzB--/199vu342jcfpwjpg.jpg" width="340" height="365" /> </div>
            <img src="http://i.kinja-img.com/gawker-media/image/upload/s--OpFMWJzB--/199vu342jcfpwjpg.jpg" width="69" height="73" />
            </label>
            &nbsp;
            <label>
            <input type="radio" name="full-image">
            <div class="full-image"> <img src="assets/img/shop-images/orchid-girl-knickers-3.jpg" width="340" height="365" /> </div>
            <img src="assets/img/shop-images/orchid-girl-knickers-3.jpg" width="69" height="73" />
            </label>
            &nbsp;
            <label>
            <input type="radio" name="full-image">
            <div class="full-image"> <img src="assets/img/shop-images/orchid-girl-knickers-4.jpg" width="340" height="365"  /> </div>
            <img src="assets/img/shop-images/orchid-girl-knickers-4.jpg" width="63" height="73"/>
            </label>
          </div>
        </div>
      </div>
    </div>

Answer 1

寻找

<input type="radio" name="full-image" checked>

删除已选中并在默认图片代码中使用它
确保在

之后将代码置于顶部

<div class="thumbnails">

结果应该如何：

  <label>
<input type="radio" name="full-image" checked>
<div class="full-image">
    <img src="your image link/location">
</div>
</label>

查看我已做过的this示例。

如何在单击缩略图之前在div中加载图像？

1 个答案: