I have the following jQuery code below I am trying to use (I know it's not optimized, but I do not think that is the issue; feel free to optimize it though):
$(document).ready(function(){
var cur = 0;
function slideshow() {
$("#imgdisp").fadeOut(400);
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
setTimeout(slideshow,4000);
}
slideshow();
})
With the following HTML file:
<!DOCTYPE html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jscodes/slideshow.js"></script>
<link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">
<div id="imgdisp">
<img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">
</div>
</html>
What I am trying to create is a slideshow that does the following (in order):
1) fade out current image
2) remove the current image
3) append a new image (called home_2.jpg, and it goes up to home_3.jpg)
4) fade in
5) wait four seconds to repeat with the next image
However, when I try to run this code, it appends the new image before fading out, so the image appears abruptly, fades out, then fades in, and waits four seconds before it repeats. My questions are:
1) How do I fix this code such that it changes the image while the div is faded out?
2) Is there a way to have the image fade immediately to the next image?
Thanks in advance to everyone who contributes :)
Try this:
$(document).ready(function(){
var cur = 0;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
setTimeout(removeCurrent, 4000);
}
function removeCurrent(){
$("#imgdisp").fadeOut(400);
slideshow();
}
slideshow();
});
You can use NivoSlider a jQuery plugin available here
Try this one:
$(document).ready(function(){
var cur = 1;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
setTimeout(function(){
$("#imgdisp").fadeOut(400, function(){
$("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='img_"+cur+".jpg'>");
$("#imgdisp").fadeIn(400);
});
slideshow();
}, 4000);
}
slideshow();
});
on top of dunli some modification can do what you are looking for -
$(document).ready(function(){
var cur = 0;
function slideshow() {
if (cur >= 3) {
cur = 1;
} else {
cur++;
}
$("#imgdisp").empty().append("<img style='display:none' src='image_path/home_"+cur+".jpg' />");
$("#imgdisp img").fadeIn(400);
setTimeout(removeCurrent, 4000);
}
function removeCurrent(){
$("#imgdisp img").fadeOut(400);
slideshow();
}
slideshow();
});
Related
so i've made a jquery carousel which you can see here: http://teste.boleiafacil.com/ (it's the one in the end of the page
this is the jquery:
//highlights slide animation
var prdlength = $(".rproducts").length;
var prdleft = 1;
var i = 0;
function swapC() {
i++;
prdleft++;
$(".rproducts").each(function(){
$(this).animate({"left":"-" + prdleft + "px"}, 10);
if (prdleft == 180){
$(this).appendTo(".rproductswrapper");
prdleft = 0;
}
});
if (i == prdlength) {
i = 0
}
window.setTimeout(function() { swapC() }, 10);
}
$(window).on("load", swapC);
the problem is when the divs get appended to the end of the wrapper it looks glitchy.
how can i fix this?
Try wrapping your function in a document ready rather than window load, the shorthand for it is:
$(function(){
//code here
});
I have made a short script, where a text is blinking. But I cannot really figure out how I can stop the blinking after fx 3 blinks. Does anybody know how I can add that to my script?
Best Regards Julie
HTML
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
CSS:
.flash{
background: yellow;
}
.noflash{
background: white;
}
JS:
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
function blink(selector, repeat){
if(!repeat) return;
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, repeat - 1);
});
});
}
blink('.blink', 3);
So you can control how many times it will blink.
You can build chain of effects without recursion:
function blink(selector){
var chain = $(selector);
for (var i = 0; i < 3; i++) {
chain = chain.fadeOut('slow').fadeIn('slow');
}
}
blink('.blink');
You could try something like this (untested):
function blink(selector, count){
count = count || 1;
if (count <= 3) {
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this, ++count);
});
});
}
}
I made a slideshow with php and javascript and it slides the images just fine , but i'm a bit stuck at the back and forward functionalities and i would be grateful if you could help me a bit here.This is what i've done so far:
PHP:
$dir = 'images/slideshow';
$images = scandir($dir);
$i = 0;
echo '<div id="slideshow-wrapper">';
echo '<div id="slideshow-beta">';
foreach($images as $img){
if ($img != '.' && $img != '..') {
$i++;
echo '<img src="../images/slideshow/'.$img.'" class="img_'.$i.'">';
}
}
echo '</div>';
echo '<div id="slideshow-controller">';
echo '<div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);"></span></div>';
echo '<div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);"></span></div>';
echo '</div>';
echo '</div>';
Javascript:
var i=1;
var begin=true;
function SlideShow(x){
if(x==-1){
i--;
}else if(x==1){
i++;
}
var total=$('#slideshow-beta img').length;
for(var j=1;j<=total;j++){
if($('.img_'+j).css('display')!='none'){
begin=false;
break;
}else{
begin=true;
}
}
if(i>total){
i=1;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}else if(begin){
$('.img_'+i).show();
}else if(!begin){
$('.img_'+(i-1)).fadeOut(1000,function(){
$('.img_'+i).fadeIn(1000);
});
}
setTimeout(function(){
i++;
SlideShow(x);
},5000);
}
HTML:
<body onload="SlideShow(false);">
As you can see i tried to make an onclick event to change the 'i' value on run , though the value is changed , the image is not . Maybe because pressing back/forward calls another instance of the function instead of overwriting it.I don't know for sure , i'm lost on this one.
Here's a fiddle
I've made a major overhaul, but the idea stays the same (fiddle):
Changes to CSS:
.left-arrow, .right-arrow {
cursor: pointer;
/** display: none **/
}
#slideshow-controller {
z-index: 2;
position: absolute;
/** added **/
opacity: 0;
transition: opacity 300ms ease-in;
/***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
opacity: 1;
}
Changes to HTML (removed inline onClick):
<div class="left-arrow-div"><span class="left-arrow">Back</span>
</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>
</div>
Javascript:
var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;
/*** hide all images at the start ***/
images.each(function (index) {
$(this).css({
display: 'none'
});
});
/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
SlideShow(-1);
});
$('.right-arrow').click(function () {
SlideShow(1);
});
/*** Start the slideshow on 1st image ***/
SlideShow(0);
function SlideShow(x) {
if (isNaN(x)) { // throw error if x is not a number
throw new Error("x must be a number");
}
clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
var current = (total + i + x % total) % total; // get the current image index
$(images[i]).fadeOut(1000, function () { // fade out the previous
$(images[current]).fadeIn(1000); // fade in the current
});
i = current; // set i to be the current
timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
SlideShow(1);
}, 5000);
}
I have fixed your problems - the main problem was that you call the function inline - but the function doesn't exist at this moment (the milliseconds in pageload). The other one was your if (now with 3 = that includes the type - because false, 0, -1 and so on are "the same".
The only problem now is that the interval runs infinitely and can call the next image instantly after a manual change.
In conclusion I recommend you to use a library like cycle2 or anything like this.
https://jsfiddle.net/Lroatbzg/15/
jQuery(window).on('load', function() {
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var total = $('#slideshow-beta img').length;
function SlideShow(x) {
if(x === -1) {
i--;
} else if(x === 1) {
i++;
}
if(i > total) {
i = 1;
}
$('#slideshow-beta img').hide();
$('#slideshow-beta .img_' + i).fadeIn(1000);
}
setInterval(function() {
i++;
SlideShow(i);
}, 5000);
jQuery('.left-arrow-div').on('click', function() {
SlideShow(-1);
});
jQuery('.right-arrow-div').on('click', function() {
SlideShow(1);
});
SlideShow(false);
});
Your fiddle throws a ReferenceError: SlideShow is not defined (Firefox using Firebug).
Try replacing function SlideShow(x){...} with SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/).
Honestly I don't know why the latter works, as those two statements are equivalent to me (any explanation on that?).
Declaring your function the other way around gets rid of the error - at least in my browser.
use
if(x=='-1'){
i--;
}else if(x=='1'){
i++;
}
instead of
if(x==-1){
i--;
}else if(x==1){
i++;
}
The problem is that the setTimeOut will execute the function SlideShow delayed. However, when you click a button, this delayed execution is not stopped. To stop this execution, I made a small change to the code. Furthermore, I solved the ReferenceError in jsfiddle by launching the onClick-functionality through jQuery.
This result can be checked here: https://jsfiddle.net/Lroatbzg/13/
$("#slideshow-wrapper").hover(function(){
$(".left-arrow,.right-arrow").fadeIn();
}, function(){
$(".left-arrow,.right-arrow").fadeOut();
});
var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter){
if(latest!=parameter)
return; //Return when this function is not called through the last click or timeout.
var total=$('#slideshow-beta img').length;
i=i+direction;
if(i>total)
i=1;
if(i<1)
i=total;
begin=true;
for(var j=1;j<=total;j++)
{
if($('.img_'+j).css('display')!='none')
{
begin=false;
$('.img_'+total).fadeOut(1000,function(){
$('.img_'+j).css('display','none');
$('.img_'+i).fadeIn(1000);
});
break;
}
}
if(begin)
$('.img_'+i).show();
setTimeout(function(){
SlideShow(parameter);
},5000);
}
SlideShow(latest);
$("#left").click(function(){ latest=Math.random(); direction=-1; SlideShow(latest); });
$("#right").click(function(){ latest=Math.random(); direction=1; SlideShow(latest); });
The HTML is changed as follows:
<div id="slideshow-controller">
<div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
<div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>
I am trying to highlight each menu items after 1 sec gap.
It works fine, but I am facing a problem for the last menu item. I added
$(strtemp).removeClass("change"); for clearing the last menu item, but that line is getting executed before the setInterval function gets executed. I am not able to understand why?
my.js
$(document).ready(function(){
$(".parent").click(function(){
str = "li:nth-child(";
strtemp="";
i=1;
var refreshID=setInterval(function(){
str1=str.concat(i);
str1=str1.concat(")");
str2=str.concat(i-1);
str2=str2.concat(")");
if($(str2).hasClass("change")){
$(str2).removeClass("change");
}
$(str1).addClass( "change" );
if(i==10){
strtemp=str1;clearInterval(refreshID);
}
i++;
}, 1000);
$(strtemp).removeClass("change");
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type="text/Javascript" src="jquery.js"></script>
<script src="my.js"></script>
<title>My Jquery</title>
</head>
<body>
<div class="parent">
<ol>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
<li>AAAAA</li>
</ol>
</div>
</body>
</html>
stylesheet.css
.parent{
background-color: yellow;
height:200px;
width:400px;
}
.change{
border: 1px dotted green;
background-color: red;
height:15px;
width:100px;
}
The $(strtemp).removeClass call is outside the callback function passed to setInterval. The code inside the function will execute each tick, everything outside will be executed sequentially when the click handler fires.
Edit
Are you looking for something like: http://jsfiddle.net/qprjqy2n/ ?
$(document).ready(function(){
$(".parent").click(function(){
str = "li:nth-child(";
strtemp="";
i=1;
var refreshID=setInterval(function(){
str1=str.concat(i);
str1=str1.concat(")");
str2=str.concat(i-1);
str2=str2.concat(")");
if($(str2).hasClass("change")){
$(str2).removeClass("change");
}
$(str1).addClass( "change" );
if(i==11){
strtemp=str1;clearInterval(refreshID);
$(strtemp).removeClass("change");
}
i++;
}, 100);
});
});
I would be interested to know what your overall goal is as there would almost certainly be a more straightforward approach.
You can do with also as:
function atlast(strtemp)
{
$(strtemp).removeClass("change");
}
$(document).ready(function(){
$(".parent").click(function(){
str = "li:nth-child(";
strtemp="";
i=1;
var refreshID=setInterval(function(){
str1=str.concat(i);
str1=str1.concat(")");
str2=str.concat(i-1);
str2=str2.concat(")");
if($(str2).hasClass("change")){
$(str2).removeClass("change");
}
$(str1).addClass( "change" );
if(i==10){
strtemp=str1;clearInterval(refreshID);
atlast(strtemp);
}
i++;
}, 1000);
});
});
As a suggestion, much easier approach:
$(".parent").click(function() {
lis = $(this).find('li');
i = -1;
inter = setInterval(function() {
if (i < lis.length - 1) {
i++;
$(lis[i - 1]).removeClass('change');
$(lis[i]).addClass('change');
console.log($(lis[i]).text() + '_________________' + i);
} else {
console.log('end');
$(lis[i]).removeClass('change');
clearInterval(inter);
}
}, 1000);
});
without building of css selectors, and corrected timer, and fiddle link... http://jsfiddle.net/Lb6v334a/1/
You can use nested setTimeout functions, the answer below is inspired from this SO post ..
$(document).ready(function(){
$(".parent").click(function(){
items = $(this).find('li');
i = -1;
len = items.length;
function animation_loop() {
$(items[i]).addClass('change');
setTimeout(function(){
$(items[i]).removeClass('change');
}, 100 );
setTimeout(function() {
if (i < len)
{
i++;
animation_loop();
}
}, 100);
};
animation_loop();
});
});
Demo
You can also do it as below
var index=1;
var curretInterval;
$(".parent").click(function(){
clearInterval(curretInterval);
curretInterval=setInterval(function(){
$("ol li:nth-child("+(index-1)+")").removeClass("change");
$("ol li:nth-child("+index+")").addClass("change");
index=index+1;
index=index>11?1:index;
},1000);
});
JSFiddle for the same is
http://jsfiddle.net/prasadFiddle/405cnu39/23/
and on next clicks if you want to start highlighting from begining then http://jsfiddle.net/prasadFiddle/405cnu39/24/
If you want to run this loop only once then http://jsfiddle.net/prasadFiddle/405cnu39/25/
I've made a slide show width a javascript and Jquery. But I need to reset the slide interval when the user is navigating manualy to the next or previous slide. I am relatively new to javascipt and it's syntax. Any help will be appriciated. Here is my code:
<script type="text/javascript" src="/elements/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var currentSlideId = 0;
var slidesAmount = 0;
function selectSlide(id) {
jQuery(".startpage-test.slide" + id).show().siblings(".startpage-test").hide();
jQuery(".slideshow-show-active.slide" + id).addClass("active").siblings(".slideshow-show-active").removeClass("active");
}
function nextSlide() {
currentSlideId++;
if (currentSlideId >= slidesAmount) currentSlideId = 0;
selectSlide(currentSlideId);
}
function prevSlide() {
currentSlideId--;
if (currentSlideId < 0) currentSlideId = slidesAmount - 1;
selectSlide(currentSlideId);
}
jQuery(document).ready(function() {
slidesAmount = jQuery(".startpage-test").length;
jQuery(".show_previous").click(function() {
prevSlide();
return false;
});
jQuery(".show_next").click(function() {
nextSlide();
return false;
});
window.setInterval(function() {
nextSlide();
}, 7000);
});
jQuery("object.flashContent").each(function () {
swfobject.registerObject(jQuery(this).attr("id"), "9.0.0");
});
</script>
The next-/prev-button looks like this:
<div class="show_next">
<span class="slide_nav"><img src="/elements/next.png" width="57" alt="Next"></span>
</div>
<div class="show_previous">
<span class="slide_nav"><img src="/elements/prev.png" width="57" alt="Previous"></span>
</div>
In all slides there is a link of course, and it would also be nice to stop the slide interval when hovering this a-tag. Unfortunately I don't know how to do this either.
You can assign the result of setInterval() to a variable, then call clearInterval() passing in that variable whenever you need. So in your case, change this code:
window.setInterval(function() {
nextSlide();
},
to this:
var interval = window.setInterval(function() {
nextSlide();
},
Then, in any.hover(), .mouseenter(), .click() or whatever other mouse event handler you are using, simply call:
window.clearInterval(interval);
Of course, you need to reinstate the interval when you want to restart it!