blueimp 相关问题

blueimp.net是网络开发者Sebastian Tschan的一系列开源项目。

我正在使用 Blueimp/jquery-file-upload 插件直接从 JS 客户端代码将文件上传到 AWS S3。我使用了分段上传。这是文件上传的设置：多部分：真实，最大块大小：10 *

jquery file-upload amazon-s3 blueimp

回答 2 投票 0

我们在画廊中使用 blueimp，并使用以下方法成功实现了滑块以显示具有多个来源的图像和 html5 视频这是div层：我们在画廊中使用 blueimp，并使用以下方法成功实现了滑块来显示具有多个来源的图像和 html5 视频这是div层： <div id="blueimp-video-carousel-gallery" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel " data-start-slideshow="false"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <p class="description"></p> </div> 这是填充滑块的 for 循环的片段： if (_media_type == 'video') { item['title'] = "title"; item['type'] = "video/*"; item['poster'] = media_thumbnail; item['description'] = "description"; item['sources'] = [{href: _media_url_hls, type: "application/x-mpegurl"}, {href: _media_url_web, type: "video/mp4"}]; } else { item['title'] = "title"; item['type'] = "image/jpeg"; item['poster'] = media_thumbnail; item['description'] = "description"; } objArr.push(item); //// omitted for brevity blueimp.Gallery(objArr, { container: '#blueimp-video-carousel-gallery', carousel: 'true', preloadRange: 2, transitionSpeed: 400}); 接下来我们想要实现灯箱，因此我们尝试了以下操作： <div id="links" class="links"></div> <div id="blueimp-gallery" class="blueimp-gallery"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> javascript for 循环： var linksContainer = $('#links'); var linksContainerData=''; //omitted for brevity //video linksContainerData +='<a href="'+_media_url+'" title="..." data-gallery="" class="blueimp-gallery-thumb-anchor"><img src="'+_media_thumbnail+'" ></a>'; //image linksContainerData +='<a href="'+_media_url+'" title="..." data-gallery="" class="blueimp-gallery-thumb-anchor"><img src="'+_media_thumbnail+'" ></a>'; //after loop $(linksContainer).append(linksContainerData); 这适用于图像，但无法加载视频。我们希望能够使用灯箱，但在滑块中能够播放 HTML5 HLS 和 MP4 视频。我相信可以使用 onOpen 和 onSlide 事件回调，我们可以从 jascript 数组访问数据，但我不知道如何自定义。是否可以指定 div 层而不是“a”标签，以便滑块使用自定义 div 层？非常感谢您提供的任何指导。问候，我能够让灯箱与 onClick 一起使用，通过单个条目打开轮播并处理图像和视频；视频以 hls 格式播放，并带有 mp4 后备。我在这些链接的帮助下找到了解决方案： https://blueimp.github.io/Gallery/（参见源代码） https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.js（注意：全局点击处理程序）所以我最终得到了这个功能： $(document).on('click', '[data-gallery]', function(event) { var id = $(this).data('gallery'); var widget = $(id); var selected_media_id; var media_id; var obj; selected_media_id = widget.selector; console.log("objArr.length-->"+objArr.length); for (i=0; i<objArr.length; i++) { obj = objArr[i]; if (selected_media_id == obj['title']) { break; } } return blueimp.Gallery([obj], { container : '#blueimp-gallery', carousel : true}); }); 所以我基本上获取了在属性中设置的标识符 data-gallery="identifier" 并循环遍历前面提到的构建的数组，然后使用数组 [obj] 中包含的单个对象初始化 #blueimp-gallery。缺少 [] 让我有点困惑。现在灯箱中的 onclick 会打开模态框，其中包含一个带有 x 的条目以关闭，目前效果很好。对于视频，它会以海报背景和播放图标打开，并在 Mac Safari 中播放 hls，在 Chrome 中播放 mp4。视频控件不是很好（基本的播放器控件），并且还有改进的空间，但这已经是我想要实现的基础了。希望这有帮助。 -J 我有一个滑块，当您单击照片时，照片会在灯箱中打开，对于视频，我通过在更改幻灯片时用 img 替换 video 标签解决了这个问题 $(document).on('click', '[data-gallery]', function(event) { const list = $('a[data-gallery]'); const index = $(this).data("index"); let prevVideo = null; function onClickVideo(){ const video = this; const isVideoPlaying = !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2); isVideoPlaying ? video?.pause() : video?.play(); } Gallery( list, { videoContent: true, carousel: false, index,videoPlaysInline: true, onslide: function (indexSlide, slide) { prevVideo?.trigger?.('pause'); prevVideo?.off?.('click',onClickVideo); const video = $('video', $(list[indexSlide])).clone(); video.on('click',onClickVideo) $(slide).removeClass('slide-loading'); $(slide).removeClass('slide-error'); $(slide).html(video); prevVideo = video; $(video).attr('autoplay', true); $(video).attr('playsinline', true); $(video).attr('controls',true); $(video).attr('poster', ""); $(video).css({ width:"100%", height:"100%" }); video[0].play(); }, } ); })

javascript jquery html gallery blueimp

回答 2 投票 0

Blueimp 自定义文件名

如何让 Blueimp jquery 文件上传器为会话中存储的文件提供自定义文件名？我尝试将其添加到index.php CustomUploadHandler 类扩展了 UploadHandler {

php jquery file upload blueimp

回答 1 投票 0

jQuery 文件上传器无法处理 499 客户端关闭错误

应用程序使用最新版本的 jQuery 文件上传器，有时在上传过程中会观察到 499 错误（客户端关闭请求）。我的假设是，如果用户是我们，就会出现此错误...

jquery file upload blueimp

回答 1 投票 0

带有 pintura 的 Jquery 照片上传器 - 上传后编辑照片

我已经集成了 jquery 文件上传器，可以使用 pintura 许可证版本将照片上传到我的系统中。添加图像时存在 Pintura 编辑按钮。并可以编辑图像。但是没有按钮...