11-图片放大

  • 阅读: 171
  • 更新: 2022-05-08

文章宽度有限,在图片过大的时候会自动调整图片宽度为文章的宽度
常见的是点击图片,在弹层中显示原始图片,方便查看大图;再次点击弹层外侧关闭弹层
搜了一下,最终使用 bootstrap 的模态框(Modal) 来实现此功能
参考:https://blog.123090.xyz/技术/2018/04/22/bootstrap-modal-large-view.html

1. 添加模态框

根据 bootstrap 模态框的用法,在 apps/templates/article.html 文件中添加:

1
2
3
4
5
  <div class="modal fade" id="img_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="width: fit-content; max-width: 100%">
      <div class="modal-content"></div>
    </div>
  </div>

自定义的样式比较重要,别漏了。style="width: fit-content; max-width: 100%"

2. 模态框内容替换

添加图片点击事件,点击后将图片内容置为模态框内容。 在 static/js/site.js 文件的 $(document).ready(function(){中添加:

1
2
3
4
5
6
7
8
  // 图片点击放大
  $('img').click(function(){
    console.log('img click');
    var img_html = $(this).prop("outerHTML");
    console.log(img_html);
    $('#img_modal .modal-content').html(img_html);
    $('#img_modal').modal('show');
  })

3. 鼠标指针改为放大样式

static/css/site.css 文件中添加:

1
2
3
4
img {
  max-width: 100%;
  cursor: zoom-in;
}

4. 图片测试


=== 全文完 ===


欢迎加入QQ群:778391413

京公网安备 11011302003970号 京ICP备2022012301号-1