Multiple image hidding if one image is available - javascript

I have a page where needs to be displayed only one image, but the image can be from different sources.
I've put all the possible sources and onerror, if the image is not from that source it is hidden.
The problem is that sometimes the same image can be found in 2 or even 3 srcs so the onerror function is not runned and on the page the same image is displayed 2 or 3 times (the same image but different source)
What i need is a js script that hides the rest of the images if one of them is working, but there are a lot of possibilites like: img_01 to be shown with img_4 or img_2 with img_3 or img_01 with img_2 and img_3. I don't know how to cover all this possibilites so that is why i need your help.
I hope u understood my problem
Thanks! :)
<div class="col-md-12" style="padding: 0px; margin-bottom: 20px;">
<img id="img_01" src="im/wall/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_2" src="im/ceiling/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_3" src="im/floor/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
<img id="img_4" src="im/collections/<?php
if(isset($_GET['i']) && strlen($_GET['i']) > 0){
echo $_GET['i'];
}?>.jpg"
onerror="this.style.display='none'"/>
</div>
i've used something like this and i even tried to put it in an if for all the images
$('#img_01').on('load', function(){
// hide/remove the loading image
$('#img_2, #img_3, #img_4').hide();

const my_imgs = document.getElementsByClassName('my_img');
const handler = function(e){
remove_handler();
e.target.classList.remove('hidden');
}
const remove_handler = function(){
for(let i=my_imgs.length; i--; ) {
my_imgs[i].removeEventListener('load', handler);
}
}
for(let i=my_imgs.length; i--;){
my_imgs[i].addEventListener('load', handler);
}
.my_img {
width:200px;
}
.hidden {
display:none;
}
<div class="container">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/TWTNM0XMX9.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/L6QLZEGPXB.jpg">
<img class="my_img hidden" src="https://cdn.stocksnap.io/img-thumbs/960w/FH3TLO40EI.jpg">
</div>

Related

subimage shows when mainimage is clicked

i want to make a toggle image like when i clicked the image the sub image will show up something like that... this is the image that has a toggle function..
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$albumname='';
$album = $carousel->get_album($user_id);
foreach ($album as $key => $myalbum) {
$albumname = $myalbum['album_name'];
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="../assets/img/gallery/event-image3.jpg" style="display: block;margin: 0 auto; height:150px;width:200px;" data-id="<?php echo $myalbum['album_name']?>">
<p style="text-align: center;"><strong><?php echo $myalbum['album_name'];?></strong></p>
</div>
<p></p>
</div>
<?php
}
?>
this is where my function goes..
<script type="text/javascript">
$(document).on('click', 'img[data-id]', function () {
var selected = $(this).attr('data-id');
$ss = $('[data-id="' + selected +'"]').next('.picforalbum').toggle();
});
</script>
this is where the sub image will show up. once that i clicked the image..
<div class="col-md-12 picforalbum">
<?php
include('../includes/inc.php');
$user_id =json_decode($user->user_id);
$album = $carousel->get_photoINalbum($albumname,$user_id);
foreach ($album as $key => $pic) {
?>
<div class="portfolio-image">
<div class="img-thumbnail img-responsive" style="display: inline-block;vertical-align: top;">
<img src="<?php echo $pic['photo'];?>" style="display: block;margin: 0 auto; height:150px;width:200px;" >
</div>
<p></p>
</div>
<?php
}
?>
</div>
but the problem is when i tried to click the toggle image nothing happens...
Assuming that you want a toggle function for your image, I went ahead and built a simple JSfiddle. (As the picture takes a bit of time to load based on your net connection, please wait for a few seconds after clicking the image.)
What you need to do is basically call a function through onclick() on your image which changes the src attribute of your img tag. Thus if you maintain a boolean variable, you can easily alternate between true and false to change your image. So for true you'd have link1 and for false you'd have link2.
EDIT : Since you said that the image should act as a toggle for "sub" images, I have edited the code wherein an image acts as a toggle for another image beside it. Check out the updated fiddle and code snippet below.
Here is a simple example.
var toggle = false;
function toggle_img() {
if (toggle) {
document.getElementById("toggle_image").style.opacity = 0;
toggle = false;
} else {
document.getElementById("toggle_image").style.opacity = 1;
toggle = true;
}
}
<img id="toggle" src="https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg" alt="jungle" width="75vw" height="50vw" onclick="toggle_img()" />
<img id="toggle_image" src="https://s19.postimg.org/klo6nu8k3/sumatrantiger-002.jpg" alt="tiger" width="75vw" height="50vw" onclick="toggle_img()" style="opacity:0"/>

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

Auto image slider that starts from the beginning infinitely

As the sketch above shows, I need a slider gallery where four images slide to left one by one automatically. As the fourth image leaves, the first one follows as if it were the fifth.
How can I achieve this goal, without any plugins, just CSS and a little bit JavaScript?
Please check below code
<script type="text/javascript" src="js/jquery.flexislider.js"></script>
<div id="slider">
<div id="imageloader" style="display: none;">
<img src="images/header-logos_04.jpg" />
</div>
<img src="images/header-logos_04.jpg" />
<img src="images/header-logos_05.jpg" />
<img src="images/header-logos_02.jpg" />
<img src="images/header-logos_03.jpg" />
<img src="images/header-logos_02.jpg " />
<img src="images/header-logos_03.jpg" />
</div>
jquery.flexislider.js
jQuery(window).load(function(){
pic = jQuery("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += jQuery(pic[n]).width();
}
arrLeft[i] = totalWidth;
jQuery(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
jQuery('#imageloader').hide();
jQuery(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -(jQuery(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += jQuery(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
jQuery(pic[i]).css("left",arrLeft[i]);
}
}
The idea is to insert the images one at a time into HTML and have them take on the banner functionality, the tricky part that we couldn't repeat anything in HTML so keyframe should be used to animate it,
Check that article for the complete solution, and that live demo

I want to hide a parent element if the image contained is empty

I have a table with a cell that contains a div to hold an image.
What I want to do is if the image itself has an empty src value or if there is an error on loading the image, to then set the display of the parent cell to none.
The table will actually list a series of images in the page and not all will be mepty or show an error.
The code below shows the table cell... info within {} are in fact dynamic data values passed through as text literals. If the value for "img src" is in error or empty then I want to set the display for ID of the TD to "none.
<td style="text-align: center; vertical-align: top; width: 400px;" id="{tag_itemid}">
<div class="image_container">
<div class="border">
<div class="boxSep">
<div style="width: 250px; height: 250px; border-radius: 15px;" class="imgLiquidFill imgLiquid imgLiquid_bgSize imgLiquid_ready">
<a title="{tag_name_nolink}" target="_blank" href="{tag_itemurl_nolink}" style="display: block; width: 100%; height: 100%;">
<img src="{tag_image (small)_value}" />
</a>
</div>
</div>
</div>
</div>
Would also like to handle situation where I have just the single table on my page with 2 iamges in the table each in a div and I want to set display=none for each DIV subject to image src being invalid URL or if src="" - see example below
<table style="width: 100%;">
<tbody>
<tr>
<td>
<div class="image_container_no_rollover icg_4" id="hldr1">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div id="hldr2" >
<img style="border: 0px none;" src="http://lorempixel.com/400/250/" alt="">
</div>
</td>
</tr>
</tbody>
Here's how to do it:
$(document).ready(function () {
$("td").each(function () {
var $img = $(this).find("img");
if ($img[0] === undefined) return;
var td = this;
$(this).find("img").on("error", function () {
$(td).css("display", "none");
});
});
});
Check it out: JSFiddle
There are several ways to achieve that. For instance:
$('td').each(function() {
if($(this).find('img').attr('src') == "your evaluator here"){
$(this).css('display', 'none');
}
});
Of course, make sure the whole DOM has been loaded before running that code.
I found someone who was able to provide me with the required solution for which you can see the working results below for both cases with much simpler examples.
In answering the first part... Hiding all table cells checking each image within each cell and hiding that cell if the image specified is invalid or if the src=""
$(document).ready(function() {
$("table").find("img").each(function(){
if(!$(this).attr("src")){
$(this).closest("td").hide();
}else{
var image = new Image();
image.src = $(this).attr("src");
if (image.width == 0) {
$(this).closest("td").hide();
}
}
});
});
Check it out: [JSFiddle] (http://jsfiddle.net/gregt57/wke7pbgm/11/)
In Answering the second part of my question... Hiding any element where its child contained an invalid image or where src=""
$(function() {
$("#tbl01").find("img").each(function(){
if(!$(this).attr("src")){
$(this).parent().hide();
}else{
$(this).load(function(){
// ... loaded
}).error(function(){
// ... not loaded
$(this).parent().hide();
});
}
});
});
Check it out at [JSFiddle]

Javascript multiple slideshow

I have created an HTML file which uses java script to display images randomly displayed in 3 div tags. On click the images move left or right. It works fine until I use single slideshow in the page, but creates problem when I try multiple slideshows on the same page.
Here is the code for one slide show :
**<script>
currentIndx = 2;
MyImages=new Array();
MyImages[0]='1images2.jpeg';
MyImages[1]='1images3.jpeg';
MyImages[2]='1images4.jpeg';
MyImages[3]='artwork.jpg';
MyImages[4]='1images5.jpeg';
imagesPreloaded = new Array(4)
for (var i = 0; i < MyImages.length ; i++)
{
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}
/* we create the functions to go forward and go back */
function Nexter()
{
if (currentIndx<MyImages.length-1){
alert(currentIndx);
document.leftimg.src=document.middleimg.src
document.middleimg.src=document.rightimg.src
document.rightimg.src=imagesPreloaded[++currentIndx].src
}
else {
alert("In nexter else")
currentIndx=0
document.leftimg.src = document.middleimg.src
document.middleimg.src = document.rightimg.src
document.rightimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
function Backer()
{
if (currentIndx>0)
{
--currentIndx;
alert("In Backer If");
document.rightimg.src=document.middleimg.src
document.middleimg.src=document.leftimg.src
document.leftimg.src=imagesPreloaded[currentIndx].src
}
else
{
currentIndx = MyImages.length-1
alert(MyImages.length +"else");
document.rightimg.src = document.middleimg.src
document.middleimg.src = document.leftimg.src
document.leftimg.src = imagesPreloaded[currentIndx].src
}
writeImageNumber();
}
/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
<body onload="setCurrentIndex();automaticly()">
<!-- start of form for image slide show ####################### -->
<div id ="left" style="float:left">
<a href="#" onclick="Backer()" ><img src="1images2.jpeg" width="265" height="262"
border="0" name="leftimg"></a>
</div>
<div id ="middle" style="float:left">
<a href="#" onclick=""><img src="1images3.jpeg" width="265" height="262"
border="0" name="middleimg"></a>
</div>
<div id ="right" class="compimg" style="float:left">
<a href="#" onclick="Nexter()" ><img src="1images4.jpeg"
width="265" height="262" alt="" border="0"name="rightimg"></a>
</div>
<!-- end of form for image slide show ####################### -->**
Any suggestions...
You haven't wrapped your script in any javascript class(object) so all variables you are using have global scope(page level). I guess your variables are over written if you try to use it multiple time.
You can get better answer if you post HTML markup of how you are trying to create multiple slideshow in single page...

Categories

Resources