How i will add a time limit of pop up image - javascript

When click on the small image it will open as pop-up for 15 seconds, and then automatically opens the second one.
Is it possible to add certain time limit of pop-up image and after that the next image will open? closely same with Whatsapp or Facebook status.
Here is my HTML, CSS and JavaScript code:
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*End style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
<!--End image popup-->
Thank you.


window.onload = function() {
setTimeout(function() {
document.getElementById('mydiv').style.display = 'block';
}, 10000);
}


You can use this code but I guess you can easily find more examples for this on google.
$(function() {
"use strict";
var timeOut;
var intervalMs = 15000;
$(".popup img").click(function() {
var src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", src);
if (timeOut != null)
clearTimeout(timeOut);
var that = $(this);
timeOut = setTimeout(function() {
if (that.next() == null)
that.siblings().first().click();
else
that.next().click();
}, intervalMs);
});
$("span, .overlay").click(function() {
clearTimeout(timeOut);
$(".show").fadeOut();
});
});

Related

Making a jQuery carousel automatically slide

So I've created my image slider and it is set to slide when one of the buttons is clicked. But now I'm struggling to make the slide automatically and stop when the mouse hovers over the sider. Could you show me or at least tell me how to do this? Thanks
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

You can achieve that by creating a setInterval() where you call your slider function every x seconds, and put a flag on it to not run if the mouse is over it.
Something like
var SECONDS_INTERVAL = 1000; // 1s
var mouseHoverFlag = false;
setInterval(function() {
if (!mouseHoverFlag) {
next_slide();
}
}, SECONDS_INTERVAL);
And change that mouseHoverFlag to true whenever the user has the mouse over the div that contains it.
$('.carousel').hover(function() {
mouseHoverFlag = true;
}, function () {
mouseHoverFlag = false;
});
You could use setTimeout and kill it every time that the mouse gets in but I think that's too heavy, performance wise.

Here is my edited version. We have to use setInterval function for automatic slide. Next we add hover event listener to carousel. If we are hovering, our variable preventSlide will change to true and if we stop hovering, variable will be changed back to false, which means auto slide.
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
/*$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});*/
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

You should add a setInterval and clearInterval for automatic slide. Also it is good to calculate which slide you are in at the current animation. Briefly,
var timer;
var rotator = function(){
nextSlide();
};
timer = setInterval(rotator, 5000); // your desired timer
$('.carousel').hover(function(){ clearInterval(timer), function(){ timer = setInterval(rotator, 5000); });
you can optimize the code far better, but the basic solution is like this.

$(function(){
setInterval(function () {
moveRight();
}, 3000);
});
check here

You can set the time interval as an option in the carousel. You can also set the pause option on hover.
$("#myCarousel").carousel({interval: 500, pause: "hover"});

JQuery content slider issues

I am very new to web development and I am trying to make a basic slider using JQuery. However when slide3 is moving to left:0 it is still visible when moving across the screen. I am unsure of what I have done wrong to cause this and would love to know!
var slide1 = "#slide1";
var slide2 = "#slide2";
var slide3 = "#slide3";
function slideAnimation(moveOut, moveIn, delay1, delay2) {
setTimeout(function() {
$(moveOut).animate({
left: '-100%'
}, 2000);
$(moveIn).animate({
left: '0'
}, 2000);
}, delay1);
setTimeout(function() {
$(moveOut).hide();
$(moveOut).animate({
left: '100%'
});
$(moveOut).show();
}, delay2);
};
function contentSlider() {
slideAnimation(slide1, slide2, 5000, 5200);
slideAnimation(slide2, slide3, 10000, 10200);
slideAnimation(slide3, slide1, 15000, 15200);
};
$(document).ready(function() {
contentSlider();
});
setInterval(function() {
contentSlider();
}, 25000);
.index3 {
height: 482px;
width: 100%;
position: relative;
}
#contentSlider {
position: absolute;
width: 100%;
min-height: 482px;
overflow: hidden;
}
.slideArea {
position: absolute;
width: 300%;
left: -100%;
height: 100%;
line-height: 400px;
font-size: 50px;
text-align: center;
left: 0;
}
#slide1 {
background: url(Images/slide1bkg.jpg) center;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 0;
}
#slide2 {
background: url(Images/slide2bkg.jpg) center;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 100%;
}
#slide3 {
background: url(Images/slide3bkg.jpg) left;
height: 100%;
width: 100%;
position: absolute;
display: block;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="index3">
<div id="contentSlider">
<!-- slide one content -->
<div id="slide1" class="slideArea">
<h5>Slide 1</h5>
</div>
<!-- slide two content -->
<div id="slide2" class="slideArea">
<h5>Slide 2</h5>
</div>
<!-- slide three content -->
<div id="slide3" class="slideArea">
<h5>Slide 3</h5>
</div>
</div>
<!-- link to javascript for content slider -->
<script src="slideshow.js" type="text/javascript"></script>
</section>
Any help or suggestions would be greatly appreciated, please let me know if you need anymore info!
Thanks!

You have to hide() on callback of the animation that slides -100% left.
function slideAnimation(moveOut, moveIn, delay1, delay2) {
setTimeout(function () {
$(moveOut).animate({left: '-100%'},2000,function(){ $(moveOut).hide();});
$(moveIn).show(); // Added a show() here
$(moveIn).animate({left: '0'},2000);
}, delay1);
setTimeout(function () {
//$(moveOut).hide();
$(moveOut).animate({left: '100%'});
//$(moveOut).show();
}, delay2);
};
See Fiddle : https://jsfiddle.net/Bes7weB/xuurk73s/

show modal after accepting cookie

I need to show the modal with youtube video after the click on the cookie banner, for accepting.
now, after this action, the page refresh and the video start correctly, but starts also the video into the modal box.
this is the code:
JS
jQuery(document).ready(function() {
var id = '#dialog';
//prendi dimensioni schermo
var maskHeight = jQuery(document).height();
var maskWidth = jQuery(window).width();
//if (jQuery('#cc-approve-button-thissite').click(function(){
//jQuery('#mask').css({'display', none});
if (jQuery('#cc-notification').is(':visible')) {
jQuery('#dialog').css({display: "none"});
} else {
jQuery('#boxes').css({display: "block"});
//imposta altezza e larghezza maschera
jQuery('#mask').css({'width':maskWidth,'height':maskHeight});
//transizione
jQuery('#mask').fadeIn(500);
jQuery('#mask').fadeTo("slow",0.9);
//altezza - larghezza
var winH = jQuery(window).height();
var winW = jQuery(window).width();
//vedi al centro
jQuery(id).css('top', winH/2-jQuery(id).height()/2);
jQuery(id).css('left', winW/2-jQuery(id).width()/2);
//transition
jQuery(id).fadeIn(2000);
//al click su close
jQuery('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
jQuery('#mask').hide();
jQuery('.window').hide();
});
//al click sulla maschera
jQuery('#mask').click(function () {
jQuery(this).hide();
jQuery('.window').hide();
});
};
//});
});
HTML
<div id="boxes">
<div id="dialog" class="window">
<iframe width="700" height="400"
src="http://www.youtube.com/embed/sTujqJHITDs?autoplay=1">
</iframe>
<div id="popupfoot"> Close</div>
</div>
<div id="mask"></div>
</div>
CSS
#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}
#boxes .window {
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 400px;
display: none;
z-index: 9999;
padding: 20px;
border-radius: 5px;
text-align: center;
}
#boxes #dialog {
width: 750px;
height: 420px;
padding: 10px;
background-color: #ffffff;
font-family: 'Helvetica', sans-serif;
font-size: 15pt;
}
#popupfoot {
font-size: 16pt;
position: absolute;
bottom: 0px;
width: 250px;
left: 250px;
}

how do you add a poster image in an <iframe></iframe> tag before the start of a video?

need to create a live stream page in a website where in the video window when there is no video stream there could be a poster if you will until the video is shown.
would appreciate all the help I could get.
( I already have the iframe tags in place just wanted to know if it is possible. for the site I am using bootstrap.)
Thank you
Falkon

Try this as you have jquery tagged.
$(function() {
var videos = $(".video");
videos.on("click", function(){
var elm = $(this),
conts = elm.contents(),
le = conts.length,
ifr = null;
for(var i = 0; i<le; i++){
if(conts[i].nodeType == 8) ifr = conts[i].textContent;
}
elm.addClass("player").html(ifr);
elm.off("click");
});
});
.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; }
.video img { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; cursor: pointer; }
.video:after { content: ""; position: absolute; display: block;
background: url(play-button.png) no-repeat 0 0;
top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; }
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* image poster clicked, player class added using js */
.video.player img { display: none; }
.video.player:after { display: none; }
<div class="video">
<img src="poster.jpg">
<iframe width="940" height="529" src="http://www.youtube.com/embed/rRoy6I4gKWU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on

I prepared this:
http://jsfiddle.net/hXpWh/2/
When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on.
Here is the js code:
moped = "";
$(".container").mouseenter(function () {
$(".content").css('background', function () {
moped = $(this).css('background');
return "green";
});}).mouseleave(function () {
$(".content").css('background', function () {
return moped;
});
});
html:
<div class="container">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container</p>
</div>
</div>
<div class="container2">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container2</p>
</div>
</div>
css:
.container {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.container2 {
position: absolute;
top: 0;
left: 255px;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.content {
display: block;
background: red;
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption {
display: block;
background: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption p {
position: relative;
bottom: 10px;
left: 10px;
}

The other answers show what's wrong in the jQuery code, but another fix is to just using CSS for this.
Give the outer elements a common class, then:
.cont {
background:red;
}
.cont:hover .content {
background: green;
}
DEMO: http://jsfiddle.net/hXpWh/4/
But with respect to the jQuery code, not only do you need to find the nested .content, but also, there's no need for the variable. Just set the background to "" in the mouseleave.
$(".container").mouseenter(function () {
$(this).find(".content").css('background', "green");
}).mouseleave(function () {
$(this).find(".content").css('background', "");
});

Change $(".content") to $(this).find(".content") in the .mouseenter function, and it will only change the one that you hover over. You could change it to $(".content", this), but as per epascarello in the comments, it is not as efficient.

Well , you could either move the css background attribute or do this:
moped = "";
$(".container").mouseenter(function () {
$(this).children(".content").css('background', function () {
moped = $(this).css('background-color');
return "green";
});
}).mouseleave(function () {
$(this).children(".content").css('background', function () {
return moped;
});
});
My advice is do it with the script and refactor it , use .hover() and name the mouseenter and mouseout functions separately.
Good luck, mate.

Categories

Resources