Comments (5)
@yavuz Unfortunately, I cannot show my example code but I can try to explain through the changes. We used the unveil jquery plugin in the following manner:
In viewer.js, we edited the constructor function Viewer(element, options) { to add the below line:
this.unveilImages = false;
Then, we edited the renderList function to insert the below code:
// Unveil jQuery plugin is being used for lazy loading of thumbnail images.
// A maximum of 20 thumbnails will be loaded upon opening of the Image Viewer.
// As user navigates using Next/Previous buttons, further thumbnails will be loaded asynchronously.
if (this.unveilImages) {
if (this.length >= 20) {
var elements;
if (i <= 9) {
elements = $("img.lazyImage").slice(0, 20);
} else {
elements = $("img.lazyImage").slice(i - 10, i + 10);
}
elements.unveil();
} else {
$("img.lazyImage").unveil();
}
}
We added the following new function too:
toggleUnveil : function() {
this.unveilImages = true;
},
We edited the existing function initList to add the class lazyImage and attribute data-src when rendering the images:
list.push(
'<li>' +
'<img' +
' class="lazyImage" ' +
' data-src="' + dataSrc + '"' +
' src="' + src + '"' +
' data-action="view"' +
' data-index="' + i + '"' +
' data-original-url="' + (url || src) + '"' +
' alt="' + alt + '"' +
'>' +
'</li>'
);
where dataSrc is obtained via a call:
var dataSrc = this.getAttribute('data-actualurl') || src;
In our calling code, we have to a reference to the files viewer.js and jquery.unveil.js. Then our javascript call is:
$j(function($) {
var modalViewerOptions = {
url: 'data-original',
shown: function(e) {
$(this).viewer('toggleUnveil');
}
};
// show 'modal' image viewer
$('#invokeImageViewer').on('click', function(e) {
e.preventDefault();
$('#hiddenThumbs').viewer(modalViewerOptions).viewer('show');
});
});
An actual thumbnail image:
<img src="commonImage.png" data-actualurl="actualThumbnailImage.png" alt="Image description" data-original="actualFullSizeImage.png"/>
Hope that helps you get started.
from viewer.
Just download the images page by page, and each time one page images loaded, call the update
method to add them to the viewer.
from viewer.
Thanks for your reply..
from viewer.
We managed to find a way to lazy load the thumbnails using the following lightweight jquery plugin: http://luis-almeida.github.io/unveil/
Initially, the 800 thumbnails on the page are hidden and they each have a common placeholder image. We are then calling unveil function on a subset of the images (about 21 images) which goes to replace the placeholder image with the actual image. As the user navigates the thumbnails, the thumbnails are being replaced with their actual images URLs too.
from viewer.
@nabeygun How did you do that? Can you share example code? Unfortunately I could not.
@fengyuanchen Also when I update
, the viewer always turn first image. Is this normal?
from viewer.
Related Issues (20)
- 图片rorate效果 HOT 1
- 如何渲染整个页面任何位置的img,类似$("img").viewer()这种? HOT 1
- no css source map
- 怎么能自己配置定位位置 HOT 2
- IE10下,点击放大图片预览,不能出来 HOT 2
- jq 相关 只显示toolbar的部分功能
- 在react中使用jQuery动态更改图片路径遇到的问题
- 首次初始化是一切正常,因为业务需要等待异步图片加载完毕后再次初始化那批新加入的图片组,此时发现读取不到任何图片,请问该如何解决? HOT 1
- 在移动端中精灵图定位有差
- IE8 jq 一直报错 怎么回事? HOT 1
- 现在图片展示时的默认宽度是图片的原始宽度,如何让图片默认以屏幕的100%宽度展示呢 HOT 1
- 演示IE8版本下展示图背景色可以调整吗
- react项目报utilities.js:501 Uncaught ReferenceError: a is not defined HOT 1
- 一个bug,在iframe里面用到了viewer结果不能全屏,图片拉长 HOT 1
- iframe子页面不支持全屏展示图片
- 图片可以支持传参数设置默认旋转角度吗 HOT 1
- Cannot read property 'length' of undefined HOT 1
- 发现个问题,不知算不算bug HOT 1
- * Viewer.js 在IOS 13 中的BUG 重要 HOT 1
- 怎么设置一个盒子下面指定的src,有些图片不让点击放大 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from viewer.