<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there
Try something like this:
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
jsFiddle example
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image.
This will work for however many images you add. As long as they have the class slideshow.
Also this allows you to crossfade images. See below for non-crossfade below.
See this Fiddle.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE
You can add the following css to get the images to display in the same space.
.slideshow { position:absolute; }
According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? If so, will this not work?
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ...
Related
I am creating a website and I need some help with an issue. I will upload a picture for you to understand it better.
I have a big image in the middle, and below it there are some words that act like links(). I need this to happen:
1. The big image appears as the website loads.
2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in.
It's something like this:
I've already tried to get this by using some jQuery, but I don't get it to work. I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image:
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").fadeIn("slow");
}
});
$('.button4').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project4.jpg');
$("#change-image").fadeIn("slow");
}
});
etc.
Can anybody help me solving this? I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like.
Thank you very much!!
fadeOut takes a second parameter, a function. You can then do what you need to do after the first image is faded out.
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow", function() {
$('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
$("#change-image").fadeIn("slow");
});
}
});
img {
height : 150px;
width : 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/>
<br/><button class="button3">Click</button>
I suggest you use animate.css(https://daneden.github.io/animate.css/) so you can just manaipute this by just adding class or removing class.
npm i animate.css
Make sure #change-image has this class "animated"
$('.button3').on({
'click': function(){
$("#change-image").addClass('fadeOut');
// let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
}
});
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
</body>
</html>
Try the below code..Replace the image src after fadeout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
</script>
</body>
</html>
I have a site that I would like for new users to see a contact us when the page loads. I have tried numerous methods and gotten an overlay but the ability to hide and continue onto the page is not working.
$(document).ready(function() {
$('#overlay').fadeIn();
});
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
If any suggestions for closing the popup exist please share.
There are a bunch of ways to hide an element, being the most common one to set
document.getElementById("myNav").style.display = "none";
And to show it again
// Empty to have the one specified by CSS or the element default.
// Or "block", "inline", "inline-block"... Whatever fits you better.
document.getElementById("myNav").style.display = "";
If you hide by height (is a good decision if you have a CSS transision, but you need fixed heights), you need to set the element overflow to hidden. By default, if the content of an element is bigger than the element size it will be shown, so your .overlay class should have overflow: hidden to hide it.
By the way, you are using dynamic heights so you are not using transitions. As a recommendation, use the display way instead.
EDIT: Just noticed the ID problem that #Rubenxfd points out. He is right. Is going to be the main problem for sure.
Also, another problem you have is that you run this code
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
before the button element is rendered, so the event won't attach to it as it don't exists. You should attach it when the page is ready, so you have to move it inside the ready function, like this:
$(document).ready(function() {
$('#myNav').fadeIn();
$('button').click(function() {
$('#myNav').fadeOut(200, "linear");
});
});
Notice the difference.
You are using an class, but calling an id in your jQuery.
Change your jQuery to this:
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
Fiddle
You had a # instead of a ..
$('#overlay').fadeOut(200, "linear"); will happen to the element with the id overlay not to the class. if you write $('.overlay').fadeOut(200, "linear");it will happen to all elements with the class of overlay
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
I am trying to figure out how to redirect img thumbnail to corresponding img on new html page.
For example : http://www.damondebacker.com/music.html
this page contains overview of all pictures
http://www.damondebacker.com/musicd.html
this page contains scrolldown + column with large picture
I want to know how I can link every image to the scrolldown/large picture pages so it opens on the clicked image.
I have found this so far :
$(document).ready(function() {
"use strict";
$('img.musicd').click(function() {
window.location.href = this.class +'.html' ;
});
});
Which doesn't work.. And I know I need to integrate somehow
$( ".images" ).hide();
$( "#een" ).show();
With #een being the id of the image that opens when the musicdd page opens.
I am relatively new to javascript and I'm looking for the best possible way to explain this problem. Hope anyone can give me advice?
Try this. I kept it as simple as possible. My code uses jQuery. Here you are:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="thumbnails">
<img src="one.jpg" alt="...">
<img src="two.jpg" alt="...">
<img src="three.jpg" alt="...">
</div>
<img src="" alt="..." id="main">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function () { // I wait the DOM loading
$("#thumbnails img").on("click", function () { // when I click a thumbnail
var x = $(this).attr("src"); // I save its src attribute
$("#main").attr("src", x); // and use it as the src of the #main image
});
});
</script>
</body>
</html>
I'm trying to make an image slider. It takes in images from placekitten. I want it to be able to take different image sizes. On hover it gives a small description of the image at the bottom,name of the image at the top and nav button slide from the top.
I have 2 problems:
1.I have tried to implement the toggles many times using jquery, but nothing I do seems to work. I think it has something to do with the buttons since the buttons are there for each image. How to change the title of the image but keep the same button inputs
2.How to make the description expand as the text increases.
This is what I have so far. Also are there easy libraries to do this as well?
JS Bin link
use this jQuery cycle plugin.just change your images with your code. hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div class="nav"><a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a></div>
<div id="slideshow" class="pics">
<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
</div>
</body>
<script type="text/javascript">
$('#slideshow').cycle({
fx: 'scrollHorz',
prev: '#prev',
next: '#next',
after: onAfter,
timeout: 0
});
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
}
</script>
</html>
for more jQuery cycle plugins visit : jQuery cycle plugins
Alright so I'm pretty new to JavaScript coding in particular and have only been working with HTML and CSS for a few months so I apologize if this comes off as ridiculously simple.
I'm trying to use basic embedded JavaScript (jquery) to get a hyperlink to move to a new position each time you mouse over it, kind of like a cat following a laser-pointer dot.
When I run this code, the "moveAway" method doesn't appear to move the link at all when it is being hovered over. Just wondering if anyone could help identify the problem here:
<html>
<head>
<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<div id="link">
Click!
</div>
<script>
function moveAway()
{
$('#link').moveTo(0,100);
}
$('#link').hover(moveAway);
</script>
</body>
</html>
Do you wanna do something like this?
You can use left and top random too.
More information in Jquery documentation
<html>
<head>
<!-- Sheet references -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</head>
<body>
<style>
#link
{
position:absolute;
}
</style>
<div id="link">
Click!
</div>
<script>
function moveAway()
{
$('#link').animate({
left: "+=50",
top: "+=50"
});
}
$('#link').hover(moveAway);
</script>
</body>
</html>
$('#link').hover(function(e) {
$(this).css('top', '0px');
$(this).css('left', '100px');
$(this).css('position', 'absolute');
});
I'm not sure if that's what you want.
See : http://jsfiddle.net/MHzYF/
You can make it a little fun by intro ducting Math.random() to generate x and y coordinates, and use jQuery's animate method. You can replace 100 with whatever offset you like.
jQuery
$('#link').on('mouseover', function(){
x = Math.floor((Math.random()*100)+1);
y = Math.floor((Math.random()*100)+1);
$(this).animate({
top: x,
left: y
});
});
HTML
Click!
CSS
#link { position: absolute; }
Working Example at JSFiddle