I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect.HOW??
Below is the code i'm using but its only for 2 images how do i use for multiple images:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
background:url(big-image.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
#a{
width:15%;
height:25%;
position:static;
}
#b{
width:50%;
height:45%;
display:none;
left:10%;
}
</style>
<body>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<h2 align="center">
<img src="1.png" width="15%" height="31%" class="cat" id="a">
</h2>
<h3 align="center">
<img src="2.png" id="b" class="cat">
</h3>
</div>
<script type="text/javascript">
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("slow");
});
});
</script>
</body>
</html>
yea,fade it and another image comes up...neednt be any classy
effects,even simple fade or slide would do.Is there any demo available
ok,the result must be like an image carousel,on click it should keep
fading in
Try utilizing .fadeToggle() , .prependTo(), .show() to cycle effect of fading out, fading in img elements within .frame container
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").show()
});
});
});
.frame {
position: relative;
left: 35%;
width: 150px;
height: 150px;
}
img {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<img src="http://lorempixel.com/150/150/cats" />
<img src="http://lorempixel.com/150/150/technics" />
<img src="http://lorempixel.com/150/150/nature" />
<img src="http://lorempixel.com/150/150/animals" />
</div>
By:#kmsdev say "you should consider to use an updated version of jQuery"
I suggest you also use the power of CSS3
$(function(){
$("input:button").click(function(){
$(".cat").css("filter","blur(6px)");
});
});
When you can give a tour of these links:
http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw
http://codepen.io/libredesarrollo/full/xIHda
Something like this? jQuery's .each() loops through all elements with a specific class. .attr() changes attribute, in this case src.
References:
https://api.jquery.com/each/
http://api.jquery.com/attr/
http://api.jquery.com/animate/
$('button').click(function(){
$('.image').each(function(){
$(this).animate({
opacity: 0
}, 300, function(){
$(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png');
});
$(this).animate({
opacity: 1
}, 300);
});
});
img{
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button><br>
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
Previous exemple missed to listen when image is ready (loaded) before display it back.
If you want a fadeOut/In:
// Trigger action on click (or something else)
$("img").on("click", function(){
// Store element to access it faster
var $this = $(this);
// Animate to hide it
$this.animate({
opacity: 0
}, {
// When completely transparent
complete: function(){
// Add load event to know when img is ready (loaded)
$this.on("load", function(){
// Show new image
$this.animate({
opacity: 1
});
});
// Set to image to start loading
$this.attr("src", "newurl");
}
});
});
If you want a blur, simply change opacity in animate block by :
transform: "blur(0px)" and transform: "blur(10px)"
You may have to add prefix for non-Chrome browsers
Related
I am trying to play a gif onscroll only when it enters in the viewport either from top or bottom otherwise to show a static image. This is the code I've got so far, but it doesn't show the gif. I am using https://github.com/rubentd/gifplayer and https://github.com/customd/jquery-visible to try to achieve this result.
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
margin:0;
padding:0
}
body:before{
content:"";
width:100%;
height:100%;
display:block;
}
body:after{
content:"";
width:100%;
height:100%;
display:block;
}
</style>
<link rel="stylesheet" href="http://rubentd.com/bower_components/jquery.gifplayer/dist/gifplayer.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://rubentd.com/bower_components/jquery.gifplayer/dist/jquery.gifplayer.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
</head>
<body>
<section>
<h2>Play within view only:</h2>
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</section>
<script>
$('#element').visible( function(){
$('.gifplayer').gifplayer();
});
</script>
</body>
</html>
Your solution doesn't work because this visible function doesn't accept any callback.
This is working example. You had to add scroll event listener and play or stop gif programmatically:
CSS (necessary, gifplayer adds position: absolute):
.gif {
position: relative;
}
HTML (added container, because of above):
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
JS, working scroll event listener with play or stop logic:
$('.gifplayer');
$('.gifplayer').gifplayer();
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$(gif).data('isPlaying', false);
});
$(window).scroll(function () {
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$gif = $(gif);
if ($gif.visible(true)) {
if (!$gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('play');
$gif.data('isPlaying', true);
}
if ($gif.find('.gp-gif-element').length > 1) {
$gif.find('.gp-gif-element').first().remove();
}
} else {
if ($gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('stop');
$gif.data('isPlaying', false);
}
}
});
});
jquery-visible simply checks if the element is visible at the time .visible() is called. It doesn't alert you or run code when something becomes visible. You could potentially make a scroll event listener that calls .visible() on each scroll and if it returns true you could run your gifplayer code. Or you could use a plugin such as Waypoints, which is designed to run code when something becomes visible.
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
$(".cardImg").fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
On line 15-17 I want to click on a blue box and only reveal that picture when I click on it
To show the .cardImg in a .cardDiv when you click on it, use $(this).find('.cardImg') to target the .cardImg in that element instead of targeting all of them with $('.cardImg')
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});
replace $(".cardImg").fadeIn('slow') with $(this).find('img').fadeIn('slow')
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
//$(".cardImg").fadeIn('slow')
$(this).find('img').fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
Remember that $(".cardImg") is still a 'set' of matched elements, just like $(".cardDiv") is. If you do $(".cardImg").anythingAtAll() then you will perform the function on the entire set of matched elements, which is exactly the behavior you're describing. You want to add an event listener to each of your .cardDiv elements, so this part of your code is correct.
$(".cardDiv").click(function() {
});
Once inside of the function, you want to take an action on the 'specific element' that was clicked. You DO NOT want to take an action on the entire set of matched elements inside $('.cardImg'). So, instead of calling the fadeIn() function on that matched set, call it instead on the the specific element that was clicked. When inside the function, the keyword that gives you the specific element is this. Once you wrap the this keyword inside a jquery wrapper, $( ), like so $(this), you can then perform jquery functions on it, like fadeIn() and find() for example. find() will drilldown the DOM tree from the clicked element and find any elements that match whatever was passed in, in this case we pass in ".cardImg".
Your code should be:
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});
i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
this is my code
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
the jsfiddle will define the result of my work.
in my case the content and progress bar both will show simultaneously.
What i want: i want that first the progress bar will show and after the complition of progress bar the content will show like in this website.
Update:
This is what i try next but when the progress is complete then it will not show any contents...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk</title>
<link rel="stylesheet" href="css/pace-atom.css"/>
<style>
#contents {
display: none;
}
.cover {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1999;
background:rgb(33,33,33);
}
</style>
</head>
<body class="pace-done">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div>
<div id="contents">
<img src="d3.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
</div>
</div>
<script src="js/pace.js"></script>
<script type="text/javascript">
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
}
</script>
</body>
</html>
If the progress bar stuck at 99%, and if you are using Visual Studio, you have to uncheck 'Enable Browser Link' option. This will solve the incomplete progress bar issue.
Okay so an easy way to implement this is to hide all your contents until pace is done loading (I assume there is a reasoning to pace's load screen but I'm not sure).
So your contents could have an id #contents and be default display: none. You can then show the contents after pace is done like so
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
});
Here is a fiddle of it working http://jsfiddle.net/59caubpx/3/
Please check that you add all the file properly, like jquery.js or theme.atom.css or pace.js etc...
Above is a sample image with 4 mapped regions.
Here is what I am trying to do:
If mouse is hovered on any mapped region, only that region should change color
If mouse is clicked on any mapped region, an entirely new image should replace Image 1
What I have tried so far:
changing image when clicked on mapped_region
<img alt="main menu" class="map" id="myimage" src="image_1.png" border="0" usemap="#map1" />
<map name="map1" id="map1">
<area id="button1" alt="map1 button1" coords="4,49,148,138" shape="rect" onclick="document.getElementById('myimage').src='image_2.png'" />
</map>
highlighting mapped_region on mouse hover
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function() {
$('.map').maphilight();
});
</script>
Both maphighlight and map_click_event are working fine separately. But when I enable them both, only maphilight works. How can I enable onclick event for mapped image when maphilight is active?
Edit: picture and question to be more clear
You will have to use Jquery to achieve this.
The following site has a good tutorial for beginners:
codeacademy
This might help you grasp the concept of jquery.
Copy paste and run.
Its crude you will have to make some changes, but it's just the way you have asked above.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.area').mouseenter(function () {
$(this).addClass("change");
});
$('.area').mouseleave(function () {
$(this).removeClass("change");
});
$('#a1').click(function () {
$('.map').addClass("img_add");
$('.map div').hide();
});
$('#a2').click(function () {
$('.map').addClass("img_add");
$('.map div').hide();
});
$('#a3').click(function () {
$('.map').addClass("img_add");
$('.map div').hide();
});
$('#a4').click(function () {
$('.map').addClass("img_add");
$('.map div').hide();
});
</script>
<style>
.map {
height:40px;
width:220px;
}
.area {
height:30px;
width:50px;
background-color: yellow;
float: left;
margin: 2px;
}
.change {
background-color: red;
}
.img_add {
background-image:url('some_image.ext');
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div class="map">
<div class="area" id="a1"></div>
<div class="area" id="a2"></div>
<div class="area" id="a3"></div>
<div class="area" id="a4"></div>
</div>
</body>
</html>
Output looks like this.
P.S:
For valid image to appear give valid link in style for .img_add (replace "some_image.ext" with proper image link)
$("#link").click(function() {
$("#image").attr("src", "images/medium/2.png");
});
where link is id or class element for click and #image is a id image to change source
I am trying to animate an set of images to individually move 300px right on the first click and when clicked again move 300px left back to the starting position.
What I have right now is not working. So it's either A) something wrong with my syntax or B) my images arent actually rendering at 5px.
EDIT: This fiddle is now updated with the correct code
Jsfiddle Demo
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#wrapper {
width: 80em;
}
.image {
width: 10em;
height: 10em;
display: block;
position: relative;
left:5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".image").click(function() {
if ($('this').css('left') =='5px') {
$(".image").animate({"right": "300px"},3000);
else
$(".image").animate({"left": "300px"},3000);
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<section id="gallery">
<img id="avery" class="image" src='images/OAI.jpg' alt= "On Avery Island Album Art">
<img id="overthesea" class="image" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">
<img id="beauty" class="image" src='images/beauty.jpg' alt="Beauty Demo Album Art">
<img id="everthingIs" class="image" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
</section>
</div>
</body>
</html>
Try this:
$(document).ready(function () {
$(".image").click(function () {
var th = $(this);
if ($(th).css('left') == '5px') {
console.log("ret");
$(th).animate({
"left": "300px"
}, 3000);
} else {
console.log("sdffsdsff");
$(th).animate({
"left": "5px"
}, 3000);
}
});
});
Fiddle here.
You have to change $('this') for $(this), element this is always without quotes.
Greetings.