viewer.js 顯示圖片名稱和照片屬性

 

顯示效果：

 

 中間顯示照片名稱，右側顯示照片屬性。

圖片名稱是保存在數據庫里的，照片屬性是相機或手機拍照時就存儲於照片格式中的。

手機照片甚至保存了經緯度等詳細信息（這也是QQ能實現旅游相冊的原因）。

 ADO.net MVC   部分視圖 ViewPhotoWithAttr，也就是功能模塊化。

<link href="~/Scripts/viewer/viewer.min.css?v=20190612" rel="stylesheet" />
<script src="~/Scripts/viewer/viewer.min.js?v=20190612"></script>


<style type="text/css">
    .photo-with-attr-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999999;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .photo-with-attr-container   .photo-container
    {
        float: left;
        height: 100%;
        width: calc(100% - 300px);
    }
    .photo-with-attr-container .attr-container {
            float: right;
            height: 100%;
            width: 300px;
            background: white;
      }
     .photo-with-attr-container .attr-container .image-attr-title  span
{
        margin: 10px;
    }

    .photo-with-attr-container .attr-container .image-attr-title {
        padding:16px; 
        border-bottom: 1px solid #ebeef5;
    }

    .photo-with-attr-container .attr-container .image-attr-content {
        padding: 10px;
        height: calc(100% - 50px);
        width: 300px;
        position: absolute;
    }

    .photo-with-attr-container .attr-container .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .image-attr-content .ivu-form-item{
            margin-bottom: 0px;
    }

</style>


<script type="text/x-template" id="viewerTemplate">
        <div style="visibility:hidden">
            <div ref="left">
                <div role="button" class="viewer-button viewer-close" data-viewer-action="mix" @@click="hide" />
                <div class="image-attr-title">
                    <label>照片屬性</label>
                </div>
                <div class="image-attr-content">
                    <div style="height:100%;">
                        <card v-for="item in currentAttr" v-bind:key="item.Name" style="margin-bottom:8px;width:100%;">
                            <div slot="title" class="clearfix">
                                <span>{{ item.Name }}</span>
                            </div>
                            <div>
                                <i-form label-width="90" size="mini">
                                    <form-item v-for="imageAttr in item.AttrList" v-bind:key="imageAttr.Name" v-bind:label="imageAttr.Name">
                                        <label> {{ imageAttr.Value }}</label>
                                    </form-item>
                                </i-form>
                            </div>
                        </card>
                    </div>
                </div>
            </div>
        </div>
 </script>
<script type="text/javascript">



Vue.component("ViewPhotoWithAttr",{
    template: "#viewerTemplate",
  name: 'ViewPhotoWithAttr',
  props: {
    imageList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      viewer: null,
      containerEl: null,
      visible: false,
      currentImage: {},
      currentAttr: []
    }
  },
  watch: {
    imageList() {
    },
    'currentImage.id'(id) {
        var that = this
        var srcPart = '@Url.Action("ImageAttr", "Image")' + '/';
        this.$http({
            url: srcPart + id,
            method: 'get'
        }).then(function (response) {
            if (response.data.success) {
            that.currentAttr = response.data.data
        }
      })
    },
    visible(val) {
      var el = this.containerEl
      if (el) {
        el.style.visibility = val ? 'visible' : 'hidden'
      }
    }
  },
    mounted() {
      //  'viewer-title'
        
  },
  destroyed() {
    this.destroy()
  },
  methods: {
    init() {
      var body = document.body

      this.destroy()
      var container = document.createElement('div')
      container.className = 'photo-with-attr-container'
      container.style.visibility = 'hidden'

      var imageContainer = document.createElement('div')
      imageContainer.className = 'photo-container'

      var imagesEl = document.createElement('div')
      imagesEl.style.display = 'none'
      for (var item of this.imageList) {
        var image = document.createElement('img')
        image.src = item.imageUrlSmall
        image.alt = item.picName;
        imagesEl.appendChild(image)
      }
      imageContainer.appendChild(imagesEl)

      container.appendChild(imageContainer)
      var attrContainer = document.createElement('div')
      attrContainer.className = 'attr-container'
      attrContainer.appendChild(this.$refs.left)
      container.appendChild(attrContainer)
      body.appendChild(container)
      // var el = this.$refs.images
      var that = this
      var viewer = new Viewer(imagesEl, {
        fullscreen: true,
        inline: true,
        title: function (img, obj) {
            return img.getAttribute("alt");
        },
        container: imageContainer,
        url(image) {
          var src = image.getAttribute("src");
          var item = that.imageList.filter(d => d.imageUrlSmall === src)[0]
          return item.imageUrl
        },
        hide() {
          that.visible = false
        },
        hidden() {
          that.visible = false
        },
        view(image) {
          var src = image.detail.image.getAttribute("src");
          var item = that.imageList.filter(d => d.imageUrl === src)[0]

          that.currentImage = item
          console.log(that.currentImage)
        }
      })
      this.viewer = viewer
      this.containerEl = container
    },
    destroy() {
      if (this.viewer) {
        this.viewer.destroy()
      }
      var body = document.body
      var container = document.getElementsByClassName('photo-with-attr-container')
      if (container && container.length > 0) {
        for (var item of container) {
          body.removeChild(item)
        }
      }
      this.containerEl = null
      this.viewer = null
    },
    hide() {
      // this.viewer.exit()
      this.destroy()
      var that = this
      this.$nextTick(function() {
          that.visible = false
      })
    },
    view(index) {
      this.visible = true
      if (!this.viewer) {
        this.init()
      }
      var that = this
      this.$nextTick(function(){
          that.viewer.view(index)
      })
    }
  }

})
</script>

 

圖片名稱顯示部分代碼

 
    imageList: {
      type: Array,
      default: null
    }

     for (var item of this.imageList) {
        var image = document.createElement('img')
        image.src = item.imageUrlSmall 
        image.alt = item.picName; //對alt屬性賦值
        imagesEl.appendChild(image)
      }

        title: function (img, obj) {  // 這里實現顯示圖片名稱
            return img.getAttribute("alt");
        },

　　

在另一個頁面中使用，僅用於示意，並非完整代碼，實現了iview輪播圖上點擊后出現viewer大圖輪播圖。感覺有點重復，但確實有這個需求。

    <style>
       .carousel-text{
        position: relative;
        bottom: 25px;
        width: 100%;
        font-size:13px;
         /*width: auto;*/ /*也可以*/ 
        text-align: center;
        color: white;
        background-color: rgba(0,0,0,0.3);
    }
 </style>

                                        <div class="container">
                                            <div id="dowebok_qm">

                                                <Carousel v-bind:radius-dot="carouselDot_qm" dots="outside" v-bind:height="imgHeight2+'px'" v-model="carouselValue_qm" style="text-align:center;">
                                                    <div v-for="item in imgData_qm" v-on:click="handleView_qm(item)">
                                                        <Carousel-Item>
                                                            <img v-bind:src="item.src" style="height:inherit;width:auto;cursor:pointer;" />
                                                            <div><span class="carousel-text"> {{item.textName}}</span></div>
                                                        </Carousel-Item>
                                                    </div>
                                                </Carousel>
                                            </div>

                                        </div>
 <ViewPhotoWithAttr ref="viewerYd_qm" v-bind:image-list="imgData_qm" />

    var vm = new Vue({
        template: "#viewTemplate",
        el: '#app',
        data: {
            imgHeight2:600,
            carouselDot_qm: false,
            carouselValue_qm: 0,
            imgData_qm: [],
         }
        methods: {
            handleView_qm: function (info) { //用於點擊時定位
                console.log('handleViewYd', info.id);
                var index = 0
                for (var i = 0; i < this.imgData_qm.length; i++) {
                    if (this.imgData_qm[i].id === info.id) {
                        index = i
                        break
                    }
                }
                console.log('index', index);
                this.$refs.viewerYd_qm.view(index)
            },
   getImageListByID: function (dataID) {
     
    var that=this; //由於ajax中的this不等於vue的this，所以賦值為that； 
 that.imgData_qm = [];
            $.ajax({
                        url: url,
                        type: 'POST',
                        data: { dataID: dataID.toString() },
                        success: function (result) {
                          let imageList = result.rows;
                          var srcPart=“url前綴”；
                          that.imgData_qm.push({ id: imageList[i].ImageID, src: srcPart + imageList[i].ImageID + part, name: imageList[i].FileName, textName: picName, imageUrlSmall: srcPart + imageList[i].ImageID + part, imageUrl: srcPart + imageList[i].ImageID })

             }}）
     

   }
 }
}）

  

 

相關文章：

1  官方文檔： https://github.com/fengyuanchen/viewerjs

 

 

2 viewer 簡單用法：

viewer 圖片點擊放大 用法匯總

https://www.cnblogs.com/hao-1234-1234/p/11011249.html

viewer與 iview Carousel（走馬燈） 結合使用，圖片無法顯示

https://www.cnblogs.com/hao-1234-1234/p/11252183.html