We Keep Coding

Target all link by parent class, add "rel" attribute to link (without jQuery)

I have this Codepen demonstrating how to do it with jQuery. I tried to do it with vanilla Javascript but couldn't get it to work. How would you go about this in plain ES6?
HTML:
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>
Javascript:
$(document).ready(function () {
// Scan the webpage for all class names of 'external'.
$(".external").each(function () {
// For each class name of 'external' found, find descendant tag "a" of that div and apply the rel attribute.
$(".external a").attr("rel", "external noopener");
});
});

You can just do document.querySelectorAll('.external a').forEach to iterate over all of them:
document.querySelectorAll('.external a').forEach((el) => {
el.setAttribute('rel', 'external noopener');
});
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<div class="external">
<figure>
<a href="https://via.placeholder.com/150" target="_blank">
<img src="https://via.placeholder.com/150" class="vc_single_image-wrapper" width="150" height="150">
</a>
</figure>
</div>
<p>Placeholder images courtesty of Placeholder.com</p>

Full screen images in loop with chocolat js

I'm trying to create a full screen slideshow with images in a loop with chocolat js.
The getting started documentation says to start with:
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="series/1.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="series/1.jpg" />
</a>
<a class="chocolat-image" href="series/2.jpg" title="caption image 2">
<img width="100" src="series/2.jpg" />
</a>
<a class="chocolat-image" href="series/3.jpg" title="caption image 3">
<img width="100" src="series/3.jpg"/>
</a>
</div>
My javascript is like this:
$(document).ready(function(){
$('.chocolat-parent').Chocolat({
loop: true,
imageSize: 'cover',
});
});
But how can I make it automatically open and loop?

Please check the code below for the demo.
for more details, you can check the documentation
This is what you need
$(document).ready(function(){
var instance = $('.chocolat-parent').Chocolat({
loop: true,
fullScreen : true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
window.setInterval(function(){
instance.api().next();
},2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/css/chocolat.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chocolat/0.4.19/js/jquery.chocolat.min.js"></script>
<div class="chocolat-parent" data-chocolat-title="set title">
<a class="chocolat-image" href="https://i.stack.imgur.com/C5xFh.jpg" title="caption image 1">
<img class="chocolat-open" width="100" src="https://i.stack.imgur.com/C5xFh.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/kbOvd.jpg" title="caption image 2">
<img width="100" src="https://i.stack.imgur.com/kbOvd.jpg" />
</a>
<a class="chocolat-image" href="https://i.stack.imgur.com/jjOFl.jpg" title="caption image 3">
<img width="100" src="https://i.stack.imgur.com/jjOFl.jpg"/>
</a>
</div>

you can use like this
<script>
$(document).ready(function(){
var instance = $('#example1').Chocolat({
loop: true,
imageSize: 'cover',
}).data('chocolat');
instance.api().open();
setInterval(function(){ instance.api().next();}, 3000);
});
</script>

Javascript onClick fires two events

I threw together a quick website for a friend of mine and I basically just used a query slider to manage all of the content, however when a visitor clicks play on one of his songs, it also seems to fire off the navigation (triggered by onClick). The problem is that playing the music also engages the slider and I am not good enough at JavaScript/jQuery yet to figure out how to separate the two events. Any help would be greatly appreciated.
<script>
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li ><a class="active" href="#" onClick="goto('#about', this); return false"><img src="images/bioblack.gif" width="93" height="55"></a></li>
<li><a href="#" onClick="goto('#work', this); return false"><img src="images/soundblack.gif" width="146" height="55"></li>
<li><a href="#" onClick="goto('#contact', this); return false"><img src="images/contactblack.gif" width="183" height="54"></li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>

Your html has a lot of unclosed tags, try it with a fixed and indented html:
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li>
<a href="#" onClick="goto('#about', this); return false" class="active">
<img src="images/bioblack.gif" width="93" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#work', this); return false">
<img src="images/soundblack.gif" width="146" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#contact', this); return false">
<img src="images/contactblack.gif" width="183" height="54">
</a>
</li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>
</div>
</div>
</body>

event.preventDefault() could solve your problem. Just prevent the default behavior of the button and let js fire the correct event.

Fancybox looping through multiple albums

I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum

The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});

<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?

image load event randomly firing in IE7/8

Situation:
I am resizing / preloading images with javascript before showing them on the page.
Problem:
ie7 / 8 tend to randomy fire the load event for some images and not for others (this is completely random and different on every refresh)
Code:
JS:
$(document).ready(function(){
$(".daImg").hide();
$("figure").each(function(){
$(this).append('<div class="loader"><img src="images/ajax-loader.gif"></div>');
var afb = $(this).find(".daImg");
afb.load(function(){
console.log("loaded");
$(this).parent().parent().parent().find(".loader").remove();
if($(this).parent().parent().parent().is(".last")){
if(afb.height() > 280){
var w = (afb.width()/afb.height())*280
afb.css("width",w);
afb.css("height","280px");
}
} else {
if(afb.height() > 245){
var w = (afb.width()/afb.height())*245
afb.css("width",w);
afb.css("height","245");
}
}
afb.css("left","50%");
afb.css("margin-left","-"+afb.width()/2+"px");
afb.fadeIn();
})
});
}
HTML
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
<figure class="left">
<a href="foobar.html">
<div class="imageWrap">
<img class="daImg" src="foo-bar.png" alt="foobar" />
</div>
<figcaption class="cufonize"><span class="decorated">foobar</span><br>
<span class="price">99</span>
</figcaption>
</a>
If anyone could shed some light of what is going on here, I'd appreciate it!
Note: This issue has nothing to do with caching as I am adding time-stamps to all images in my actual code.

you may try a different approach in your case
use css
.daImg {
display:none;
}
then hook your image resizing script on $(window).load();
and manipulate all images :not(:visible) at once
you could also duplicate this for the rest browsers to the img.load event but for images that are not already visible. i mean your selector to be var afb = $(this).find(".daImg:not(:visible)");
in this case IE all images that are not processed by the other event will get processed there