javascript 相关问题

我们在画廊中使用 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

禁用滑动时的网页导航（向后和向前）

在 Windows 手机上，如果滑动来自边缘，则在 IE 中，用户可以通过在屏幕上滑动来后退和前进。这种操作系统级别的功能阻碍了我的网页的用户体验。有没有js或者...

javascript css internet-explorer windows-phone-8 windows-phone-8.1

回答 6 投票 0

Div 不占用手机空间

我有一个包含三个元素的 div：输入字段、计时器、桌面视图中的重置按钮，所有三个元素的高度相同，但当我在 iphone 12 mini 上查看它时，特别是计时器和重置

javascript html css reactjs flexbox

回答 1 投票 0

Prisma 迁移错误：尽管使用 PostgreSQL 15，“类型“serial”不存在”

我正在尝试在 Prisma 项目中运行迁移，但遇到错误“类型“serial”不存在”，即使我使用的是 PostgreSQL 15.8，它应该支持此功能