Here's the thing, I want some of the pictures in my HTML file to be hidden at first leaving a black at its position. And it's shown after clicking on it. I can put js code in my layout file but to keep the code clean and extremely readable, there shouldn't be div span tags or id or class, just add parameters like 'onclick' in img tags.
Current code:
<script type="text/javascript">
function toggle_visibility() {
if ( this.style.visibility == 'hidden' )
this.style.visibility = 'visible';
else
this.style.visibility = 'hidden';
}
</script>
<img onclick="toggle_visibility();" src="IMG.jpg"/>
Add specific class to each element that needs that functionality. In my example this class is 'image'.
Also you need to have draggable set to false for images, else you can still see the image when dragging.
document.addEventListener('click', function(e) {
if (e.target.classList.contains('image')) {
e.target.style.filter = 'brightness(100%)';
}
});
img.image {
height: 100px;
filter: brightness(0%);
}
<img class="image" src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/ draggable="false">
<img class="image" src="https://dictionary.cambridge.org/images/thumb/chick_noun_002_06563.jpg?version=4.0.44"/ draggable="false">
Related
i have this div containing two images.
<div class="pc" id="pc1">
<img src="available.png" alt="Available">
<img src="unavailable.png" alt="UnAvailable">
</div>
when page will load, one image will show and the other will hide. when click on the image which is shown then the showing image will hide and hidden image will show... same process for the other image click event. images must be overlap just because i dont want any extra space. same space for both images simultaneously....
how to code for this....
Since both your images are children of the same element, you could set an event listener on the parent instead.
const toggleImages = () => {
// get the parent wrapper element
const pc1 = document.getElementById('pc1');
// if #pc1 exists
if (pc1) {
// attach an event click
pc1.addEventListener('click', () => {
pc1.classList.toggle('is-active'); // toggle `is-active` class
});
}
};
toggleImages();
#pc1 {
display: inline-block;
}
/* Hide last image by default */
#pc1:not(.is-active) img:last-child {
display: none;
}
#pc1.is-active img:first-child {
display: none;
}
<div class="pc" id="pc1">
<img src="https://via.placeholder.com/175/000000?text=First+Image" alt="Available">
<img src="https://via.placeholder.com/175/33414D?text=Second+Image" alt="UnAvailable">
</div>
try this:
first of all include jquery in your head tag:
<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head>
ok now set an class to the first img and a class to the other img and set for the second image the style to display none
<div class="pc" id="pc1">
<img class="img1" src="available.png" alt="Available">
<img class="img2" src="unavailable.png" alt="UnAvailable"
style="display:none">
</div>
now you need to add an script for that:
<script>
$( ".img1" ).click(function() {
$( ".img1" ).hide();
$( ".img2" ).show();
});
$( ".img2" ).click(function() {
$( ".img2" ).hide();
$( ".img1" ).show();
});
</script>
<style>
.pc {
position: relative;
}
.visible, .unvisible {
display: block;
position: absolute;
top: 0;
left: 0;
}
.unvisible {
display: none;
}
</style>
<script>
// add event listener to wait when page is load
document.addEventListener("DOMContentLoaded", () => {
// get instances of both images
const img1 = document.getElementById("img1")
const img2 = document.getElementById("img2")
/**
* this method toggle visibility of image
*/
const toggleImage = (image) => {
image.classList.toggle("unvisible")
}
// hide visible image #1
toggleImage(img1)
// show unvisible image #2
toggleImage(img2)
// Add event listener for user press a mouse key on image #2
img2.addEventListener("mousedown, mouseup", () => {
// hide visible image #1
toggleImage(img1)
// show hidden image #2
toggleImage(img2)
})
});
</script>
<div class="pc" id="pc1">
<img id="img1" src="available.png" alt="Available">
<img id="img2" class="unvisible" src="unavailable.png" alt="UnAvailable">
</div>
so, you can use DOM model to toggle class "unvisible" and hide one image and show other.
I'm trying to hide images without the src in WordPress.
Following is the image code displaying on the front end
<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>
JS used to hide the image
<script type="text/javascript">
$(document).ready(function() {
$(".galimage").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidegalimage");
} else {
$(this).removeClass("hidegalimage");
}
});
});
</script>
CSS
.hidegalimage {
display:none;
}
But I can still see the broken image icon & an image border. View JSFiddle. Can someone fix my issue or give me a suggestion how to hide the image?
Many thanks
Much more elegant to use CSS instead, no Javascript required, assuming the bad srcs start with [ as in your HTML: are empty strings:
.galimage[src=""] {
display:none;
}
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
Using jquery
$("img").error(function(){
$(this).hide();
});
Or
$("img").error(function (){
$(this).hide();
// or $(this).css({'display','none'});
});
no need for CSS alternative
You can use this but this is not hidding its removing from the page at all (DOM):
<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >
I have a div act like button that contain an image. I want when I click the div the image inside it will change I put a jquery but my jquery only work in 1 way it can switch to second image but cant switch back to first image.
HTML :
<div class="post-like m-30">
<img class="img-responsive" src="img/like.png" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div>
CSS :
.post-like{
cursor: pointer;
}
.post-like img{
margin: auto;
}
JS :
$(document).ready(function() {
$('.post-like').click(function(){
$(".post-like img").attr('src',"img/like.jpg");
return false;
});
});
Can you teach me why my jquery didnt work?
To toggle between the both src attributes, you could add condition in your click event :
$(document).ready(function() {
$('.post-like').click(function(){
var src = $(".post-like img").attr('src');
if(src=="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png")
$(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/1/10/MRT_Singapore_Destination_2.png");
else
$(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-like m-30">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div><!-- post-like -->
Grab the value of the src attribute and store it in a variable. Use this variable as your reference in an if statement to determine which image to switch to:
$(document).ready(function() {
$('.post-like').click(function(){
var img=$(this).attr('src');
if(img=="img/like.jpg"){
$(".post-like img").attr('src',"img/like.jpg");
return false;
}else{
$(".post-like img").attr('src',"img/otherimage.jpg");
return false;
}
});
});
There was nothing wrong with your code, it changed the source just fine.
In order to create a 'click to toggle'-flow, you need to know both sources, I tend to do this by having two variables (one with the 'special' source and one empty, which is set on first use).
$(function() {
var specialSrc = 'http://lorempixel.com/image_output/nightlife-q-g-160-100-10.jpg',
img = $('.post-like img'),
normalSrc;
$('.post-like').click(function(){
var src = img.attr('src');
if (!normalSrc) {
normalSrc = src;
}
img.attr('src', src === normalSrc ? specialSrc : normalSrc);
return false;
});
});
.post-like{
cursor: pointer;
}
.post-like img{
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-like m-30">
<img class="img-responsive" src="http://lorempixel.com/image_output/nightlife-q-c-160-100-4.jpg" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div><!-- post-like -->
I've also stored the image in the img variable, so you don't need to look for it every click, and I've replace $(document).ready(function() {..}) with the shorter syntax $(function() {..}) which does the same thing)
make it simpler and do toggle
$(".post-like").click(function() {
$(this).find('img').toggle();
});
TOGGLE
I have an image below a nav and the image changes depending on which nav item is hovered over. Here is the code:
$(document).ready(function() {
$('.nav-item').mouseenter(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
}).mouseleave(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
});
});
I'd like the image to be a link to it's corresponding page, but I'm not sure how to do that via jQuery. Any help would be greatly appreciated.
First, enclose the image in an anchor in your HTML: <a><img ....></a>. Put the link next to data-headerimg, in data-headerlink attribute.
Second, update the anchor's href to the same value you're setting the image's src:
var img = $(this).attr('data-headerimg');
var href = $(this).attr('data-headerlink');
$('img#header-img').attr('src', img).parent().attr('href', href);
Sorround it with a href tag in html like
<a id="headerimglink" href=""><img src="" /></a>
set the href attribute along with the src attribute, or you can hardcode it as well if that is not changing.
Why to send an image request and wait a server response with image data? (Some users find it very annoying)
In order to preload your images You can simply create the needed tags and just swap display (with fade?) on item hover.
Let's say:
<ul id="list">
<li>Football</li>
<li>Barbara</li>
</ul>
<div id="images">
<img src="foo.jpg" alt="Foo">
<img src="bar.jpg" alt="Bar">
</div>
#images a {
display:none;
position:absolute;
/* etc */
}
var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
$imgLink.stop().fadeTo(300, 0);
if(e.type=="mouseenter") {
$imgLink.eq( $(this).index() ).fadeTo(300, 1);
}
});
I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}