I am building an Image slider from this tutorial. youtube.com
I cannot get the first image to fadeIn
I have reviewed the code several times but cannot see where i went wrong.
Here is my code
HTML
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
CSS
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
Javascript
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").size();
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
In your code you added }}; insted of });
var sliderInt=1;
var sliderNext=2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider()
});
function startSlider(){
count = $("#slider > img").length;
loop= setInterval(function(){
if(sliderNext > count) {
sliderNext=1;
sliderInt=1;
}
$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
.wrapper{
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<link rel="stylesheet" href="css/slider.css" type="text/css">
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="http://placehold.it/600x400g/ff0000">
<img id="2" src="http://placehold.it/600x400g/00ff00">
<img id="3" src="http://placehold.it/600x400g/0000ff">
<img id="4" src="http://placehold.it/600x400g/000000">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
Here is the working snippet. Is it what are you searching for?
var sliderInt=1,
sliderNext=2;
$(document).ready(function() {
$("#slider > img#1").fadeIn(300);
})
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width:600px;
height:400px;
overflow:hidden;
margin:30px auto;
}
#slider > img{
width: 600px;
height:400px;
float:left;
display:none;
}
a {
padding:5px 10px;
background-color:#F0F0F0;
margin-top:30;
text-decoration: none;
color: red;
}
a.left{
float:left;
}
a.right{
float:right;
}
<DOCTYPE html>
<html>
<head>
<title>Helping Develope | Jquery Slider</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="wrapper">
<div id='slider'>
<img id="1" src="Images/Image1.jpg">
<img id="2" src="Images/Image2.jpg">
<img id="3" src="Images/Image3.png">
<img id="4" src="Images/Image4.png">
</div>
<a href="#" class='left'>Previous</a>
<a href="#" class='right'>Next</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/slider.js"></script>
</body>
</html>
Related
I need this code without clicking function. I need it with normal slideshow against time.
I mean image will change after 5 sec automatically.
var gallery = $('.content'),
height = gallery.height();
$('.arrow').on('click', function(){
var up = $(this).is('.up_arrow');
if (up) {
gallery.animate({'scrollTop': '-=' + height});
} else {
gallery.animate({'scrollTop': '+=' + height});
}
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow up_arrow">UP</div>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
<div class="arrow down_arrow">DOWN</div>
Like this?
var gallery = $('.content'),
height = gallery.height(),
scrollHeight = gallery[0].scrollHeight,
y = 0;
$(function() {
setInterval(function() {
y += height;
if( y >= scrollHeight ) {
y = 0;
}
gallery.animate({'scrollTop': y });
}, 2000);
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
View this example. Run with plunker
// Add your javascript here
$(function(){
var gallery = $('.content'),
height = gallery.height();
setInterval(function(){
gallery.animate({'scrollTop': '+=' + height},1000,function(){
gallery.animate({'scrollTop':0},0);
gallery.append($('.content img:first'));
});
}, 5000);
});
/* Put your css in here */
h1 {
color: red;
}
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
</body>
</html>
I'm trying to solve a problem with scrolling on website. Take a look at this
site.
Scrolling down causes to slide up the "hidden" part of site. I wanna achieve the same effect, and it needs to be smooth sliding as well. I've tried to use scrollTop() and animate() but it doesn't work. I'm using JQuery. Let me post my code, here it is:
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="stylin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button").toggle(function(){
$("#blocks").animate({top: 200}, 500 );
},
function(){
$("#blocks").animate({top: 760}, 500 );
});
});
</script>
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>
</head>
<body>
<div id="main">
<div id="photo">
</div>
<div id="blocks">
<div id="button_block">
<a href="#" class="button" ><img src="scrollup.png" /></a>
</div>
</div>
</div>
</body>
</html>
CSS
#main {
width: 1500px;
position:absolute;
}
#photo{
position:fixed;
top:0;
width:1500px;
height:780px;
background-color:blue;
z-index:0;
}
#blocks{
position:absolute;
top: 760px;
width: 100%;
height: 1000px;
background-color: red;
z-index:1;
}
#button_block{
position:absolute;
width:100%;
height:64px;
top:-32px;
}
.button
{
display:block;
position: absolute;
right: 686px;
}
Div blocks should be the one sliding up while scrolling.
Look at this part:
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>
#main {
width: 1500px;
position:absolute;
}
#photo{
position:fixed;
top:0;
width:1500px;
height:780px;
background-color:blue;
z-index:0;
}
#blocks{
position:absolute;
top: 760px;
width: 100%;
height: 1000px;
background-color: red;
z-index:1;
}
#button_block{
position:absolute;
width:100%;
height:64px;
top:-32px;
}
.button
{
display:block;
position: absolute;
right: 686px;
}
#scroll_to_top{
display:none;
position:fixed;
bottom:15px;
right:20px;
opacity:0.8;
z-index:9999;
}
#scroll_to_top:hover{
opacity:1;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link href="stylin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".button").toggle(function(){
$("#blocks").animate({top: 200}, 500 );
},
function(){
$("#blocks").animate({top: 760}, 500 );
});
});
</script>
<script type="text/javascript">
$(function(){
var stt_is_shown = false;
$(window).scroll(function(){
var win_height = 300;
var scroll_top = $(document).scrollTop();
if (scroll_top > win_height && !stt_is_shown) {
stt_is_shown = true;
$("#scroll_to_top").fadeIn();
} else if (scroll_top < win_height && stt_is_shown) {
stt_is_shown = false;
$("#scroll_to_top").fadeOut();
}else if{
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
}
});
});
</script>
});
$("#scroll_to_top").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 1000);
});
});
</script>
<script type="text/javascript">
$(document).ready( function() {
$(document).scroll( function() {
$("#blocks").animate({top: (780-$(this).scrollTop())}, 1000 );
});
});
</script>
</head>
<body>
<div id="main">
<div id="photo">
</div>
<div id="blocks">
<div id="button_block">
<a href="#" class="button" ><img src="scrollup.png" /></a>
</div>
</div>
</div>
<img src="scrollup.png" />
</body>
</html>
I changed the if else statements and added a new one try it!
I have developed a custom slider. I'm having only one image animation occur, and the other images are not displaying. How do I show the other images with an animation?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.Slider
{
width: 800px;
height: 350px;
overflow: hidden;
margin: 30px auto;
background-image:url(http://cdn.css-tricks.com/wp-content/uploads/2011/02/spinnnnnn.gif);
background-repeat: no-repeat;
background-position: center;
}
.Shadow
{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb6KDmhtvsBAzkpXLHcijTuE_gYERTMkx5xpkbUS0lwV8ByTFx);
background-repeat: no-repeat;
background-position: top;
width: 864px;
height: 144px;
margin: -60px auto;
}
.Slider img{
width: 800px;
height: 350px;
display: none;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider()
{
$(".Slider #1").show("fade",500);
$(".Slider #1").delay(5500).hide("slide",{direction:'left'},500);
}
var slderCount=$(".Slider img.").size();
var count=2;
setInterval(function()
{
$("Slider #"+count).show("slide",{direction:'left'},500);
$("Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);
</script>
</head>
<body onload="Slider();">
<div class="Slider">
<img id="1" src="http://accessengsl.com/wp-content/files_mf/1.jpg" border="0" alt="Helping develop"/>
<img id="2" src="http://accessengsl.com/wp-content/files_mf/trincokanthaleroad.jpg" border="0" alt="Helping concrete" />
<img id="3" src="http://accessengsl.com/wp-content/files_mf/08_new.jpg" border="0" alt="no develop" />
</div>
<div class="Shadow"> </div>
</body>
</html>
Change var slderCount=$(".Slider img.").size(); to
var slderCount=$(".Slider img").length;
Your slider count selector is wrong:
var slderCount=$(".Slider img.").size();
Should be:
var slderCount = $(".Slider").find("img").length;
But honestly, you are just reinventing the wheel. Use tinycarousel or any other slider plugin.
Trym
setInterval(function()
{
$(".Slider #"+count).show("slide",{direction:'left'},500);
$(".Slider #"+count).delay(5500).hide("slide",{direction:'left'},500);
if(count==slderCount)
{
count=1;
}
else
{
count=count+1;
}
},6500);
I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>
Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>
CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/
I have used multiple jQuery in my page. Two of them are working fine.When I tried to integrate the galleria script, it says,
Error: $("ul.gallery_demo").galleria is not a function
The code is working for me separately. Here's the code.
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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css/galleria.css" rel="stylesheet" type="text/css" media="screen">
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.gallery_demo_unstyled').addClass('gallery_demo');
$('ul.gallery_demo').galleria({
history : true,
clickNext : true,
insert : '#main_image',
onImage : function(image,caption,thumb) {
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
var _li = thumb.parents('li');
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
},
onThumb : function(thumb) {
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); }
)
}
});
});
</script>
<style type="text/css">
/* BEGIN DEMO STYLE */
*{margin:0;padding:0; }
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
/*a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}*/
a{color:#FFFFFF;text-decoration:none;outline:none;}
a:hover{color:#CCCCCC;}
.caption{color:#FFFFFF; font-weight:bold; width:700px; height:30px; float:left; padding-top:8px; clear:both; }
.demo{margin-top:2em; }
.gallery_demo{width:720px; float:left; padding-left:5px; }
/*.gallery_demo li{width:100px;height:100px;border:3px double #111; float:left;}*/
.gallery_demo li{width:100px;height:100px;border:3px double #eaeaea; float:left;}
.gallery_demo li div{left:0px;}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif; }
#main_image{height:480px;width:700px; float:left; }
#main_image img{ border:5px solid #666666; width:700px; height:438px; }
/*#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}*/
#nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#FFFFFF;}
.info{text-align:left;width:500px;margin:0px auto;border-top:1px dotted #221;}
.info p{margin-top:1.6em;}
</style>
</head>
<body>
<br>
<div style="float: left; padding-left: 40px; width: 720px;">
<div>
<p id="nav" align="center">« previous | next »</p>
</div>
<div class="demo">
<div id="main_image" align="center"></div>
<div style="width: 700px; float: left;">
<ul class="gallery_demo_unstyled gallery_demo galleria">
<li class="active"><img rel="images/image1.jpg" class="thumb selected" style="width: auto; height: 100px; margin-left: -17px; opacity: 1; display: inline;" src="images/image1.jpg" alt="SEAT COMFORTS" title="SEAT COMFORTS"></li>
<li class=""><img rel="images/image2.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image2.jpg" alt="BUS INNER VIEW" title="BUS INNER VIEW"></li>
<li class=""><img rel="gallery/image3.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image3.jpg" alt="Bus full View" title="Bus full View"></li>
<li class=""><img rel="images/image4.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image4.jpg" alt="BEGINNING" title="BEGINNING OF TIME"></li>
<li class=""><img rel="gallery/image5.jpg" class="thumb" style="width: auto; height: 100px; margin-left: -17px; opacity: 0.3; display: inline;" src="images/image5.jpg" alt="ECO" title="ECO AWARENESS"></li>
</ul>
</div>
</div>
<br><br>
</div>
<!--content_inner div ends here-->
<!--- body -->
</body>
</html>
When I tried to integrate it in a page it is not working which also consists of the following code.
Code:
<script type="text/javascript" src="gallery/jquery.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="gallery/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="gallery/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="show.js"></script>
<!--[if IE]>
<script type="text/javascript">
$().ready(function() {
$(".jimgMenu ul").kwicks({max: 400, duration: 700, easing: "easeOutQuad"});
});
</script>
<![endif]-->
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 475, duration: 600, easing: 'easeOutQuad'});
});
</script>
I have tried using noconflict() function and used jQuery instead of $ but no use.
Could anyone be able to solve this pls.
Regards,
Rekha
Looks like you've commented out the <script> element that should be bring in jQuery, this:
<!--script type="text/javascript" src="js/jquery.min.js"></script-->
should be this:
<script type="text/javascript" src="js/jquery.min.js"></script>
You need jQuery loaded before jquery.galleria.js or it won't work.
Your second example includes jquery.js but not jquery.galleria.js so try adding this to the second one:
<script type="text/javascript" src="js/jquery.galleria.js"></script>
You'll have to adjust the src path to point to your jquery.galleria.js of course.
Have you included the plugin? I think you're missing that... It's not jQuery's core functionality.
this is it I think:
http://galleria.aino.se/
instead of $('ul.gallery_demo').galleria, try using jQuery('ul.gallery_demo').galleria.
If this works, it means that $ variable has been overridden by someone else. Try finding that out or put your document.ready function a closure:
(function($){
(document).ready(function(){
// your code here
});
})(jQuery)