I'm trying to get the height and width of the images in the bx slider slides, the problem is that each of them (without the loaded first one) returns zero.
Here is a sample of my code:
$('.slides > li > img').each(function(){
var $this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
})
I also tried putting them in a on load function like this:
$('.slides > li > img').each(function(){
$this.on('load', function(){
var $this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
}
})
... but it's still not working =\
Any help will be greatly appreciated!
Edit:
Here's a fiddle: http://jsfiddle.net/a3BUA/1/
Edit 2:
I now see that when the mode is set to fade - the rest of the <li> elements are set to display:none. Is there a way to get the image dimensions despite of this?
The slider hides all but the first image, and hidden images have no dimensions so you have to use the source (literally) to create a new image object, and then get the dimensions from that once the image has loaded
$(document).ready(function () {
$('.normal-slides').bxSlider({
mode: 'fade',
auto: false,
pager: false
});
$('.normal-slides img').each(function () {
var img = this;
var new_img = new Image();
new_img.onload = function() {
console.log('imgWidth = ' + this.width)
console.log('imgHeight = ' + this.height)
}
new_img.src = img.src;
});
});
Try with something like that
$('.slider img').each(function(){
$this = $(this);
var imgWidth = $this.width();
var imgHeight = $this.height();
console.log(imgWidth);
console.log(imgHeight);
});
Fiddle
Related
I am currently working on a webpage where an array of draggable images appear in random positions over time. I would like to prevent the newly created divs from overlapping as well as create a limit to how many new divs appear.
Below is the current code That I have;
var Images = ['https://material.io/icons/static/images/icons-180x180.png', 'https://iconscout.com/ms-icon-310x310.png', 'https://maxcdn.icons8.com/Share/icon/Food//cherry1600.png', 'https://lh3.googleusercontent.com/Ax2wQYxjDITuZEpc6K9EDYPG7C839tb4PApia4Tmf18u8XehB-twqhVgDVPgxxExkr4=w300',
'https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-256.png',
'http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico'],
screenWidth,
screenHeight;
$(document).ready(function() {
screenWidth = $(window).width();
screenHeight = $(window).height();
$(window).on('resize', function(){
screenWidth = $(window).width();
screenHeight = $(window).height();
})
setInterval(function () {
var x = Math.random() * screenWidth,
y = Math.random() * screenHeight;
addDiv(x, y);
}, 2000);
});
function addDiv(x,y) {
var randImageIndex = Math.floor( (Math.random() * (Images.length - 1) ) );
var Image = Images[randImageIndex];
var newDiv = $('<div class="object"><img src=' + Image + ' height="100" width="100"></div>').css({top:x,left:y});
$('body').append(newDiv);
newDiv.draggable();
newDiv.on('click', function() {
$(this).remove();
})
}
Any suggestions would be greatly appreciated!
I'm trying to get it so that when you click on the carousel, the page will adjust to have the carousel in the center. This website (http://studionewwork.com/) shows this when you click on their carousel. I'm still learning about Jquery so I'm not yet adept at commands yet.
http://jsfiddle.net/8bJUc/614/
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
});
$('.owl-demo').on('click', function(e) {
var el = $( e.target.getAttribute('href') );
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});
Hey I updated your fiddle to make it work: http://jsfiddle.net/8bJUc/649/
Basically you are using $(".owl-demo") as if it's a class, but it's an ID. Then the onClick function tries to get the clicked element but fails doing so.
var el = $( e.target.getAttribute('href') );
This line basically says:
Get the href-attribute from the clicked element and use jQuery to locate any elements matching the href attribute. I removed this since you don't specify the href attribute anywhere.
$('.owl-carousel').on('click', function(e) {
var el = $(".lazyOwl", this);
var elOffset = el.offset().top;
var elHeight = el.height();
var windowHeight = $(window).height();
var offset;
if (elHeight < windowHeight) {
offset = elOffset - ((windowHeight / 2) - (elHeight / 2));
}
else {
offset = elOffset;
}
var speed = 700;
$('html, body').animate({scrollTop:offset}, speed);
});
Please note that the example carousel you posted doesn't work as expected on my Macbook Air 11''. The carousel jumps around whenever I click on it.
I created a lightbox for a photo gallery using jquery. However, for mobile and smaller viewports I'd like to disable the Jquery script. I've tried a few different methods but none resulted in success.
Here is what I have so far:
var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
$(".row a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
$overlay.click(function(){
$overlay.hide();
});
It seems like it should be super simple, but I'm at a loss. If anyone can point me in the right direction I would really appreciate it. Thanks~
you can set WIDTH to any number you want.
var $overlay = $('<div id="overlay"><div>');
var $image = $("<img>");
var $caption = $("<p></p>");
$overlay.append($image);
$overlay.append($caption);
$("body").append($overlay);
WIDTH = 480;
$(".row a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
if($(window).width() > WIDTH) $overlay.show();
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
$overlay.click(function(){
$overlay.hide();
});
you can disable the click on the images for devices
var window_width = $(window).width();
if (window_width <= 960) {
$('a > img').click(function(e) {
return false;
});
}
I have multiple sections showing different backgrounds, each section has a basic parallax background image. As the backgrounds vary in height, I cannot seem to work out how to stop the background image position once the image bottom is reached.
Background position change begins if the section offset().top is equal to or greater than $(window).scrollTop().
It would seem that the btmOffset is incorrect but I can't see why.
Any help greatly appreciated.
Live example
http://demo.dwweb.co.uk
What I have so far
$window = $(window);
var winWid = $window.width();
$('.portfolioSection').each(function(){
var $bgobj = $(this);
var speed = 2.4;
var bg = $(this).css('background-image').replace('url("','').replace('")','');
var tmpImg = new Image();
tmpImg.src = bg;
var orgW = tmpImg.width;
var orgH = tmpImg.height;
var imgResizedRatio = winWid/orgW;
var resizedH = orgH * imgResizedRatio;
var btmOffset = (resizedH - $(this).height()) + $bgobj.offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > $bgobj.offset().top && $(window).scrollTop() < btmOffset){
var yPos = -(($window.scrollTop()-$bgobj.offset().top) / speed);
var coords = '0 '+ yPos + 'px';
$bgobj.css({ backgroundPosition: coords });
} else if($(window).scrollTop() < $bgobj.offset().top) {
$bgobj.css({ backgroundPosition: '0 0' });
} else {
$bgobj.css({ backgroundPosition: '0 '+resizedH+'px' });
}
});
});
orgH and orgW will be 0 on execution, since you are creating a new Image asynchronously, while executing your code synchronously:
var tmpImg = new Image();
tmpImg.src = bg;
//...
This means, you would have to use the onload event (and maybe cover the onerror event too), like this:
tmpImg.onload = function(ev) {
var orgW = tmpImg.width;
var orgH = tmpImg.height;
//and the rest of your code...
}
This is very inefficient, since you are loading all these (big) images again.
I would add data-attributes to each .portfolioSection, like data-bgmaxscroll="1000" (which is the height of the image).
This would be a bit more hardcoded, but i think it's the easiest and the most performant way.
I have this in the footer, so when all content loads. The alert gives the correct result but when I apply that same var to the height of the #'container doens't work.
$(document).ready(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
alert(total);
$(".detta .box").animate({top: newDistance});
$("#container").height(total);
});
container doens't have any set height in the css.
What am I doing wrong?
Instead this :
$("#container").height(total);
try this :
$("#container").css("height",total);
Good- Luck !
$(function() {
var original_height = $("#container").height();
var newDistance = $(".detta .content").outerHeight(true);
var total = original_height + newDistance;
$(".detta .box").animate({top: newDistance}, function(){
$("#container").height(total);
});
});
bingo! the new container height had to be triggered, so i just apply it after box animation happens