ViewerJsBlazor

A blazor wrapper for Viewer.js JavaScript image viewer library.

Installation

By Package Manager:

Install-Package ViewerJsBlazor -Version 1.0.0

By CLI:

dotnet add package ViewerJsBlazor --version 1.0.0

By PackageReference:

<PackageReference Include="ViewerJsBlazor" Version="1.0.0" />

Usage

In your _Host.cshtml or index.html file:

<link href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.4/viewer.min.js"></script>
<script src="_content/ViewerJsBlazor/interop.js"></script>

In a razor page:

@using ViewerJsBlazor

@*image group*@
<ViewerJsImageGroup ElementType="ul" Options="options">
    @for (var i = 1; i <= 9; i++)
    {
        <li>
            <ViewerJsImage data-original="imagePath" src="thumbnailPath" alt="alt message" />
        </li>
    }
</ViewerJsImageGroup>

@*single image*@
<ViewerJsImage data-original="imagePath" src="thumbnailPath" alt="alt message" Options="options" />

@code{
  object options = new { url = "data-original" };
}

API

ViewerJsImageGroup:

The ViewerJsImageGroup component will generate a html element as the container of a group of images.

Properties

razor attributes:

Name | type | description

ElementType | string | the type of the html element generated by this component, default value is "div"

Options | object | the options of the viewer, you can use an object of anonymous type or a dictionary, see https://github.com/fengyuanchen/viewerjs#options to learn available options

All unmatched attributes will added to the generated html element as html attributes.

Methods

void Refresh() | destory and recreate the viewer

Task InvokeMethod(string methodName, params object[] paramters) | invoke a method of the js viewer instance, see https://github.com/fengyuanchen/viewerjs#methods to learn available methods

ViewerJsImage:

The ViewerJsImage component will generate an <img /> element to display an image.

Properties

razor attributes:

Name | type | description

Options | object | the options of the viewer, you can use an object of anonymous type or a dictionary, see https://github.com/fengyuanchen/viewerjs#options to learn available options

All unmatched attributes will added to the generated <img /> element as html attributes.

Methods

void Refresh() | destory and recreate the viewer

Task InvokeMethod(string methodName, params object[] paramters) | invoke a method of the js viewer instance, see https://github.com/fengyuanchen/viewerjs#methods to learn available methods