Develop Reference

hide or delete image not found with javascript or jquery

can I hide, jump or delete images not found
in balise
<a href="...">
and
<img src="...">
I already use :
$("img").error(function(){ $(this).hide(); });
images not found are hidden but when i'm in my gallery i can see a white screen.
HERE IS MY GALLERY EXAMPLE
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>

How about removing the a:-
$("img").error(function() {
$(this).parent().remove();
});
$("a.fancyboxgallery").fancybox();
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="" />
</a>
<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="" />
</a>

My guess is that the empty space is coming from the empty a tag, so you might want to select the parent instead. So instead of $(this).hide(); try $(this).parent().hide();.
Additionally, by using this method, you might want a more specific selector than just $('img'). So maybe try $('.fancyboxthumbnailsgallery').error(function(){ $(this).parent().hide(); });.
To hide all images, I would check for the the class and handle the hiding differently, like so:
$('img').error(function(){
if($(this).hasClass('fancyboxthumbnailsgallery')){
$(this).parent().hide();
} else {
$(this).hide();
}
});
jQuery().parent()

Scroll Down Arrow Javascript

I'm working on a canvas drawing app and I want to have a scroll down arrow show up in a div with a group of images to show the user that they have to scroll down to see the rest of the images, but also I want the user to be able to actually scroll down when touching the arrow. Could someone help me with the script to go about this ? thank you very much.
//////////////HTML/////////////////////////
<div id="branddraw">
<div class="drawings col-md-2">
<div class="pre-scrollable">
<div class="thumb">
<a class="thumbnail" href="#" id="img1">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img1.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img2">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img2.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img3">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img3.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img4">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img4.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img5">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img5.png" alt="">
</a>
</div>
<div class="thumb">
<a class="thumbnail" href="#" id="img6">
<img class="img-responsive" src="./assets/colour_imgs/Kcoloring/img6.png" alt="">
</a>
</div>
</div>
</div>
</div>

Add dynamic divs around 6 image urls using jquery

I need help to render 6 images retrieved from mysql database in mvc razor view. Images 1 and 6 are put in their separate divs called "item". Images 2,3,4 and 5 are all put in one div called "item -item-small" Below is the original rendering:
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
Below is what I want to achieve:
<div class ="owl-photos">
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-1.jpg" alt="" />image1
</a>
</div>
<div class="item item-small">
<a href="post.html" class="item-photo">
<img src="images/photos/image-2.jpg" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-3.jpg" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-4.jpg" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="images/photos/image-5.jpg" alt="" />image5
</a>
</div>
<div class="item">
<a href="post.html" class="item-photo">
<img src="images/photos/image-6.jpg" alt="" />image6
</a>
</div>
</div>
Any help in using JQuery will be appreciated I do not know how to start this. I can add classes to first element but this is a big challenge
Attempted with the code below:
$(".owl-photos>div:nth-child(1n)").before("<div class="item">");
$(".owl-photos>div:nth-child(1n)").after("</div><div class="item item-small">");
$(".owl-photos>div:nth-child(1n)").after("<div class="item item-small">");
$(".owl-photos>div:nth-child(5n)").after("</div><div class="item ">");
$(".owl-photos>div:nth-child(6n)").after("</div>");

$(function () {
var $result = $('<div class="owl-photos"></div>');
var length = $('.owl-photos a').length;
$('.owl-photos a').each(function (key, item) {
if (key == 0 || key == length - 1) {
var $div = $('<div class="item"></div>').append(item);
$result.append($div);
} else {
var $small = $result.find('.item-small');
console.log($small);
if (!$small.length) {
var $div = $('<div class="item item-small"></div>').append(item);
$result.append($div);
} else {
$small.append(item);
}
}
});
$('.owl-photos').html($result.html());
});
https://jsfiddle.net/atw4gwrr/

You can create elements with JavaScript, append the specific elements to them, then place the new elements into .owl-photos. By appending the <a> elements to the newly made <div>s they are moved from their previous place, that's why you don't see them duplicate.
Below, I get the list of childs, then group them as such:
The .first() child is placed in a <div class="item">, then appended
The :not(:first-child) and :not(:last-child) elements are placed in <div class="item item-small">, then appended
The .last() child is placed in a <div class="item">, then appended
$(function(){
var $photos = $('.owl-photos'),
$childs = $photos.children(),
$itemWrapper = $(document.createElement('div')).attr('class','item'),
$itemSmallWrapper = $(document.createElement('div')).attr('class','item item-small');
$photos.append(
$itemWrapper.clone().append($childs.first()),
$itemSmallWrapper.clone().append($childs.filter(':not(:first-child), :not(:last-child)')),
$itemWrapper.clone().append($childs.last())
);
})
.item { border: 3px solid green }
.item.item-small { border: 3px solid blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="owl-photos">
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=1" alt="" />image1
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=2" alt="" />image2
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=3" alt="" />image3
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=4" alt="" />image4
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=5" alt="" />image5
</a>
<a href="post.html" class="item-photo">
<img src="http://placehold.it/100x100&text=6" alt="" />image6
</a>
</div>

Nav-bar not expanding after being collapsed?

In this simple expand/collapse navbar I made, the second navbar does not re-expand once it is collapsed, though the first one works fine. Once I collapse the second section, it stays collapsed and will not expand, though the first section continues to work fine, expanding and collapsing Thanks, all help is appreciated.
Here is my code below:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5" >Test5</a>
<a id="Link-6" >Test6</a>
<a id="Link-7" >Test7</a>
<a id="Link-8" >Test8</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>

The problem is that you are using the id for link-1 more than once; and please check if your open and closing divs are matching.
I changed your function to this:
function Change(sec, state) {
console.log('Change(sec, state)', sec, state);
var section = document.getElementById("Sec-"+sec);
var menu = document.getElementById("Menu-"+sec);
var menulink = document.getElementById("MenuLink-"+sec); // <-- new MenuLink
if (state == 0) {
section.src = "collapsed.gif";
menu.style.display = "none";
menulink.href = "javascript:Change("+sec+", 1)";
}
else {
section.src = "expanded.gif";
menu.style.display = "inline";
menulink.href = "javascript:Change("+sec+", 0)";
}
}
And the matching html. Instead of Link-1 i used MenuLink-1 since Link-1 was already in use for another element.
<span class="title" id="community">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
You have to do the same for MenuLink-2
This is the full html with where the nesting of the open and closing of divs matches:
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community1">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-1">
<a id="Link-1">m1.1</a>
<a id="Link-2">m1.2</a>
<a id="Link-3">m1.3</a>
</div>
</div>
<span class="title" id="community2">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(2, 0)" id="MenuLink-2">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</a>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5">m2.5</a>
<a id="Link-6">m2.6</a>
<a id="Link-7">m2.7</a>
</div>
</div>
</div>

Blueimp gallery for Bootstrap multiple galleries issue

I have this problem trying to have more than one gallery in one single page. I am using Twitter BOOTSTRAP for the page and blueimp Gallery for the images. The fact is when I duplicate (for testing purposes) the working gallery, I end up with one gallery (out of 3) showing the lightbox interface, but the image dimmed down almost to black, and the rest of the 2 galleries not having lightbox action at all.
This is the code I am using (of course I have the call to the styling in the header, and the call to the Js at the bottom of the page):
<section id="Section-2">
<div class="container">
<br />
<div class="row">
<div class="span12 page-header text-center">
<h3>DISEÑO</h3>
<p class="lead">
</div>
<h3 class="text-center"> Gráfica Vehicular</h3>
<h4 class="text-center">Hacer clic sobre las imágenes para ampliarlas</h4>
</div>
<div class="row">
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div><!--/row blueimp initialize -->
<div id="links">
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/carabela-grafica.jpg" title="Banana">
<img src="images/thumbnails/carabela-graficath.png" alt="Banana">
</a>
<a href="images/Estanciera.jpg" title="Apple">
<img src="images/thumbnails/Estancierath.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
<a href="images/fiat.jpg" title="Banana">
<img src="images/thumbnails/fiatth.png" alt="Banana">
</a>
<a href="images/fiat600.jpg" title="Apple">
<img src="images/thumbnails/fiat600th.png" alt="Apple">
</a>
<a href="images/falcon.jpg" title="Orange">
<img src="images/thumbnails/falconth.png" alt="Orange">
</a>
</div><!--/div blueimp-gallery -->
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
I would really appreciate help in this issue, I am on a deadline and can't make head or tail out of it!
Thanks in advance!

I think You also duplicating this line
<div id="links">
which is prohibited, and this makes script
document.getElementById('links').onclick = function (event)
fail for other galleries

You use blueimp.Gallery, so see https://github.com/blueimp/Gallery#container-ids-and-link-grouping

The way I went about having two image galleries on a single page is like so:
(note: I'm using HAML for terseness, but you can convert it to HTML here: http://htmltohaml.com/)
In your HAML:
/ first gallery
#citizen-kane-gallery.blueimp-gallery.blueimp-gallery-controls
.slides
%h3.title
%a.prev ‹
%a.next ›
%a.close ×
%a.play-pause
%ol.indicator
#citizen-kane-images
%a{href: "/images/kane/rose-bud.png", title: "Rose Bud"}
%img{alt: "Rose Bud", src: "/images/kane/rose-bud-thumb.png"}
%a{href: "/images/kane/xanadu.png", title: "Xanadu"}
%img{alt: "Xanadu", src: "/images/kane/xanadu-thumb.png"}
%a{href: "/images/kane/speech.png", title: "Speech"}
%img{alt: "Speech", src: "/images/kane/speech-thumb.png"}
/ second gallery
#the-third-man-gallery.blueimp-gallery.blueimp-gallery-controls
.slides
%h3.title
%a.prev ‹
%a.next ›
%a.close ×
%a.play-pause
%ol.indicator
#the-third-man-images
%a{href: "/images/third-man/ferris-wheel.jpg", title: "Ferris Wheel"}
%img{alt: "Ferris Wheel", src: "/images/third-man/ferris-wheel-thumb.jpg"}
%a{href: "/images/third-man/orson.png", title: "Orson Welles"}
%img{alt: "Orson Welles", src: "/images/third-man/orson-thumb.png"}
%a{href: "/images/third-man/joseph.jpg", title: "Joseph Cotten"}
%img{alt: "Joseph Cotton", src: "/images/third-man/joseph-thumb.jpg"}
In your JavaScript:
// first gallery
document.getElementById('citizen-kane-images').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
var link = target.src ? target.parentNode : target;
var options = {
index: link,
event: event,
container : '#citizen-kane-gallery' // USE THE CONTAINER OPTION
};
var links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
// second gallery
document.getElementById('the-third-man-images').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement;
var link = target.src ? target.parentNode : target;
var options = {
index : link,
event : event,
container : '#the-third-man-gallery' // USE THE CONTAINER OPTION
};
var links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
I also found some info here: https://github.com/blueimp/Gallery/issues/10
By following this pattern, I would assume it's possible to add as many galleries as needed.
Hope this helps

As said in the documentation, you just need to add your second gallery with a different id and mention it in the data-gallery as this:
<div id="fruits">
<a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits">
<img src="images/thumbnails/banana.jpg" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits">
<img src="images/thumbnails/apple.jpg" alt="Apple">
</a>
</div>
<div id="vegetables">
<a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables">
<img src="images/thumbnails/tomato.jpg" alt="Tomato">
</a>
<a href="images/potatoe.jpg" title="Potatoe" data-gallery="#blueimp-gallery-vegetables">
<img src="images/thumbnails/potatoe.jpg" alt="Potatoe">
</a>
</div>