We Keep Coding

Toggle images hide/visible in HTML

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">

I need my created button to open close a content div in wordpress

I have a div with content ie. short-code, images, links etc.
I need my switch to toggle the div container without jquery. I have spend days and would really appreciate some assistance.
I have included the switch code. On off the div must be display.style="none"
html
<img id="switch" onclick="changeImage()" src="http://designplatform.byethost15.com/on.png" width="60" height="150">
JavaScript
<script>
function changeImage()
{
element=document.getElementById('switch');
if (element.src.match("off"))
{
element.src="http://designplatform.byethost15.com/on.png";
}
else
{
element.src="http://designplatform.byethost15.com/off.png";
}
}
</script>

You can accomplish this using jquery.
Add jquery to your html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Take out the onclick=changeImage() function from the <img> element, and add the following jquery(found in the first part of the snippett) into your <script> tags on your html.
$(function () {
$("#switch").click(function () {
if ( $("#switch").val()=="off")
{
$("#switch").attr("src","http://designplatform.byethost15.com/on.png");
$("#switch").val("on");
}
else
{
$("#switch").attr("src","http://designplatform.byethost15.com/off.png");
$("#switch").val("off");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="switch"
src="http://designplatform.byethost15.com/on.png" width="60" height="150">

Gif wont animate on hover

I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html

From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>

Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>

Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});

Hide image if src is empty

I'm trying to hide <img> if the source is empty. But I have no luck.
I found few posts here, but it doesn't work for me.
Here is my code, it's table based because it will be a template:
Images:
<td width="92%" align="center" class="imagenes_desc">
<img class="imagen" src="http://webs.ono.com/norfolk/ebay/images/01.jpg" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
</td>
Here is the Javascript I'm trying to implement.
<script type="text/javascript">
$(document).ready(function(){
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
</script>
I'm not very familiar with JS, I found this script here on Stackoverflow, but I can't get it to work.
Update
Trying this, but doesn't work (Chrome hides well, but Firefox and IE don't):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$("imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});
</script>
<style>
.hide {display:none !important;}
.show {display:block !important;}
</style>
Thanks,

You can just use CSS for this:
img[src=""] {
display: none;
}
<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

How about using jQuery's attribute selectors?
$(document).ready(function(){
$('.imagen[src=""]').hide();
$('.imagen:not([src=""])').show();
});
Working example here

Your logic is flawed.
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
This will not work, as you've got iterate through each instance of .imagen
$('.imagen').show().filter(function(){
return $(this).attr('src') == '';
}).parents('a').hide();
Above, we show all the .imagen's, then filter based on their src attribute, then hide the one's we're left with.
As a side point, you may want to hide the parent <a> element, rather than the image.

Just put space inside alt tag.Here is working code
<img class="imagen" src="" width="800" alt" ">

I am surprised that you don't have some kind of syntax error
And you're code is also wrong, because it does not test every instance of .imagen.
Do it like this
$(".imagen[src='']").hide();

You have wrong syntax for getting value of src by attr()
Change
if ($(".imagen").attr(src="") == "") {
To
$(".imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});

In your stylesheet make add the following code to define a "hidden" class:
.hidden {
display: none;
}
Then add the following javascript code:
$(document).ready(function() {
$(".imgagen").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}
});
});

test for src attribute if its null, but anyway - if you hide images what happens to the wrapping A elements? Rather, dont generate A/IMG elements for those not having any image.

Your code that you have posted should work but make sure that u have added the jquery library files on the header of ur html page .
go to jquery site and then download the js file. then add the following line on HTML page section head :

Get image src from a image in a slideshow

I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.

These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the