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"/>
Related
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
So I had the idea to try to make an image slider where instead of fading in and out the sliders just move into place one by one, this is by adding 450px (width of each image slider).
However I'm struggling on how to accomplish this,I want to check wether the slider is the last so that the the slider reverts back to the first and starts again.
This is the code I came up with so far:
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
setInterval(function() {
if(show_index == (sliders.length- 1))
{
$('.sliders_container').animate({ 'left': '0px'}, 2000);
}
else
{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
}
}, interval);
});
/*SECTION SLIDER MARG START*/
.section_slider_marg_maincontainer{width:100%; height:275px; outline:2px solid white; position:relative; overflow:hidden;}
.section_slider_marg_items_container{width:auto; height:100%; position:absolute; top:0px; left:0px; display:flex; }
.section_slider_marg_item{height:100%; width:450px; outline:2px solid white; background-size:cover; }
/*SECTION SLIDER MARG END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section_slider_marg_maincontainer" style="">
<div class="section_slider_marg_items_container sliders_container" style="">
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
<div class="section_slider_marg_item slider_image" style="background-image:url('img/Res1.jpg');"></div>
</div>
</section>
I would recommend using the Slick JQuery library for this. You can view it here:
http://kenwheeler.github.io/slick/
I edited the index.html file that they provided and here is what I ended up with (this will only work if you have the Slick library downloaded):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
<style type="text/css">
</style>
</head>
<body>
<section class="carousel">
<img src="http://placehold.it/350x300?text=1">
<img src="http://placehold.it/350x300?text=2">
<img src="http://placehold.it/350x300?text=3">
<img src="http://placehold.it/350x300?text=4">
<img src="http://placehold.it/350x300?text=5">
<img src="http://placehold.it/350x300?text=6">
<img src="http://placehold.it/350x300?text=7">
<img src="http://placehold.it/350x300?text=8">
<img src="http://placehold.it/350x300?text=9">
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".carousel").slick({
dots: true
});
});
</script>
</body>
</html>
As Toms was saying, each time you animate, you should increment a variable to keep track.
This probably is not the most elegant solution, but it uses your same code setup.
$(document).ready(function(){
var interval = 5000;//will move to left 450px each X seconds
var sliders = $('.slider_image');//counts number of sliders
var index = 0;
var show_index = 0;
var scrolledPx = 0;
setInterval(function() {
if(scrolledPx >= 450 * sliders.length - 1) {
$('.sliders_container').animate({ 'left': '0px'}, 2000);
scrolledPx = 0;
}
else{
$('.sliders_container').animate({ 'left': '+=450px'}, 1000);
scrolledPx += 450;
}
}, interval);
});
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>
I want to add button that let user back 30 seconds during listening songs in mp3 player but the hell I can't do it. I am playing with this for hours, here's what I use http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player. What I have got already
code for 30 sec back
// jump 30 seconds back when we click the button
$('.audioplayer-back30s').click(function(){
var audio = $('audio');
var backToSec = audio.currentTime - 30;
// make sure that we jump to a valid point in time
audio.currentTime = (backToSec >= 0) ? backToSec : 0;
});
html
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" />
<link rel="stylesheet" href="../../assets/css/audioplayer.css" />
<script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/audioplayer.js"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<div class="jumbotron">
<div class="thumbnail">
<br><br><br><br>
<h2 style="text-align: center;">You are listening mp3 number 1</h2>
<br><br><br><br>
<div id="wrapper">
<audio preload="auto" controls>
<source src="../../assets/media/audio/BlueDucks_FourFlossFiveSix.mp3">
</audio>
</div>
</div>
<div class="team">
<a><img src="http://i57.tinypic.com/30t6gd2.jpg"</a>
</div>
<div class="team" style="float: right;">
<a><img src="http://i61.tinypic.com/29zv7u8.png"</a>
</div>
</div>
</div>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
<script>
/*
VIEWPORT BUG FIX
iOS viewport scaling bug fix, by #mathias, #cheeaun and #jdalton
*/
(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
</script>
</body>
css
.audioplayer-back30s
{
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
left: 0;
}
.audioplayer-back30s:hover,
.audioplayer-back30s:focus
{
background-color: #222;
}
.audioplayer-back30s a
{
display: block;
}
Rest of css and js files of this mp3 player are here http://tympanus.net/Development/AudioPlayer/AudioPlayer.zip . Really I don't have any ideas and I really need this feature, most problem is with creating just button. Thanks you guys for any response.
You need to bind the timeupdate event
Example
var audio = $('audio');
audio.on('timeupdate',function() {
var time = Math.floor(this.currentTime);
if (time > 5) {
this.currentTime = 0;
}
});
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>