I'm not very familiar with this sort of web development.
Basically what I am trying to do is have a button (or keyboard key) which makes an image appear and then scroll across the screen and disappear..
Scenario: The Button(key) is pressed 10 times, 1 time every second.
10 images are appear and each one scrolls across the screens width and then disappears.
How am I able to do this?
The effect I would like to get is quite similar to the Konami code Easter egg used on the http://www.vogue.co.uk/ website.
I'm guessing it's JavaScript or similar but I don't know how to write it. Neither do I know scripting in jQuery.
Here you go:
$(function () {
var images = [
'http://placehold.it/100x100',
'http://placehold.it/150x150',
'http://placehold.it/200x250',
'http://placehold.it/200x200'];
var index = 0;
$(document).on('keypress', function (event) {
var c = String.fromCharCode(event.charCode);
if(c === 'a') {
var image = images[index];
console.log(image);
index = (index + 1) % images.length;
$('<img style="position: fixed; bottom: 0; right: 0" src="' + image + '"/>')
.appendTo(document.body)
.animate({right: '200%'}, 2000, function() {
$(this).remove();
});
}
})
});
Press the 'a' key to make the images in the array slide from the right. Edit the array to use your images. You will need to include jQuery in your project.
Here's a Fiddle: http://jsfiddle.net/acbabis/tD4FG/
I came up with something. Not the cleanest it could be but works:
Heres the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="popUpButton.js"></script>
</head>
<body>
<div id="ToolBar" class="ToolbarDiv">
<button onclick="popUpButton()" type="button">ButtonOne</button>
</div>
</body>
</html>
And here is the javascript function:
function popUpButton() {
var popUpB = document.createElement('div');
popUpB.className = 'ButtonClass';
popUpB.id = 'ButtonID';
var message = document.createElement('img');
message.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
popUpB.appendChild(message);
document.body.appendChild(popUpB);
$("img").animate({
marginLeft: "+=1000px",
}, 3000 );
}
Hope that is what you need.
Related
was trying to follow a guide that seemed to me very straightforward and simple that i found here:
Change css background-Image using javascript
however in my implementation it doesn't work. the image does not get displayed or changed. any hints?
EDIT: not the same as suggested duplicate. now that parenthesis after changeImage has been removed, the function gets repeated but the problem of not displaying any of the background images persists.
2ND EDIT: i also tried removing the parenthesis after buildImage, with the same result (no background images displayed)
<div id="pupa">
</div>
<script>
var images = ['file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage12.jpg',
'file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage34.jpg',
'file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage56.jpg'];
var index = 0;
function buildImage() {
console.log("setting image");
document.getElementById('pupa').style.backgroundImage = 'url(' + images[index] + ')';
}
function changeImage() {
index++;
if (index >= images.length) index = 0;
console.log("changing image");
document.getElementById('pupa').style.backgroundImage = 'url(' + images[index] + ')';
}
buildImage();
setInterval(changeImage, 3000);
</script>
This code will work if you add your images in a folder called img in the same folder where the html page is.
<html>
<head>
<style>
#pupa
{
width:300px;
height:300px;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div id="pupa"></div>
<script>
var images = ['img/stage12.jpg',
'img/stage34.jpg',
'img/stage56.jpg'];
var index = 0;
document.getElementById('pupa').style.backgroundImage = `url(${images[index]})`;
setInterval(function(){
index=(++index >= images.length)?0:index;
console.log(`changing image of index : ${index}`);
document.getElementById('pupa').style.backgroundImage = `url(${images[index]})`;
},3000);
</script>
</body>
</html>
This is the same code tweaked a bit, and you don't need another function buildImage() to set image first, it works (make sure to check path of images)
Make sure to change width, height, background-size, image name, path etc according to your need.
I have set up a piece of javascript that is meant to operate as a slideshow where you have to click right or left to go each way through an array of images. As it is, it only has 3 images and one button (the blue div) for going one way through the array.
I have scoured this code over and over and tried to separate the pieces of it but I could discern no pattern over what works. I have been stuck at this stage for months, and would therefore really appreciate some help.
<!DOCTYPE HTML>
<html>
<head>
<style>
#clicker { width: 200px; height:200px; background: blue; }
#pic { width: 300px; height: 150px; }
</style>
</head>
<body>
<div id="clicker"></div>
<img id="pic" src="models_web.jpg" alt="Icon" />
<script type="text/javascript">
var imgs = ["models_web.jpg","reflex_2.jpg","blue_web.jpg"];
var i = 0;
var addl = document.getELementById("clicker");
function clickrotate() {
document.getElementById("pic").src = imgs[i];
i++
if (i === 2) {i = 0};
}
addl.addEventListener( "click", clickrotate, false ) ;
</script>
</body>
</html>
You have a typo in your script.
var addl = document.getELementById("clicker");
change to var addl = document.getElementById("clicker");
Another thing, your counter increment is wrong. It will reset after viewing the second image, because you check i === 2 after incrementing it.
If you check the console in the developer tools in any modern browser, you will see what's wrong. It will save you the headaches next time.
I am using RoyalSlider plugin to create slideshows on on this site
I have the following javascript to create the two fields that overlay the slideshows, to allow for left and right click navigation. The problem is that the custom cursor doesn't stay loaded during the fade transition between slides. Does anyone know a solution for this?
Many thanks,
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.royalSlider').each(function() {
var slider = $(this);
var sliderInstance = slider.data('royalSlider');
if(sliderInstance) {
var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider );
var updCount = function () {
slideCounter.html( (sliderInstance.currSlideId+1) + ' / ' + sliderInstance.numSlides );
}
sliderInstance.ev.on('rsAfterSlideChange', updCount);
updCount();
}
slider.append('<div class="rs-prev"/>');
slider.append('<div class="rs-next"/>');
slider.find('.rs-prev').click(function() {
slider.royalSlider('prev');
});
slider.find('.rs-next').click(function() {
slider.royalSlider('next');
});
});
});
</script>
Add this into your CSS:
div.rs-prev,
div.rs-next {
z-index: 10;
}
This worked for me.
I was testing out coding an image slider as a project to learn HTML, CSS and Javascript and it works great. I'd just like to implement a few tweaks on it and was wondering if anyone had any idea on how to do this. Bear in mind, I'm relatively new to this so a few explanatory comments would be greatly appreciated.
Here are the tweaks I'd like to implement: When the user hovers over the image, I'd like the slider to stop on that particular image so the user can look at it for as long as they wish. The slider resumes once the mouse is moved (a topic not explored on any questions here as far as I can find). Another thing I'd like to be able to do is create a more aesthetic fade transition between the images. There are tutorials out there for this but they don't give a lot of context for a beginner like me to implement it. Here's the jsfiddle, as requested, http://jsfiddle.net/7m9j0ttL/
<html>
<head>
<style type="text/css">
.container {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}
.container div {
background-color: white;
width: 100%;
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<section class="demo">
<div class="container">
<div style="display: inline-block;">
<img src="Chrysanthemum.jpg" width="1024" height="768" />
</div>
<div>
<img src="Desert.jpg" width="1024" height="768" />
</div>
<div>
<img src="Hydrangeas.jpg" width="1024" height="768" />
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 9000);
});
</script>
</body>
</html>
Updated your fiddle
$('.demo').hover(function(){
clearInterval(autoSlide);
},function(){
autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 1000);
});
Added a hover handler to the .demo element. Cleared interval on hover, this would help stop the slide show. And re-set interval on mouseout to start the slideshow per the set interval.
I don't know whether such kind of answer is acceptable for you, but someday, a few years ago, I created my own slider when I was studying jquery.
Looking at your code, I have questions:
1. Why don't you use rather standard functions like fadeIn() and fadeOut() for transitions?
2. Why don't you make a function that will be able to run simultaneously with any number of tags on the page?
A few years ago I had these questions in my head and I came here, to stackoverflow to learn how to do that from other people. And I learnt (not only here, though).
And I created a function that could be loaded anywhere in the code - I studied how to do that. Then I added fade and slide effects there and also any other things...
This function is not really good, but PROBABLY it will sched some light for you in slider creation process. Sorry for many words, check what I have here:
https://jsfiddle.net/7m9j0ttL/3/
I hope my effort is useful for you. If you are going to go further with this and have questions - I would be glad to answer them.
Last comments:
So my main aim was to create function that could be ran like this:
$('.container').okwbSlider({ActAsDefined: 'fadeItOut', SlidingTag: 'div', timeOut: 3000});
so, here you can see that almost ANY tag, containing ANY other tags (with images, text etc in it) can be slided.
in order to make everything slided after some time, I thought that I have to break function in 2 parts: one accepts parameters and the second is called using javascript's setInterval.
So, here's the first one:
(function($){
$.fn.okwbSlider = function(params) {
//outer variables
var tgDfnr = this;
var somevar = this;
var MouseStatevar = 0;
var globalTimervar = (params.globalTimervar != undefined) ? params.globalTimervar : 4000;
var ActAsDefined = (params.ActAsDefined != undefined) ? params.ActAsDefined : "fadeItOut";
var SlidingTag = (params.SlidingTag != undefined) ? params.SlidingTag : 'img';
var numberOfChildren = tgDfnr.children(SlidingTag).length;
// alert('tgDfnr='+tgDfnr+' globalTimervar='+globalTimervar+' ActAsDefined='+ActAsDefined+' numberOfChildren='+numberOfChildren);
//alert("<"+tgDfnr.prop("tagName")+" id="+tgDfnr.attr('id')+">");
if (numberOfChildren > 1){
setInterval(function(){
okwbSlideIt(tgDfnr, ActAsDefined, numberOfChildren, MouseStatevar, SlidingTag);
}, globalTimervar);
}
if(numberOfChildren == 1){
tgDfnr.children(SlidingTag).fadeIn(500, function(){
$(this).addClass('active');
});
}
}
})(jQuery);
it contains everything that needed to run the function in jquery-like way (i.e. placing it after $('.yourANYClassNameOrId'))
and the second one (it's place higher in the text - re-accepts the entered parameters and works with them. It's written not in the really best way (I would write it much better now), but at least I think if you look at it, you can understand something useful.
So, let me know if you have questions and/or I can help you further.
I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
Here's my HTML code:
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html
AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
Thus having the structure ready which is the following:
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
Here is the implementation: http://jsbin.com/wisofeqetu/1/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>
If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
Now some JQuery. To appear first image when window load write this:
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.
You may also use jQuery plugin backstretch.