I'm using JS to change pictures on hover... but the hovered pictures don't load smoothly. Any help is appreciated.
<script type="text/javascript">
$( document ).ready(function() {
$('.img-grey').on({
mouseenter: function (e) {
var greysrc = $(this).attr('src');
var colorsrc = greysrc.replace("1.jpg", "2.jpg")
$(this).attr('src', colorsrc);
},
mouseleave: function (e) {
var colorsrc = $(this).attr('src');
var greysrc = colorsrc.replace("2.jpg", "1.jpg")
$(this).attr('src', greysrc);
}
})
});
</script>
Alternatively this task can be solved with css. Check the css attribute selectors https://www.w3schools.com/css/css_attribute_selectors.asp
All you need is to create next html structure:
<div class="container">
<img src="1path-to-1.jpg" />
<img src="1path-to-2.jpg" />
</div>
<div class="container">
<img src="2path-to-1.jpg" />
<img src="2path-to-2.jpg" />
</div>
See attached snippet
.container [src$="2.jpg"] {
display: none;
}
.container:hover [src$="1.jpg"] {
display: none;
}
.container:hover [src$="2.jpg"] {
display: inline;
}
.container {
float: left;
}
<div class="container">
<img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>
<div class="container">
<img src="https://www.gravatar.com/avatar/b8367b2f25ceee4d54595495b4e51312?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>
<div class="container">
<img src="https://www.gravatar.com/avatar/f20fc11c3f294bdebe4351e7ca240678?s=128&d=identicon&r=PG&f=1&1.jpg" />
<img src="https://www.gravatar.com/avatar/8aecf6164a04433529bd7702f1b5f59a?s=128&d=identicon&r=PG&f=1&2.jpg" />
</div>
If you want to preload your images you should put them into DOM or add as background properties. Here's modified version of your code that adds hidden <img /> elements next to existing. I haven't run it, but it should works
$( document ).ready(function() {
$('.img-grey').map(function () {
var temp = document.createElement('img');
temp.src = this.src.replace("1.jpg", "2.jpg");
temp.style.display = 'none';
$(this).parent().append(temp);
return this;
}).on({
mouseenter: function (e) {
var greysrc = $(this).attr('src');
var colorsrc = greysrc.replace("1.jpg", "2.jpg")
$(this).attr('src', colorsrc);
},
mouseleave: function (e) {
var colorsrc = $(this).attr('src');
var greysrc = colorsrc.replace("2.jpg", "1.jpg")
$(this).attr('src', greysrc);
}
})
});
Related
im trying to build a website, where u click on a text, and a picture appears, when you click on this picture, the next one appears and so on. If you reach the last picture, the first one should appear if you click on it. My code is very complicated and it does not work with the last picture. I hope somebody can help me!
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility="visible";
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility="visible";
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility="visible";
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="pic/pic1.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage3()" id="loadingimage2" src="pic/pic2.jpg" alt="" style="visibility:hidden"></img>
<img onclick="showImage4()" id="loadingimage3" src="pic/pic3.jpg" alt="" style="visibility:hidden"></img>
</body>
For simplicity, the button will be hidden after you click the first time on the button.
let start = 0,
total = 3,
hasStarted = false;
const images = [...document.querySelectorAll(".image")];
const button = document.querySelector("button");
function showImage() {
if (!hasStarted) {
button.classList.add("hide")
hasStarted = !hasStarted;
}
images.forEach(image => {
if (image.classList.contains("show")) {
image.classList.remove("show");
image.classList.add("hide");
}
})
document.querySelector(`.image${start}`).classList.add("show");
++start;
start = start % total;
}
images.forEach(image => {
image.addEventListener("click", showImage)
})
.hide {
visibility: hidden;
}
.show {
visibility: visible;
}
<button onclick="showImage()">Hier clicken</button>
<img class="image image0 hide" id="loadingimage1" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image1 hide" id="loadingimage2" src="https://source.unsplash.com/random/200x200" alt=""></img>
<img class="image image2 hide" id="loadingimage3" src="https://source.unsplash.com/random/200x200" alt=""></img>
I feel this is what you need:
<head>
<script type="text/javascript">
function showImage() {
document.getElementById('loadingimage').style.visibility = "visible";
document.getElementById('loadingimage').style.position = 'absolute';
}
function showImage2() {
document.getElementById('loadingimage2').style.visibility = "visible";
document.getElementById('loadingimage2').style.zIndex = '10';
document.getElementById('loadingimage2').style.position = 'absolute'
}
function showImage3() {
document.getElementById('loadingimage3').style.visibility = "visible";
document.getElementById('loadingimage3').style.zIndex = '15';
document.getElementById('loadingimage3').style.position = 'absolute'
}
function showImage4() {
document.getElementById('loadingimage').style.zIndex = '20';
}
</script>
</head>
<body>
<a onclick="showImage()">Hier clicken</a>
<img onclick="showImage2()" id="loadingimage" src="https://source.unsplash.com/random/200x201" alt="" style="visibility:hidden">
<img onclick="showImage3()" id="loadingimage2" src="https://source.unsplash.com/random/200x202" alt="" style="visibility:hidden">
<img onclick="showImage4()" id="loadingimage3" src="https://source.unsplash.com/random/200x203" alt="" style="visibility:hidden">
</body>
I want to change an image to some other image when i click on the object. the code is stacked in the following order:
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
What I wish to do is, when I click on the <li> i want to change the image to a coloured version of the image, i.e. some other image. Now, I know I can use JQuery/JS to accomplish it. But I don't want a huge amount of JS code to accomplish something so simple.
Can it be done using something simpler? Like pseudo selectors? .active class?
I cannot seem to think of it.
To change image onclik with javascript you need to have image with id:
<p>
<img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>
Then you could call the javascript function when the image is clicked:
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
} else {
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
}
}
This code will set the image to maximize.png if the current img.src is set to minimize.png and vice versa.
For more details visit:
Change image onclick with javascript link
Or maybe
and that is prob it
<img src="path" onclick="this.src='path'">
How about this? It doesn't require so much coding.
$(".plus").click(function(){
$(this).toggleClass("minus") ;
})
.plus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
.plus.minus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plus">CHANGE</div>
If your images are named you can reference them through the DOM and change the source.
document["imgName"].src="../newImgSrc.jpg";
or
document.getElementById("imgName").src="../newImgSrc.jpg";
The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS.
I would name the images starting with bw_ and clr_ and just use JS to swap between them.
example:
$("#images").find('img').bind("click", function() {
var src = $(this).attr("src"),
state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';
(state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_');
$(this).attr("src", src);
});
link to fiddle: http://jsfiddle.net/felcom/J2ucD/
Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.
<div id="imageGallery">
<img id="image" src="http://adamyost.com/images/wasatch_thumb.gif" />
<div id="previous">Previous</div>
<div id="next">Next</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
var images = [
"http://placehold.it/350x150",
"http://placehold.it/150x150",
"http://placehold.it/50x150"
];
var imageIndex = 0;
$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#image").attr(images[0]);
});
</script>
I was able to implement this by modifying this answer: jQuery array with next and previous buttons to scroll through entries
If you don't want use js, I think, you can use instead of img and then use css like
a {
background: url('oldImage.png');
}
a:visited {
background: url('newImage.png');
}
EDIT: Nope. Sorry it works only for :hover
You can try something like this:
CSS
div {
width:200px;
height:200px;
background: url(img1.png) center center no-repeat;
}
.visited {
background: url(img2.png) center center no-repeat;
}
HTML
<div href="#" onclick="this.className='visited'">
<p>Content</p>
</div>
Fiddle
This script helps to change the image on click the text:
<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>
<div class="sandiv">
<h1 style="text-align:center;">The Human Body Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
<h2><a style="color:#333;" href="http://www.sanwebcorner.com/">sanwebcorner.com</a></h2>
</div>
function chkicon(num,allsize) {
var flagicon = document.getElementById("flagicon"+num).value;
if(flagicon=="plus"){
//alert("P== "+flagicon);
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
document.images["pic"+num].src = "../images/minus.gif";
document.getElementById("flagicon"+num).value = "minus";
}else if(flagicon=="minus"){
//alert("M== "+flagicon);
document.images["pic"+num].src = "../images/plus.gif";
document.getElementById("flagicon"+num).value = "plus";
}else{
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
}
}
I've got such a problem:
inside my <div></div> there are always 5 images, only 1 is visible other 4 are hidden.
<style>
#id2, #id3, #id4, #id5 { display: none; }
</style>
<div>
<img id="id1" src='image.jpg'>
<img id="id2" src='image.jpg'>
<img id="id3" src='image.jpg'>
<img id="id4" src='image.jpg'>
<img id="id5" src='image.jpg'>
</div>
My aim is to change them in the constant time stamp (for example 1 second) on hover.
$('document').ready(function(){
$('#1').hover(function(){
// #id1 hide
// #id2 show
// #id2 hide
// #id3 show
// #id3 hide
// #id4 show
// #id4 hide
// #id5 show
// #id5 hide
// #id1 show
// and so on...
});
});
It's going to be used as a video preview, divs and inner images are going to be generated from MySQL DB.
Any help appreciated.
Here's a working example, based on what I understood from your question:
$('.preview').hover(function() {
var $that = $(this),
toggleFunction = function() {
var $visibleImg = $('img:visible', $that),
$nextImg = $visibleImg.next('img');
if(!$nextImg.length) {
$nextImg = $('img:first-child', $visibleImg.parent());
}
$nextImg.show().siblings().hide();
};
$that.data('interval', window.setInterval(toggleFunction, 1000));
toggleFunction();
}, function() {
window.clearInterval($(this).data('interval'));
});
.preview img {
display: none;
}
.preview img:first-child {
display: block;
}
.preview {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="preview">
<img src="https://s24.postimg.org/r74b0vcu9/frame_0.gif" />
<img src="https://s24.postimg.org/a7vclm1mp/frame_15.gif" />
<img src="https://s24.postimg.org/600kcv075/frame_30.gif" />
<img src="https://s24.postimg.org/7t82exarl/frame_45.gif" />
<img src="https://s24.postimg.org/5d6912sox/frame_60.gif" />
</div>
I am trying to show images on a link click and hiding that image if clicked outside. After trying so many solutions for this I have came up with like below code.
<script>
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center" onclick="javascript:setImageVisible('popup1', false)">
<div id="Btn7"></div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
</div>
The above code is working fine. But when I add other image like below, its not working. When I clicked outside then images are not hiding.
<script>
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
$(document).click(function() {
var img1 = document.getElementById('popup1');
var img2 = document.getElementById('popup2');
img1.style.visibility = 'hidden';
img2.style.visibility = 'hidden';
});
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">
<div id="Btn7"></div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
<div id="Btn8"></div>
<img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />
</div>
Can anyone please suggest what should I do ?
You don't need jQuery to do this.
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
function hideAll() {
var img1 = document.getElementById('popup1');
var img2 = document.getElementById('popup2');
img1.style.visibility = 'hidden';
img2.style.visibility = 'hidden';
}
function click(e) {
e.stopImmediatePropagation();
var id, el = this;
while (el) {
el = el.nextSibling;
if (el.nodeName === 'IMG') { // finds the next sibling img element
id = el.id;
el = null;
}
}
hideAll(); // hide all images
setImageVisible(id, true); // show the right one
};
document.addEventListener('click', hideAll);
var btns = document.querySelectorAll('.btn'),
i = 0,
len = btns.length;
for (; i < len; i++) {
btns[i].addEventListener('click', click);
}
img {
width: 100px;
height: 100px;
border: 1px solid black;
}
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">
<div class="btn" id="Btn7">Image 1</div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
<div class="btn" id="Btn8">Image 2</div>
<img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />
</div>
Sure, as you have added a tag jquery, I am asking you to do it in a simple way like this:
Snippet:
$(function () {
$(".imgPreview").hide();
$(".unstyled li a").click(function () {
$(".imgPreview").show().find("img").attr("src", $(this).attr("href"));
return false;
});
$("body").click(function () {
$(".imgPreview").hide();
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 5px;}
.unstyled, .imgPreview {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click on a link to show the respective image. Click outside to hide it!</p>
<p>Also you can right click and open it to open the image in a new tab!</p>
<ul class="unstyled">
<li>350x150</li>
<li>750x150</li>
<li>350x150</li>
<li>100x100</li>
<li>350x150</li>
</ul>
<div class="imgPreview">
<img src="" alt="" />
</div>
Try this simple demo
<!DOCTYPE html>
<html>
<head>
<script src = "jquery-1.10.2.min.js"></script>
</head>
<body>
Click to show image
<img id="image" style="display:none;height:500px; width:500px;">
<script type="text/javascript">
$('#imageLink').click(function (e){
e.stopPropagation();
$('#image').show();
});
$('body').click(function () {
$('#image').hide();
})
</script>
</body>
</html>
Remove inline event handler and write for common click event ,
1) bind the click event for all a tag inside wrapper id and then show the images when link is clicked
2) bind the click event for document and hide the all images when clicking outside of link
$("#popup1,#popup2").hide();
$("#Btn7,#Btn8").click(function (e) {
e.stopPropagation();
$(this).next().show();
})
$(document).click(function () {
$("#popup1,#popup2").hide();
})
DEMO
$(document).ready(function () {
$("#linkbutton_id").click(function () {
alert("The paragraph was clicked.");
if($("#image").hide())
{
$("#image").show();
return false;
}
});
});
$(document).ready(function () {
$("#div_id").click(function(){
$("#image").hide();
});
});
Code plus output link
https://jsfiddle.net/umxrn0Lg/2/
fullscreen output link
https://jsfiddle.net/umxrn0Lg/3/embedded/result/
http://jsfiddle.net/mQHEs/23/So I found this really neat jQuery, Fade scroll code here: Change the opacity based on elements current offset.
However I noticed that this only works in one column. If one has two columns with floated items, only the items in the left column are effected by the function (See the jsfiddle).
Does anyone have a solution for this?
http://jsfiddle.net/mQHEs/23/
html:
<img src="http://lorempixel.com/640/480/food/1" />
<img src="http://lorempixel.com/640/480/food/2" />
<img src="http://lorempixel.com/640/480/food/3" />
<img src="http://lorempixel.com/640/480/food/4" />
<img src="http://lorempixel.com/640/480/food/5" />
<img src="http://lorempixel.com/640/480/food/6" />
<img src="http://lorempixel.com/640/480/food/7" />
<img src="http://lorempixel.com/640/480/food/8" />
<img src="http://lorempixel.com/640/480/food/9" />
<img src="http://lorempixel.com/640/480/food/10" />
CSS:
img {width: auto; max-width: 50%; height: auto; float: left;}
img {display:block; margin: 10px auto}
JS:
var $win = $(window);
var $img = $('img');
$win.scroll( function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.prev().offset();
if(prev){
var pt=0;
pt=prev.top;
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
Change
var prev=$self.prev().offset();
to
var prev=$self.prev().prev().offset();
JSfiddle