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);
Related
I need your help with creating jquery photo gallery. I need to make this page responsive. I need to add next and previous buttons. I also need to add stop and resume buttons. But most important, I need to make it responsive.
Thanks for any feedback.
Thank you very much.
My code by far is below.
$(".thumb").click(function () {
$("#large img").attr("src", $(this).children("img").attr("src"));
$(".active").removeClass("active");
$(this).addClass("active");
});
setInterval(function () {
var $dalsi = $(".active").next();
if($dalsi.length == 1) {
$dalsi.click();
}
else {
$("#thumbnails .thumb:first-child").click();
}
}, 1000);
main {
max-width: 1024px;
margin: 0 auto;
}
#large {
width: 100%;
height: 400px;
overflow: hidden;
}
#thumbnails {
width: 100%;
}
#large img {
height: 100%;
display: block;
margin: 0 auto;
}
.thumb {
height: 200px;
width: 24%;
box-sizing: border-box;
display: inline-block;
overflow: hidden;
}
.thumb img {
height: 100%;
width: auto;
margin: 0 auto;
}
.thumb.active {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div id="large">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div id="thumbnails">
<div class="thumb active">
<img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
</div>
<div class="thumb">
<img src="http://wiki.rvp.cz/#api/deki/files/12941/=brambora_hliza.jpg">
</div>
<div class="thumb">
<img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
</div>
<div class="thumb">
<img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
</div>
</div>
</main>
<script src="jquery-3.3.1.js"></script>
<script src="script.js"></script>
</body>
</html>
Thanks for help.
I'm trying to recreate this effect:
http://www.eginstill.com/
I tired everything, I got it to resize but can't get that effect where image is fixed and its being resized from all sides.
Here is my code:
<!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.0">
</head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<body>
<div id="menu" style="float: left; width: 200px; height: 1000px; background: black; display: inline-block;">
</div>
<div id="img-01" style="z-index: 100; width: 100%; position: absolute;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg" id="photograph" style="width: 100%; height: 100%;">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#img-01").click(function () {
$("#img-01").animate({
height: '400px',
width: '400px',
left: '300px'
}, 1500);
});
});
</script>
<script>
$(document).ready(function() {
$('#photograph').hide();
$('#photograph').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
});
</script>
</body>
</html>
Not sure what to do. Thanks.
Please see the snippet in this code.
I changed your IDs by class (it's more convenient, we prefer use class instead of ids.)
updated the css of .img-01 element
$(document).ready(function() {
$(".img-01").click(function() {
$(this).animate({
top: '20px',
right: '100px',
left: '30px',
bottom: '20px'
}, 1500);
});
});
$(document).ready(function() {
$('.photograph').hide();
$('.photograph').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
});
body {
padding: 0;
margin: 0;
}
.menu {
float: left;
width: 200px;
height: 1000px;
background: black;
display: inline-block;
}
.img-01 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg);
}
<!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.0">
</head>
<body>
<div id="menu"></div>
<div class="img-01">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>
</html>
My question is how can i set full width and height background image for the header in Bootstrap like http://demo.evenfly.com/view?theme=SantaGo ( i am not expecting animations, i am expecting how to make background that fits in to screen like this)?
This is what i have done so far,
https://codepen.io/anon/pen/reYRBo
HTML:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>
CSS:
body{
margin:0;
padding:0;
width:100%;
}
#jumboid{
width:100% ;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
header{
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('a.jpg');
background-size:cover;
}
At the end i'm expecting the result like this(if i take full page screen shot),
expected result
There is no need to use an extra image tag. Just set the background and the property background-size: cover
Try it like this:
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
background-size: cover;
}
<body>
<header>
</header>
</body>
Do you have an img tag inside the #jumboid?
In case you don't, you can easily fix it with a background-image on #jumboid.
Edit the css as following:
#jumboid{
width:100% ;
height: 100vh;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-size: cover;
background-repeat: no-repeat;
}
(forked) example: https://codepen.io/pimskie/pen/wGPOar
Simply use, using contain keeps your bg-img scalable and responsive-
background-size:contain;
OR if want to have a fixed header height and wan't to keep the image background scaled upto header's width-
background-size:100% 100%;
Hi try this code and Is this what you are looking for.
body {
margin: 0;
padding: 0;
width: 100%;
}
#jumboid {
width: 100%;
}
.bg-image {
position: relative;
background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
height: 450px;
background-attachment: fixed;
}
.bg-image img {
display: block;
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url('a.jpg');
background-size: cover;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
</div>
</div>
</header>
<div class="restofthecontent">
<p>your content</p>
</div>
</body>
</html>
Put your image in background of DIV by css not in <img> tag.
and give that DIV below CSS.
.Your_DV {
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}
i want to use wow.js on my website. I got a sidebar which needs to have the content inside a container with overflow-x: auto;. Because of this wow.js does not work.
Is it possible to define in wow.js the scrolling container?
My site looks like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/js/wow.js"></script>
<link rel="stylesheet" type="text/css" href="lib/css/animate.css">
<script>
$("document").ready(function() {
new WOW().init();
})
</script>
<style>
body,html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
position: relative;
}
#menu {
position: absolute;
width: 300px;
left: -300px;
background: red;
}
#content {
position: absolute;
width: 100%;
height: 100%;
background: green;
overflow-x: auto;
}
.wow {
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<nav id="menu">
<ul>
<li>sidebar1</li>
<li>sidebar2</li>
<li>sidebar3</li>
</ul>
</nav>
<div id="content">
contentcontent<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="wow bounce">text</div>content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
<script>
</script>
</html>
Problem solved:
I've changed the Contentcontainer to a section and used this code to init wow.js
var wow = new WOW({ scrollContainer: "section"});
wow.init();
Thanks anyway
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)