SoFunction
Updated on 2025-04-13

Summary of problems encountered in Angular encapsulation of fancyBox (image preview)

First, download the latest version of fancyBox on the official website (be sure to go to the latest website, the jquery version I used to rely on was relatively low), and attach the link:

/fancybox/3/

Then refer to jquery in the project, then reference and.

If you need animation and mouse wheel scrolling effect, you can also introduce the relevant tool files he provides.

1. You can install fancyBox by linking .css and .js in your html file. Make sure you load the jQuery library as well. Here is the basic HTML template used as an example

<！DOCTYPE html><HTML>
<HEAD>
 <meta charset =“utf-8”>
 <title>My page</ title>
 <！ - CSS - >
 <link rel =“stylesheet”type =“text / css”href =“”>
</ HEAD>
<BODY>
 <！ - YoursHTMLThe content is here - >
 <！ - JS - >
 <script src =“// /jquery-3.2.”> </ script>
 <script src =“”> </ script>
</ BODY>
</ HTML>

2. Install through Bower or npm installation tool

# Bower
bower install fancybox --save
# NPM
npm install @fancyapps/fancybox --save

3. The project is referenced externally, and is usually placed in the lib folder (I use this method)

Create a new file directory fancy folder under lib, then introduce the downloaded .js and .css, add the automatic packaging compression task, place the sum in the css directory, and introduce the compressed file in the entry.

Take this fancyBox plugin as an example:

('build-lib-js', ['build-clean-third-lib-js'], function () {
var thirdLibJs = ([
//External reference js'./lib/fancybox/',
])
.pipe(uglify())
.pipe(concat('', {newLine: '\r\n'}))
.pipe(('js'));
return (null, thirdLibJs);
});
('build-lib-css', ['build-clean-lib-css'], function () {
  var thirdLibCss = ([
 　//External reference css    './lib/fancybox/'
  ])
    .pipe(concat('', {newLine: '\r\n'})) //In which file to put    .pipe(('css'));//Packaging output directory (under which directory)  return (null, thirdLibCss);
});

Encapsulated in an angular custom component

html module:

<img-box img-url="''" img-style="'width:740px;margin-left:-50px;'"></img-box>

Module:

var appModule = ('');
('imgBox',imgBox);
function imgBox() {
  return {
    restrict:'AE',
    transclude:true,
    scope:{
      imgUrl:"=",
      imgStyle:'='
    },
    template:'<a class="imageBox" href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${('+"'{{imgUrl}}'"+')}" /></a>',
    link:function (scope,elem,attrs) {
      $(".imageBox").fancybox();
    },
  }
}

Official writing method:

<a href="/9/8387/29155724700_a227577206_k.jpg" data-fancybox="images" data-width="2048" data-height="1365">
<img src="/9/8387/29155724700_58c1cb71cf_m.jpg" />
</a>
<a href="/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images" data-width="2048" data-height="1366">
<img src="/9/8148/29324593462_f890687b7a_m.jpg" />
</a>
<a href="/9/8487/28808645394_a0ff0fc5c1_k.jpg" data-fancybox="images" data-width="2048" data-height="1365">
<img src="/9/8487/28808645394_9c7e6bf8a5_m.jpg" />
</a>

Tag: data-fancybox uses the image preview plug-in, all three values ​​are images representing the image in a picture group data-width data-height The true width and height of the image data-caption title information

How to enable:

<script type="text/javascript">
 $("[data-fancybox]").fancybox({
 // Options will go here
 });
</script>

Problems encountered:

1. If you use the lower version of the image preview plugin, it will return the error of Cannot read property 'msie' of undefined, the reason the lower version seems to use the $.browser method, but it has been removed since jQuery 1.9

2. In template or templateUrl, you must use the imgUrl value passed in html, and you cannot use imgUrl directly or get it.

method:

template:'<a class="imageBox" href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" src="{{imgUrl}}" th:src="${('+"'{{imgUrl}}'"+')}" /></a>'

or

template:'<a class="imageBox" ng-href="{{imgUrl}}" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-fancybox><img style="{{imgStyle}}" ng-src="{{imgUrl}}" th:src="${('+"'{{imgUrl}}'"+')}" /></a>'

The following th:src does not need to be spliced. If you use the resource picture on cdn in your project, you can use it.

Summarize

The above is the summary of the problem encountered by the Angular packaged fancyBox (picture preview) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!