I did extend PhotoSwipe with a Slide Show function, see this example The Slide Show starts if you click the Play button in the upper right corner and you stop the Slide Show by clicking the pause button in the upper right corner. This works fine on a PC.
It works also on my iPad, but clicking the Pause button has a side effect: the image is zoomed-in. I have no idea thus this causes. Any idea?
The Start/Stop function is executed in a function playpause(). To get rid of this side effect I like to use the single tap event on the image to execute my playpause() function.
So my question is: how do I bind my playpause() function to the click / tap event on the image?
This is the code I use:
/** HTML **/
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<!-- Play/Pause button -->
<img src="res/play.png" width="30" height="30" id="$playpause" alt="Speel/Stop (spatie balk)" title="Speel/Stop (spatie balk)">
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
/** JS **/
function slideShowTimer() {
if ((stopAfterLastSlide)&&((slide_index == items.length-1))) {
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
playing= !playing;
pswp.close();
}
else {
slideShowTimerID = setTimeout("slideShowTimer()",viewtime);
pswp.next();
}
};
function playpause() {
playing= !playing;
if (!playing) {
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
} else {
document.images['$playpause'].src = pause_img.src;
slideShowTimer();
}
};
pswp = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
pswp.listen('destroy', function() {
if (playing) {
playing = false;
document.images['$playpause'].src = play_img.src;
clearTimeout(slideShowTimerID);
}
});
pswp.init();
/** CSS **/
#link--play {
position: absolute;
right: 132px;
padding: 6px;
z-index: 9999;
}
You aren't showing any code, which makes it quite hard to give proper help.
Just shooting in the dark: use event.preventDefault();
I adoped this implementation, and it works quite well: https://photoswipe.uservoice.com/forums/275302-feature-requests-ideas/suggestions/6964114-autoplay
I did bind my playpause() function to the click / tap event on the image with next code:
ui.onGlobalTap = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if ((framework.hasClass(target, 'pswp__img')) && !PC) {
if(!_controlsVisible) {
ui.showControls();
setTimeout(function() {
ui.hideControls();
}, 2000);
}
playpause();
return;
}
To see it working go to: http://andrewolff.jalbum.net/Reestdal_PS/#&gid=1&pid=6 but clicking in the image to start/stop the slide show works only on a mobile device like the iPad, on a PC you can use the space bar to start/stop the slide show.
I did not solve the side-effect you see on an iPad if you click on the play/pause button in the upper right corner.
Related
$(document).ready(function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
$(".videoslide")
.css("background","#000 url('https://giffindex.com/images/giffindexdeskmat2022.jpg') center")
.css("background-size","cover")
.css("min-height","300px")
$(".videoslide .wrapper").css('background', 'rgba(0,0,0,.2)');
$(".videoslide .cta, .videoslide h1, .videoslide p").delay(500).fadeIn(600);
}
else {
var posterImage = new Image();
posterImage.src = "https://giffindex.com/images/giffindexmanufacturer2022.jpg";
posterImage.onload = (function() {
$(".videoslide .cta, .videoslide h1, .videoslide p").delay(400).fadeIn(300);
});
var videoHero = document.getElementById("videoHero");
videoHero.src = "https://giffindex.com/download/giffindexdeskmat1.mp4";
videoHero.load();
videoHero.addEventListener('loadeddata', function() {
$(".videoslide .wrapper").css('background', 'rgba(0,0,0,0.1)');
$(".videoslide video").fadeIn(200);
updateVideoHeight();
}, false);
}
$(window).resize(function () {
updateVideoHeight();
});
});
function updateVideoHeight() {
if($('.videoslide').height() > $('.videoslide video').height()) {
$('.videoslide video').height($('.videoslide').height());
$('.videoslide video').width('auto');
}
if($('.videoslide').width() >= $('.videoslide video').width()) {
$('.videoslide video').height('auto');
$('.videoslide video').width('100%');
}
}
<script src="js/video.js" defer></script>
<div class="videoslide">
<video autoplay loop preload poster="https://www.giffindex.com/images/giffindexmanufacturer2022.jpg" id="videoHero" style="display:none;height:auto;"></video>
The staff who write this code for our company website has left company almost 10 years cannot contact him to fix.
The site is www.giffindex.com (I want the VDO auto play). The problem is it need to click logo on top left corner 1 time for trigger VDO to running.
What can I try next?
There are 3 ways how you could make autoload work:
The user needs to interact with your website first. In your case, when clicking on the logo, autoload works, because the user has already interacted with your website.
You could use setTimeout() to manipulate the browser (see this answer).
You could use the attribute muted within your <video> tag. Since the audio will not be played, autoload will work (see this example).
I have a video carousel created using the flickity carousel library, seen here on codepen. What I want to happen is that when a user slides the carousel, the selected slide stops playing, then the slide that takes the selected, middle position starts to play. Right now, using jQuery, I get the selected slide to initially play:
$(document).ready(function () {
var $partnerSlides = $('.partner-slides').flickity();
function onLoadeddata(event) {
var cell = $partnerSlides.flickity('getParentCell', event.target);
$partnerSlides.flickity('cellSizeChange', cell && cell.element);
}
$partnerSlides.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('durationchange', onLoadeddata);
});
$partnerSlides.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('durationchange', onLoadeddata);
});
});
But when the slides switch position, the selected slide just moves position and keeps playing, while the new slide takes the middle position and doesn't play.
Is there a way to update those functions each time the carousel slides?
I actually figured out what I thought is the best way to do this. There is an event for the carousel, 'settle.flickity', which fires each time the carousel settles after being slid or autoplayed (More can be read about the flickity events here on flickity. Therefore, this code:
var $gallery = $('.partner-slides').flickity(); //this is the carousel
$gallery.on('settle.flickity', function () {
console.log('Flickity settled at ' + flkty.selectedIndex);
$gallery.find('.slide video').each(function (i, video) {
video.pause();
$(video).on('loadeddata', onLoadeddata);
});
$gallery.find('.slide.is-selected video').each(function (i, video) {
video.play();
$(video).on('loadeddata', onLoadeddata);
});
});
Will play the selected video and pause any video that is not selected.
I have some data in a table where clicking it will navigate you elsewhere, but people are requesting the ability to highlight the text to be able to copy/paste it elsewhere. Since they are links, the default behavior in HTML is to drag the link... I don't know why or how that is useful, but I want to disable that on certain links.
TL;DR: I want to be able to highlight the text of a link and not drag it.
The gif below should help explain my issue.
The following methods are NOT what I want:
I have seen examples that prevent both highlighting & dragging using something like this
<a draggable="false" href="#">
or this
.no-drag {
user-drag: none;
}
Or this
myElement.ondragstart = function () {
return false;
};
But obviously that is not what I need here.Is what I want possible to do?
In Google Chrome this works
user-select: none;
-webkit-user-drag: none;
#Julien Grégoire's answer above put me on the right track for this, but the below code is the basics of what I ended up using.
var clickedEl = document.getElementById("test");
var limit = 5;
var mouseMoved = false;
function resetEvents() {
clickedEl.onmousemove = null;
clickedEl.ondragstart = null;
clickedEl.onmouseleave = null;
mouseMoved = false;
}
clickedEl.onmousedown = function (downEvent) {
if (clickedEl.attributes.href) {
clickedEl.onclick = function (clickEvent) {
if (mouseMoved) {
clickEvent.preventDefault();
}
resetEvents();
};
}
clickedEl.onmouseleave = function () {
resetEvents();
};
clickedEl.onmousemove = function (moveEvent) {
// This prevents the text selection being dragged
clickedEl.ondragstart = function (dragEvent) {
dragEvent.preventDefault();
};
if (Math.abs(moveEvent.x - downEvent.x) >= limit || Math.abs(moveEvent.y - downEvent.y) >= limit) {
// If user clicks then moves the mouse within a certain limit, select the text inside
window.getSelection().selectAllChildren(clickedEl);
mouseMoved = true;
}
};
};
<a id="test" href="http://stackoverflow.com">Click or select</a>
I'm super late to answer but I'm just gonna leave it here:
Just put draggable="false" inside <a> tag,
<a draggable="false" href="./"></a>
then in CSS you put:
body {
-webkit-user-drag: none;
}
You could detect if user moves the mouse after the click and if so manage selection using window.getSelection. Something like this for example:
var linkEl = document.getElementById('test')
linkEl.onmousedown = function(downEvent) {
var clickedEl = downEvent.target;
var mouseMoved = false;
clickedEl.onmousemove = function() {
// If user clicks then moves, select the whole link
window.getSelection().selectAllChildren(clickedEl);
// Set a flag to prevent opening the link
mouseMoved = true;
// Reset mousemove, else it'll run constantly
clickedEl.onmousemove = null;
// This is only to prevent having the text selection being dragged
clickedEl.ondragstart = function(dragEvent) {
dragEvent.preventDefault();
}
}
if (mouseMoved) {
// If mouse has moved, prevent default
downEvent.preventDefault();
}
}
<a draggable="false" id="test" href="http://stackoverflow.com">Click or select</a>
This is the simplest solution that worked for me. You can change '*' to 'a'.
*, *::after, *::before {
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-app-region: no-drag;
}
My .scrollBottom button works, but once it auto scrolls to the bottom I can't manually scroll back up because it is active and constantly scrolling down. What does it need for it scroll to absolute bottom and then STOP?
JavaScript
var timeOut;
function scrollToBottom() {
if (document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0){
window.scrollBy(0,20);
timeOut=setTimeout('scrollToBottom()',10);
}
else clearTimeout(timeOut);
}
HTML
BUTTON
I found that by removing the timeOut=setTimeout('scrollToBottom()',10);
the button scrolls down by 20 pixels on press.
With that information - I changed the window.scrollBy(0,20); to a ridiculous number like: window.scrollBy(0,2000000);
so I got this code:
var timeOut;
function scrollToBottom() {
document.body.scrollBottom!=0 || document.documentElement.scrollBottom!=0
window.scrollBy(0,2000000);
}
And paired with
html {
scroll-behavior: smooth;
}
It does the trick :)
Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code http://jsfiddle.net/PcAwU/1/)
what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.
Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc..
HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.
Thanks
Here is the script
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function toggle(el){
if(el.className!="play")
{
el.className="play";
el.src='images/play.png';
api.pause();
}
else if(el.className=="play")
{
el.className="pause";
el.src='images/pause.png';
api.play();
}
return false;
}
To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.
$(".items img").on("hover",function() {
....
Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.
}).filter(":first").trigger("mouseover");
jSFiddle: http://jsfiddle.net/PcAwU/2/
Now to have a play feature, you need a counter/ and a set interval like so:
var count = 1;
setInterval(function(){
count++; // add to the counter
if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
$(".items img").eq(count).trigger("mouseover");
} else count = 0; //reset counter
},1000);
This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.
jSFiddle: http://jsfiddle.net/PcAwU/3/
If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:
.scrollable .active {
....
border-bottom:3px solid skyblue;
Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/