JQuery image slider not working... What have I done wrong? - javascript

It should be simple image slider...
Why, o why doesn't this work? I followed some tutorial "to the letter", but it's video tutorial on youtube so I don't have their working code on some site to compare, but nevertheless, by their instruction and my week knowledge, I can't find mistake...
<html>
<head>
<title>JQuery test</title>
<style type="text/css">
.slider {
width:500px;
height:250px;
overflow:hidden;
margin:30px auto;
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center;
}
.slider img {
width:800px;
height:350px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}, 6500);
}
}
</script>
</head>
<body onload="Slider()">
<div class="slider">
<img id="img1" src="img/1.jpg" />
<img id="img2" src="img/2.jpg" />
<img id="img3" src="img/3.jpg" />
</div>
</body>
</html>

you have misplaced your } bracket for else and setInterval
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}
}, 6500); //<---here
}

Related

Swap image when hover with fade effect

I have a image in my .img-area div and my img tag has data-list-1and data-list-2attribute.When I hover on my .img-area img div my image must swap with attribute data-list-1and data-list-2with fade effect and when I hoverout it must swap with default img.
I get attribute and src but I couldn't change each image with fade efect
You can see my works on demo
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
$(".show").html("Default image: "+defaultImg+"<br>Data 1 img:"+data_1 +"<br/>Data 2 img:"+ data_2);
});
});
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
You can try with JQuery animate.
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
parentDiv.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_1)}).animate({ opacity: 1 }, 3000).animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_2)}).animate({ opacity: 1 },3000);
elem.animate({"src":data_1},"slow");
});
});
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
Edited
var i =0;
var timer;
$(function(){
$(".img-area img").on("mouseover",function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
var imageList = [data_1,data_2,data_1]
myanimation(parentDiv,elem,imageList,defaultImg);
});
});
var myanimation = function(parentElem,elem,imageList,defaultimage)
{
if(i <imageList.length)
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",imageList[i])}).animate({ opacity: 1 }, 3000);
timer = setInterval(function(){ i++;
myanimation(parentElem,elem,imageList,defaultimage) }, 6000);
}
else
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",defaultimage)}).animate({ opacity: 1 }, 3000);
}
}
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
window.onload=function(){
imgs=document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++){
img=imgs[i];
container=document.createElement("div");
img.parentNode.appendChild(container);
container.appendChild(img);
img2=document.createElement("img");
img2.src=img.getProperty("secondsrc");
container.appendChild(img2);
img2.id="secondimg";
img.id="firstimage";
container.style.width=img.width;
container.style.height=img.height;
}};
css:
#firstimage{
z-index:3;
position:absolute;
opacity:1;
transition: all ease 2s;
}
#firstimage:hover{
opacity:0;
}
html:
<img src="url" secondsrc="url2">

Javascript element collapsing not working [duplicate]

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 6 years ago.
here is my problem. I have the code that you see below. Why it doesn't work like it does here: http://jsfiddle.net/e6kaV/33/ ?
There is the error that is shown to me:
{
"message": "Uncaught ReferenceError: $ is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 54,
"colno": 13
}
Every help is appreciated, because I don't know how JS or jQuery works.
.pane-launcher{
position:absolute;
top: 0;
width:80px;
height:80px;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:90px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:1;
}
#rules-pane {
top:80px;
width:170px;
background-color:yellow;
}
#scenarios-pane {
top:80px;
width:170px;
background-color:blue;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
<script>
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Load jQuery before using it:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link rel="stylesheet" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
<script>
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
</script>
</body>
</html>
I put it in the <head> but you can put it anywhere, as long as it's before the code that uses $ ($ is jQuery).
You should add jquery before you can use it. Here is the working example. I have just removed the script tag of jquery from bottom and placed it before other scripts.
Here is the pen http://codepen.io/anon/pen/xOzjWg
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
.pane-launcher{
position:absolute;
top: 0;
width:80px;
height:80px;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:90px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:1;
}
#rules-pane {
top:80px;
width:170px;
background-color:yellow;
}
#scenarios-pane {
top:80px;
width:170px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
Thanks for help everybody, got it working after i included these 3 scripts link (which was an answer in suggested related question).
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

carousal slider images not sliding

I have been working on my carousal slider I have got images showing now.
But can not get it to slide the first image should fade and reset slide.
I have the current Ajax / jquery from Google. It should be able to slide. Not sure whats wrong.
Live Example: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
<link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$(".carousel #1").show("fade", 500);
$(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".carousel img").size();
var count = 2;
setInterval(function() {
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
$(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1
}
}, 1700);
})
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="carousel">
<img id="1" class="active" src="images/image1.jpg" border="0" alt="" />
<img id="2" src="images/image2.jpg" border="0" alt="" />
<img id="3" src="images/image3.jpg" border="0" alt="" />
</div>
</div>
</div>
</div><!-- . Container -->
</body>
</html>
Slider CSS
.carousel {
width: 100%;
height: 350px;
overflow: hidden;
background-image: url('../images/loading.gif');
background-repeat: no-repeat;
background-position: center;
}
.carousel img {
width: 100%;
height: 350px;
display: none;
}
I believe the problem is due to this line of code:
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
You are actually returning a function reference instead of an object there, I think the right line should be:
$(".carousel #"+count).show("slide",{direction: 'right'}, 500);
Still, I would simply use jQuery.animate() instead, and perhaps a whole different approach. Check the updated code, I've made some enhancements too:
$(document).ready(function() {
var images = $(".carousel img");
var timeout = 5000; // 5 seconds
var max = images.length;
var slide = function(index) {
var img = $(images[index]);
// first show the image
img.animate({left: "0"}, 500, function() {
// specify timeout to change image
setTimeout(function() {
// hide current image
img.animate({left: "100%"}, 500, function() {
// reset state to start over
img.css("left" , "-100%");
});
if (++index == max) {
index = 0; // start over
}
// recursive call
slide(index);
}, timeout);
});
};
slide(0);
});
I changed this CSS rules too:
.caoursel {
position: relative;
}
.carousel img {
position: absolute;
width: 100%;
height: 350px;
left: -100%;
}
Live demo: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
I recommend using some third party carousel, like Bootstrap's carousel: http://getbootstrap.com/javascript/#carousel

First image doesn't display in JS/JQ slidshow

I'm trying to make a javascript slideshow using some javaquery the first image doesn't fade in like it should and so obviously none of the other images slide or out either. This is my first attempt at making one of these so I'm not quite sure why it isn't working I've looked over and over at the code to make sure I've spelled everything correctly and all the proper punctuation, but I guess I could still be missing something. Anyway my code.
HTML5
<head>
<title>Home Styles</title>
<link rel="stylesheet" href="CSS/index.css" type="text/css"/>
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<link rel="shortcut icon" href="Images/favicon-logo-HS.ico"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="JS/slider.js"></script>
</head>
<body onload="Slider();" class="body">
<div class="slider">
<img id="1" src="Images/slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="Images/slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="Images/slide_image3.jpg" alt="Electronic Deals"/>
</div>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
width: 990px;
height: 270px;
border: 0;
display: none;
}
javascript
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction: 'right'},500);
$(".slider #"+count).delay(5500).hide("slide", {direction: 'left', 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
So there are several things going on with your JS that might be the issue here. First off a quick JShint tells me there are some syntax errors (missing semicolons and the like). But I think the real issue is that you're using some of these methods with non default easings but not defining new ones.
For example .hide() doesn't have a 'slide' easing. http://api.jquery.com/hide/. I would read through the api for .show() and .hide() you probably need to replace them with .animate()
Here is a solution that may work for you: EXAMPLE FIDDLE
HTML:
<div class="slider">
<img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
<img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
<img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
</div>
JS:
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
I use setTimeout() instead of setInterval() because of personal preference (interval can overlap function calls). You could also remove the .fadeIn()in my example and replace it with .animate() to get that horizontal slide effect you wanted.
After looking at this in jsfiddle and removing all the extra stuff that jsfiddle doesn't want, I noticed you are missing a closing bracket. I don't understand how you could not be getting console errors cause this is a syntax error:
function Slider() {
$("#a1").show("fade",500);
$("#a1").delay(5500).hide("slide", {direction: 'left'}, 500);
}
http://jsfiddle.net/mF7wv/

ERROR Images not showing in jQuery slideshow

I'm using jQuery and HTML to make a slideshow, but I'm having some trouble: one image shows up, and the other slides don't. I can't figure out where the issue is. Has anyone experienced a similar issue?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Slider</title>
<style type="text/css">
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:800px;
height:350px;
display:none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$('#img1').show("fade", 500);
$('#img2').delay(5500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider#"+count).show("slide", {direction:"right"}, 500);
$(".slider#"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="img1" src="img/13052012438.jpg"border="0"alt="image1" />
<img id="img2" src="img/25052012442.jpg"border="0"alt="image2" />
<img id="img3" src="img/13052012439.jpg"border="0"alt="image3" />
<img id="img4" src="img/25052012441.jpg"border="0"alt="image4" />
</div>
</body>
</html>
Use this...
$(document).ready(function(){
$('#img1').show("fade", 500);
$('#img2').delay(500).hide("slide", {direction:"left"}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$("#img"+count).show("slide", {direction:"right"}, 500);
$("#img"+count).delay(500).hide("slide", {direction:"left"}, 500);
if(count == sc){
count=1;
}else{
count=count+1;
}
}, 6500);
});
And see this jSfiddle example

Categories