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
Related
I am trying to attach an event listener to multiple buttons, using a for loop. The event function will "flip" my card by hiding the front side.
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-drake.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Drake Heaton</h3>
<p class="front__info">Business Development Lead</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Drake Heaton</h3>
<p class="back__quote">
“Hiring similar people from similar backgrounds is a surefire way
to stunt innovation.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
<div class="team__box">
<div class="front" id="front">
<img
src="/assets/avatar-griffin.jpg"
alt="headshot"
class="front__img"
/>
<h3 class="front__name">Griffin Wise</h3>
<p class="front__info">Lead Marketing</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Griffin Wise</h3>
<p class="back__quote">
“Unique perspectives shape unique products, which is what you need
to survive these days.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"
><img
src="/assets/icon-twitter.svg"
alt="twitter"
class="back__social-img"
/></a>
<a href="#" class="back__social-link"
><img
src="/assets/icon-linkedin.svg"
alt="linkedin"
class="back__social-img"
/></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img
src="/assets/icon-cross.svg"
alt="close button"
class="btn__img"
id="img"
/>
</button>
</div>
Javascript below. It is almost all working, except when I click directly on the "#img" element. I would assume
const btn = document.getElementsByClassName("team__btn");
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function (e) {
console.log(e.target);
let front = e.target.closest("div").firstElementChild;
let back = e.target.closest("div").children[1];
if (e.target !== "img") {
img = e.target.firstElementChild;
} else {
img = e.target;
}
front.classList.toggle("hide");
back.classList.toggle("hide");
if (front.classList.contains("hide")) {
img.src = "./assets/icon-close.svg";
} else {
img.src = "./assets/icon-cross.svg";
}
});
}
Assuming I am clicking directly on the '#img" element, I tried to assign that targetted element to img variable through an if/else statement. Using that, I would expect to be able to reassign the src property of the img variable, depending on whether the front or backside of the card is hidden.
However, when I click directly on the img element I receive the following error:
"Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLButtonElement."
What gives?
Replace your line e.target !== "img" to e.target.nodeName !== "IMG".
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function (e) {
console.log(e.target);
let front = e.target.closest("div").firstElementChild;
let back = e.target.closest("div").children[1];
let img;
if (e.target.nodeName !== "IMG") {
img = e.target.firstElementChild;
} else {
img = e.target;
}
console.log();
front.classList.toggle("hide");
back.classList.toggle("hide");
if (front.classList.contains("hide")) {
img.src = "./assets/icon-close.svg";
} else {
img.src = "./assets/icon-cross.svg";
}
});
}
<div class="team__box">
<div class="front" id="front">
<img src="/assets/avatar-drake.jpg" alt="headshot" class="front__img" />
<h3 class="front__name">Drake Heaton</h3>
<p class="front__info">Business Development Lead</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Drake Heaton</h3>
<p class="back__quote">
“Hiring similar people from similar backgrounds is a surefire way
to stunt innovation.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter"
class="back__social-img" /></a>
<a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin"
class="back__social-img" /></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" />
</button>
</div>
<div class="team__box">
<div class="front" id="front">
<img src="/assets/avatar-griffin.jpg" alt="headshot" class="front__img" />
<h3 class="front__name">Griffin Wise</h3>
<p class="front__info">Lead Marketing</p>
</div>
<div class="back hide" id="back">
<h3 class="back__name">Griffin Wise</h3>
<p class="back__quote">
“Unique perspectives shape unique products, which is what you need
to survive these days.”
</p>
<div class="back__social">
<a href="#" class="back__social-link"><img src="/assets/icon-twitter.svg" alt="twitter"
class="back__social-img" /></a>
<a href="#" class="back__social-link"><img src="/assets/icon-linkedin.svg" alt="linkedin"
class="back__social-img" /></a>
</div>
</div>
<button class="team__btn front__btn" id="btn">
<img src="/assets/icon-cross.svg" alt="close button" class="btn__img" id="img" />
</button>
</div>
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>
Actually I want to get the attribute value from the closest element. I am unable to get attribute value from my desired element. This is what I have done so far.
I have searched a lot and hardly came up with anything useful. Any help would be greatly appreciated.
<div class="col-sm-4">
<div class="grid mask">
<figure>
<div>
<h4>Hello There</h4>
<span data-id="1"></span>
</div>
<img class="img-responsive" src="../dist/img/team/subhan.png" alt="">
<figcaption>
<a data-toggle="modal" href="#myModal" onclick="alert($(this).closest('span').attr('data-id').html())">Find</a>
</figcaption>
</figure>
</div>
</div>
Use more specific DOM traversal functions. Also, you shouldn't use .html(); .attr() returns the value of the attribute as a string, not an element that you need to extract the contents of.
$("a").click(function() {
alert($(this).closest('figure').find('span[data-id]').data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<div class="grid mask">
<figure>
<div>
<h4>Hello There</h4>
<span data-id="1"></span>
</div>
<img class="img-responsive" src="../dist/img/team/subhan.png" alt="">
<figcaption>
<a data-toggle="modal" href="#myModal">Find</a>
</figcaption>
</figure>
</div>
</div>
The HTML structure looks like this:
<div id="gallery" class="container">
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image1.jpg">
<img class="thumb" src="images/thumbnails/image1.jpg" title="Image 1" />
</a>
</div>
</div>
</div>
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image2.jpg">
<img class="thumb" src="images/thumbnails/image2.jpg" title="Image 2" />
</a>
</div>
</div>
</div>
...
</div>
With the code above, when I click the thumbnail, it opens lightbox image (fancybox), but can't get the "next" and "prev" buttons in the lightbox to get the image from next div. It shows only the image from one div.
How can I make fancybox "prev" and "next" works with HTML structure like this?
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?