I am using a jQuery plugin called Slideshowify. Unfortunately, it doesn't come with many options or functions, so I have been forced to attempt to create my own pause and play with mouse enter/leave.
As seen below, I have managed to stop the animating simply using .stop() on mouseenter, but I have not yet managed to find a way to play the animation from its current state after mouseleave.
How can I achieve this?
HTML:
<div id="slideshow">
<img src="http://lorempixel.com/output/city-h-c-320-500-2.jpg" />
<img src="http://lorempixel.com/output/food-h-c-320-500-9.jpg" />
<img src="http://lorempixel.com/output/abstract-h-c-320-500-10.jpg" />
</div>
CSS:
#slideshow {
background-color: #ffffff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ffffff;
z-index: 10;
}
JS:
$('#slideshow img').slideshowify({
parentEl: '#slideshow'
});
$("#slideshow").on('mouseenter', function () {
$(this).find('div > img').stop(true, false);
});
WORKING DEMO
Related
I'm new to all JS and i use Popup Magnific, i did a pop-up video, the problem is that it keeps running in the background after closing, i tried to do something to make it stop, but I got into trouble with it and i don't understand how to fix it.
i would love if anyone could help.
Attaching my code:
$('.open-popup-link').magnificPopup({
type:'inline',
midClick: true,
mainClass: 'custom-popup-class'
});
$("#popup").on('hidden.bs.modal', function (e) {
$("#mpopup iframe").attr("video", $("#popup iframe").attr("video"));
$.close function();
});
.custom-popup-class .mfp-container {
padding-top: 40px;
padding-bottom: 40px;
}
.custom-popup-class .mfp-content {
width: 100%;
max-width: 750px;
}
#popup1 {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
#popup1 .mfp-close {
top: -47px;
color: #FFF;
text-align: right;
right: 1px;
font-size: 40px;
}
<div class="col-md-3">
<div class="video-wrapper">
<div class="play">
<a href="#popup1" class="open-popup-link"><img src="img/3D/thumbnails/thumb1.jpg" class="img-fluid">
<img src="img/play.png" class="play-btn"></a>
<div id="popup1" class="mfp-hide">
<div class="box-video">
<video source src="img/3D/videos/birthday1.mp4" type="video/mp4" width="100%" controls preload></video>
</div>
</div>
</div>
</div>
</div>
You could have it so that when you click the button to close the window it would pause the video by adding a .pause(); , it would mean that you would need to .play(); to a play button if you wanted it to be re-playable in the future. If you give the close button an ID as well as the video an ID it could work.
In vanilla JS rather than in jQuery you could use
document.getElementById("closeButtonID").addEventListener("click", function(event){
document.getElementById("videoID ").pause();
})
Then you would just need to add a similar 2 lines to to the above but instead add .play();
Hope this helps/works!
I have just started coding and I have encountered a problem that seems very obvious to fix.
To animate my website, I decided to write a Javascript code using jQuery
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js.
The first part of the code work for me:
I click on "Hover Me" and the video pop-up.
All good.
Heres my code:
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera-2.svg">
</a>
<section class="popup-container">
<div class="popup-box-2">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
<div class="example-text">
I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, Want to try?
<!-- example-hoverVideo strip -->
<a class="hover-popup">Hover Me
<img class="camera-vector" src="https://www.matteogiordano.info/svg/video-camera.svg">
</a>
<section class="popup-container">
<div class="popup-box">
<video poster="https://intmagic-wordpress.s3.amazonaws.com/mamag/uploads/802500821_1280x720.jpg" playsinline="" autoplay="" muted="" loop="" >
<source src="https://player.vimeo.com/external/351032574.hd.mp4?s=b11ffe2804304867bd86bd956411f61ac45f1840&profile_id=174&oauth2_token_id=1204276317" type="video/mp4">
</video>
</div>
</div>
</section>
<!-- example-hoverVideo strip -->
<div class="example-text">I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen, I appreciated. Want to try? I Wanted to test a video autoplay on hover, using javascript & this time is finally worked, thanks codepen...</div>
</div>
The CSS linked just fine
body {
padding: 0;
margin: 0;
width: 100%;
background-color: #ddd;
}
/*example-hoverVideo strip*/
.popup-container {
width: 100%;
height: 100%;
pointer-events: none;
}
.popup-box {
position: fixed;
width: 74%;
height: 100%;
border-radius: 14px;
background-color: red;
padding: 0px 0px;
z-index: 1000;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.popup-box-2 {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 0px 0px;
z-index: 330;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}
.hover-popup {
cursor: pointer;
font-size: 50px;
color: red;
font-family: helvetica;
width: 100%;
height: 100%;
}
video {
z-index: 1200;
margin: 0;
padding: 0;
box-sizing: border-box;
padding: 150px;
width: 100%;
height: 100%;
}
#media only screen and (max-width: 800px) {
video {
padding: 50px;
}
}
#media only screen and (max-width: 500px) {
video {
padding: 0px;
}
}
.example-text {
padding: 30px;
font-size: 50px;
}
.camera-vector {
pointer-events: none;
width: 35px;
margin: 5px;
}
/*example-hoverVideo strip*/
and here is what i wrote on main.js to see if it works :
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeIn(150);
});
});
So as you can see, what I'm trying to do now is to make the video fade-out when the mouse click again over it.
I kindly ask if somebody could teach me the event to make it work.
Thanks in advance
$('#logoimage').hide("fade",2000,function() {
$( "#logoimage" ).show( "fade",2000);
});
You can add a "show or visible" class to that element when it is clicked to show it and show it if it is clicked a second time to check if that element has "show or visible" this class if it should then Hide it!
example :
$(function() {
var self = $('.hover-popup');
self.click(function () {
var popUp = self.next().children('.popup-box');
if(popUp.hasClass( "visible" ))
{
popUp.fadeOut(150);
popUp.removeClass('visible');
}
else {
popUp.fadeOut(150);
popUp.addClass('visible');
}
});
});
If you just want to show/hide on click, then you can use
.fadeToggle()
https://api.jquery.com/fadetoggle/
$(function() {
var popup = $('.hover-popup');
popup.click(function() {
$(this).next().children('.popup-box').fadeToggle(150);
});
});
Edit:
To add a basic "click anywhere to close"
$(function() {
$(document).on("click", function() {
$(".popup-box:visible").fadeOut(150);
});
});
but this will only pickup clicks that haven't already been handled (eg clicking on the background, but not clicking on another button).
Ideally, you would also show a "modal background" which covers the whole page and clicking that would hide the popup-box. But that's a bit too broad for an SO question and you might be better off looking at a 3rd-party plugin (asking for one is also off-topic).
Thanks everybody..
..and thanks freedomn-m.
Fade Toggle work perfectly 👍
$(function() {
var self = $('.hover-popup');
self.click(function () {
self.next().children('.popup-box').fadeToggle(150);
});
});
I needed to create a function that changes and animates the background image, to give it a cool fade-in effect when triggered. However I have run into a weird issue. So as for my function below, it works, in the sense that it changes the background image when run. But it does not animate. It just instantly changes the background image. I have tried messing with the "transition" property, using background, background-image, and others, but to no avail. Can someone help me understand why the animation part is failing to trigger?
function postBackgroundImage(url){
var bg = dom.el("topLayer");
bg.src = url;
bg.style.backgroundImage = "url("+bg.src+")";
bg.style.transition = "all 2s linear 1s";
}
You can use a Jquery Plugin
http://jquery.malsup.com/cycle/
include library
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
For fade effect use
$('.pics').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
html
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
css
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
I would like to ask you about the way to reuse the code below for multiple images:
http://jsfiddle.net/a8c9P/
How to avoid redundancy in the CSS code?
An updated example: http://jsfiddle.net/a8c9P/156
$("#imgSmall").click(function() {
$("#imgBig").attr("src", "http://www.freeimageslive.com/galleries/sports/music/pics/musical_notes.jpg");
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
http://jsfiddle.net/a8c9P/157/
HTML
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div>
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
JS
$(".imgSmall").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
width: 100%;
top: 100px;
text-align: center;
display: none;
overflow: hidden;
z-index: 100;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall{
cursor: pointer;
}
First - if you are going to use an id it should always be unique. That in mind, any time you want particular behavior that you want to apply to many elements in a "jQuery" manner - this is a perfect case to use a class instead of an id. An example of this:
$(".myClass").click(function(){
$("#imgBig").attr("src", $(this).attr("src"));
$("#overlay").show();
$("#overlayContent").show();
});
You'll note that I use this which is a reference to the exact item that was clicked! Now you don't have to worry about having many elements of the same type!
SEE THE FIDDLE
What you need is multiple IDs and an HTML Class to handle the CSS. Each element can only have one ID, but it can inherit multiple classes. Define .imgSmall and .imgBig classes, use those to handle your CSS, and then use whatever ID scheme suits you for the click detection.
I would recommend something like img1, img1, img2 and bigimg1, bigimg2, bigimg3, because that would let you generate all of your html in a loop.
I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}
Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.
This is very good plugin for you:
DEMO
plugin