使图库适合手机视图（小屏幕）

时间：2018-03-25 14:29:40

标签： javascript html css

我已经在HTML / CSS / JS中创建了一个图库，但是当我最小化屏幕时，图像更改不会出现，只是在新窗口中打开图像。

按下图像时的大屏幕： enter image description here

按下图像时的小屏幕： enter image description here

我怎样才能保持这样但只是为了小屏幕最小化它？

以下是项目：https://codepen.io/mican/pen/awxmpY?q=magnific&order=popularity&depth=everything&show_forks=false

HTML：

<article class='gallery'>
  <a class='gallery-link' href='https://unsplash.it/1600/1200?image=1081'>
    <figure class='gallery-image'>
      <img height='1200' src='https://unsplash.it/1600/1200?image=1081' width='1600'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1600/1600?image=1014'>
    <figure class='gallery-image'>
      <img height='1600' src='https://unsplash.it/1600/1600?image=1014' width='1600'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1000?image=267'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1200/1000?image=267' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1600?image=266'>
    <figure class='gallery-image'>
      <img height='1600' src='https://unsplash.it/1200/1600?image=266' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1000/1400?image=634'>
    <figure class='gallery-image'>
      <img height='1400' src='https://unsplash.it/1000/1400?image=634' width='1000'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1200?image=923'>
    <figure class='gallery-image'>
      <img height='1200' src='https://unsplash.it/1200/1200?image=923' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1400/1000?image=682'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1400/1000?image=682' width='1400'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1000/1400?image=173'>
    <figure class='gallery-image'>
      <img height='1400' src='https://unsplash.it/1000/1400?image=173' width='1000'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
  <a class='gallery-link' href='https://unsplash.it/1200/1000?image=943'>
    <figure class='gallery-image'>
      <img height='1000' src='https://unsplash.it/1200/1000?image=943' width='1200'>
      <figcaption>Photo caption</figcaption>
    </figure>
  </a>
</article>
<footer id='footer' role='contentinfo'>
  <div class='container'>
    <a class='logo' href='https://codepen.io/collection/XRoxGR' rel='home'>Calibration theme</a>
    <a class='copy' href='https://mobilemarkup.com'>&copy; mobileMarkup.com</a>
  </div>
</footer>

基本上当在较小的屏幕中按下图像时，它会在较小的屏幕中打开一个新页面，但我希望它像更大的屏幕一样打开图库 < / p>

1 个答案:

答案 0 :(得分：1)

只需移除此代码，移动就像更大的屏幕

disableOn: ->
    return false if $(window).width() < 640
    return true
相关问题
最新问题