Simple Carousel Example from Google [closed] - javascript

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I was searching for a simple carousel example in Google and I came across one and its link is :
http://jsfiddle.net/paulmason411/TZy7A/2/
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>
However I created a notepad file with .html extension and added all these code there and tried to open it in the browser and does not work. Could you please let me know why it did not work for me.
This is the code, this is the exact copy of what you see in the above link.

Your issue is that you don't have a ready function. You need to have that in there before you can make any jQuery calls.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
}
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>
A note about jsfiddle is that notice the "onDomReady" is selected in the Frameworks and Extensions - fiddle automatically wraps your code in a document ready.
Cheers!

You just needed to put the code within $(document).ready() This allows prevents the script from running until the document is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);
});
</script>
<style>
.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<ul class="slider">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
</li>
</ul>
</body>
</html>

Related

How do I add transition/animation to slider of images?

How to add a transition effect when the image changes?
When the array loops through images, how do I add a transition so that its more smooth.
var i = 0;
var images = [];
var time = 3000;
images[0] = 'test.jpg';
images[1] = 'test1.jpg';
images[2] = 'test2.jpg';
function changeImg() {
document.slide.src = images[i];
if(i < images.length - 1) {
i++
} else {
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
My easiest way to do it is putting all the images into 1 wrapper.
Then use loop to set active image by element index.
Something like this
<style>
.wrapper { position: relative; }
.wrapper img {
opacity: 0;
visibility: hidden;
transition: 0.5s opacity;
position: absolute;
}
.wrapper img.active {
opacity: 1;
visibility: visible;
position: relative;
}
</style>
<div class="wrapper">
<img src={images[0]} />
<img src={images[1]} />
<img src={images[2]} />
<img src={images[3]} />
</div>
What you are asking for is called cross-fading, this is a possible duplicate of How can I smoothly transition CSS background images?
But a more detailed guide that worked for me in the past can be found here.
http://css3.bradshawenterprises.com/cfimg/
Keep in mind that you might have to take browser compatibility into consideration if you go the CSS route. Properties such as the -webkit CSS extension is just one of many.
One of the easiest ways I found is using w3.css.
In your html code add these lines.
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<img class="w3-animate-fading" name="slide" src="" width="800" />
</body>
</html>
The class parameter in your image tag will call the predefined css animations deom w3.css file.
There are many more options such as slide right, slide left etc. You can view them all here
Codepen Demo

Switch focused picture on a photo gallery on a timer

I'm trying to implement a timer that will swap the larger image with the next image in line, I feel like I'm on the right track, but I'm not getting there. I can't use Jquery or (event.target), (event.srcElement) or appendChild. Any ideas? I don't think my function is doing anything right now. Current code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<script>
var aryImages[] = {"1.jpg", "2.jpg", "3.jpg"}
function changeImage(varImage) {
document.getElementById('bigImage').src='images/1.jpg';
for (var i = 1; i < 4; i ++)
index.html = "images/1.jpg" + photoOrder[i] +"sm.jpg";
}
</script>
/* styling elements */
<style>
img
{
width: 300px;
height: 290px;
padding: 2px;
}
body
{
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" id="bigImage" />
</div>
<img src='images/1.jpg' id='image1' onclick="changeImage(image1)" />
<img src='images/2.jpg' id='image2' onclick="changeImage(image2)"/>
<img src='images/3.jpg' id='image3' onclick="changeImage(image3)"/>
</body>
</html>
This should be what you're looking for. I set an interval that will rotate through your images. If the user clicks an image, that will change the image and reset the interval.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<script>
var i = 1;
function changeImage(event, varImage) {
document.getElementById('bigImage').src='images/' + varImage + '.jpg';
// use this so the image interval doesnt
// interfere with user's click
if (event !== null) {
clearInterval(newInt);
newInt = setInterval(() => {
changeImage(null, i++);
if (i === 4) i = 1;
}, 500);
}
}
var newInt = setInterval(() => {
changeImage(null, i++);
if (i === 4) i = 1;
}, 500)
</script>
/* styling elements */
<style>
img
{
width: 300px;
height: 290px;
padding: 2px;
}
body
{
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" id="bigImage" />
</div>
<img src='images/1.jpg' id='1' onclick="changeImage(event, 1)" />
<img src='images/2.jpg' id='2' onclick="changeImage(event, 2)"/>
<img src='images/3.jpg' id='3' onclick="changeImage(event, 3)"/>
</body>
</html>
first of all you are not changing anything
you dont have a timer at all :)
here how to implement one:
setInterval(function(){
// do something;
}, 3000);
now inside the timer you should change images
for example
you should run inspect element on image to see changes because there is no images at these sources
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var currentImage = 0;
// assuming that image is the image index in the array.
var changeImage = function (image) {
document.getElementById('bigImage').src = 'images/' + images[image];
};
// now we can use setInterval function
setInterval(function(){
// check if we reached the last image
if(currentImage >= images.length -1) {
// if last image go back to first one
currentImage = 0;
} else {
// if not last image so give me the next
currentImage ++;
}
// do the image change
changeImage(currentImage);
}, 3000);
<img src="images/image1.jpg" id="bigImage" />
<button onclick="changeImage(0)" > image1 </button>
<button onclick="changeImage(1)" > image2 </button>
<button onclick="changeImage(2)" > image3 </button>

jquery animation and float not floating

I have two images I want to be stuck together for lack of a better term. As the image on the left animates off the screen, the right image just sits there not moving. I have tried to use position: relative; in the CSS for the right-hand image and even tried to animate it by adding to the javascript (see comments in the js file) but it didn't change anything.
The HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="slidetest01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="./javascripts/picslider01a.js"></script>
</HEAD>
<BODY onload="picrotate()">
<div id="slideshow"><img id="picshown" src="./pix/mtn01.jpg">
<img id="pichidden" src="./pix/mtn02.jpg"></div>
</BODY>
</HTML>
The CSS
#slideshow {
position: relative;
left:0px;
top:0px;
width: 1200px;
float: left;
}
#picshown {
position: relative;
float: left;
}
#pichidden {
float: left;
}
The javascript
function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";
var count = 2;
function rotator() {
$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () { //1 second should be enough time for the slide.
count = (count+1)%5;
var discard = document.getElementById("picshown"); //removes old picture
discard.parentNode.removeChild(discard);
document.getElementById("pichidden").setAttribute("id", "picshown"); //makes current picture the active one
ith = document.createElement("img"); //create a new image
ith.id = "pichidden";
ith.src = picts[count];
$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);
} //end rotator
setInterval(rotator, 2000);
} // end picrotate

images on multiple backgrounds

I am trying to set up a javascript/jquery to display rotating images, infact I am trying to put anything I can on top of my multiple image background... I was able to make a mock banner and that was a success but I can't place an unordered list, a picture or the rotating images on my site.
my html is
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/javascript/main.js" type="text/javascript"></script>
</head>
<body>
<div id="massiveWrapper">
<div id="header">
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
</div>
<div id="menu">
<ul>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div id="rotatingWrapper">
<img class="rotateImage" src="/images/blue.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/red.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/green.png" alt="Computers" width="1024px" height="200px" />
</div>
<div>
<img src="/images/blue.png" alt="blue" width="1024px" height="200px"/>
</div>
</div>
</body>
</html>
my css is
body {
background: url(/images/background-top.png) 0 0 repeat-x,
url(/images/menu.png) 0 160px repeat-x,
url(/images/background-middle.png) 0 210px repeat-x;
background-color: #dadada;
}
#massiveWrapper {
width: 1024px;
margin: auto;
}
#rotatingWrapper {
width: 1024px;
height: 200px;
}
.rotateImage {
display: none;
position: absolute;
top: 0;
left: 0;
}
and javascript is
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotateImage').length;
//set current item
var currentItem = 0;
//show first item
$('.rotateImage').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotateImage').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotateImage').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
I really want to be able to have the rotating images I just cant for the life of me add anything new to the page. I have even added a dummy picture using div and img but that also wont show up... this is probably something small but yer I am new to coding.
Kane
You shouldn't add px to the width and height attributes of your images.
For example:
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
should be:
<img src="/images/banner.png" alt="banner" width="1024" height="150"/>

Jquery mobile: Unable to animate the page background

Hi i am implementing a jquery mobile application , i want the first page backgroungd to animate like this in the link
i am unable to implement this in my jquerymobile page.
<div data-role="page" id="page" data-theme="b" >
<div data-role="header" data-position="fixed" data-theme="b">
<h1>helo</h1>
</div>
<!-- Start of content -->
<div data-role="content" id="target-content" >
</div>
<!-- end of content -->
<!-- start of footer -->
<div id="homeFooter" class="controlsFooter" data-role="footer" data-position="fixed" data-theme="b">
<div style="width:100px; margin:auto;">
<div class="center-wrapper" style="float:left; margin-right:10px;">
Next
</div><!-- end of center wrap -->
</div>
</div><!-- /footer -->
<!-- end of footer -->
</div>
Below is the code of Mr.Murat Akdeniz
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="aaaaa" />
<title>Moving Background</title>
</head>
<body>
<style>
body
{
height: 100%;
padding: 0;
margin: 0;
background: #fff url(back2.jpg) repeat-x scroll right bottom;
background-color: #fff !important;
}
</style>
<script src="jquery-1.6.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 60; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageWidth = 1024; // Background image width
var headerWidth = 280; // How wide the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('body').css("background-position",current+"px 0");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
</script>
</body>
</html>
Any help is appreciated.
It pretty much works as is.
Here is a DEMO
var scrollSpeed = 60; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageWidth = 1024; // Background image width
var headerWidth = 280; // How wide the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageWidth - headerWidth);
function scrollBg() {
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition) {
current = 0;
}
//Set the CSS of the header.
$('body').css("background-position", current + "px 0");
}
//Calls the scrolling function repeatedly
var init;
$(document).on("pagecreate", "#page1", function(){
clearInterval(init);
var init = setInterval(scrollBg, scrollSpeed);
});
In CSS, you set the body background and in order to see it, your need to set the jQM page and content backgrounds to transparent:
body {
height: 100%; padding: 0; margin: 0;
background: #fff url(http://lorempixel.com/1024/1000) repeat-x scroll left top;
background-color: #fff !important;
}
[data-role=page], .ui-content {
background-color: transparent !important;
}
UPDATE: OP has asked for the image to go back and forth instead of one direction.
Updated DEMO
var reverse = false;
function scrollBg() {
//Go to next pixel row
if (reverse){
current += step;
} else {
current -= step;
}
//If at the end of the image, then go to the top.
if (current == restartPosition) {
reverse = true;
}
if (current == 0) {
reverse = false;
}
//Set the CSS of the header.
$('body').css("background-position", current + "px 0");
}

Categories

Resources