my img has 3 attribute but if has one attribute (data-web-src,data-tablet-src,data-mobil-src) than set my src than one of them attribute is that possible ?
please click to see on codepen
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth >= 768 && winWidth < 960) {
return elData['webSrc']
} else if (winWidth < 768 && winWidth >= 480) {
return elData['tabletSrc']
} else if (winWidth < 480) {
return elData['mobilSrc']
} else if (winWidth > 960) {
return elData['webSrc']
}
})
}
$(document).ready(function() {
noLazyImages("body img");
})
img {
width: 300px;
}
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I think the following code will do what you want.
I removed the data-tablet-src from the img tag which is there in the question snippet so that you can run both and compare the results.
Logic
if(elData['tabletSrc']) will be false if elData['tabletSrc'] is not present. So it will return return elData['webSrc'] instead.
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth < 768 && winWidth >= 480) {
if(elData['tabletSrc']){
return elData['tabletSrc'];
}
} else if (winWidth < 480) {
if(elData['mobilSrc']){
return elData['mobilSrc'];
}
}
return elData['webSrc'];
});
}
$(document).ready(function() {
noLazyImages("body img");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg"
/>
Your script work fine you just need to add listener to window resize event:
$(document).ready(function() {
noLazyImages("body img"); // on Document ready
$( window ).resize(function() {
noLazyImages("body img"); // on window Resize
});
})
Related
I have three CSS #media queries and I need to run some JavaScript to measure the height of a div and move a second div on some screen sizes. The issue is that all of my queries are applying, obviously because they all return true. How can I adjust this so that only one of the conditionals fire in jQuery, similarly to CSS?
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function () {
console.log($(window).width());
if ($(window).width() <= 1024) {
console.log ('tab land');
}
if ($(window).width() <= 980) {
console.log ('tab port');
}
if ($(window).width() <= 479) {
console.log ('phone port');
}
});
});
Use else if and check from mobile upwards:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 479) {
console.log('phone port');
} else if ($(window).width() <= 980) {
console.log('tab port');
} else if ($(window).width() <= 1024) {
console.log('tab land');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You could adjust your conditions:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 1024 && $(window).width() > 980) {
console.log('tab land');
}
if ($(window).width() <= 980 && $(window).width() > 479) {
console.log('tab port');
}
if ($(window).width() <= 479) {
console.log('phone port');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
my image has data-web-src, data-tablet-src and data-mobil-src if my img tag has .lazy_res class instead of .lazyload then set value of data-web-src to src on web, but if screen (or device) is tablet than set data-tablet-src value's to src I want to do this for all images on my web page but I can’t find a solution here you are my code
$(document).ready(function() {
function noLazyImages(e) {
var getWebSrc = $(e).attr("data-web-src");
var getTabletSrc = $(e).attr("data-tablet-src");
var getMobilSrc = $(e).attr("data-mobil-src");
if ($(".box img").hasClass("lazy_res")) {
if ($(window).width() > 960) {
$(e).attr("src", getWebSrc);
} else if ($(window).width() < 768) {
$(e).attr("src", getTabletSrc);
}else if ($(window).width() < 480) {
$(e).attr("src", getMobilSrc);
}
} else {
// do nothing..
}
}
noLazyImages(".box img");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<img class="lazy_res" data-web-src="http://image.prntscr.com/image/bdf1d94b64104ef2acd2ceee19882cd1.jpg" data-mobil-src="http://image.prntscr.com/image/caa51ab4900448589201207e57b2630f.jpg" data-tablet-src="http://image.prntscr.com/image/4b2862a292b543139daa7805a58c17fd.jpg"/>
</div>
you need to loop over all of them and get and set instance specific values
Can do it using attr(function)
function noLazyImages(e) {
$(e + '.lazy_res').attr('src', function(_, oldSrc) {
var elData = $(this).data(),
winWidth = $(window).width();
if (winWidth > 960) {
return elData['webSrc']
} else if (winWidth < 768 && winWidth >=480) {
return elData['tabletSrc']
} else if (winWidth < 480) {
return elData['mobilSrc']
}
})
}
DEMO
I am trying to change the file path for an image depending on the width of the screen. I have gotten it to work so far as the file path does change but it ONLY affects the first element in the sense that it changes ALL file paths to the same one.
When I view my code in the browser both image 1 and image 2 are replaced with src="Images/image.jpg". Could someone help me in identifying what I need to do/change in order for it to affect EVERY element with the class name "swap-image" uniquely?
As in, change
src="Images/image.jpg"
src="Images/image1.jpg"
to
src="Images/tablet/image.jpg"
src="Images/tablet/image1.jpg"
Thank you in advance.
<body>
<img class="swap-image" src="Images/image.jpg" />
<img class="swap-image" src="Images/image1.jpg" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function () {
var swapImageClass = document.getElementsByClassName("swap-image");
var i;
for (i = 0; i < swapImageClass.length; i++) {
var src = $(swapImageClass).attr('src'); // "Images/image.jpg"
var tarr = src.split('/'); // ["static","Images","banner","image.jpg"]
var file = tarr[tarr.length - 1]; // "image.jpg"
var data = file.split('.')[0]; // "image"
$(window).on('load resize', function () {
$(swapImageClass).each(function () {
if ($(window).width() > 1025) {
$(swapImageClass).attr('src', 'Images/' + file);
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(swapImageClass).attr('src', 'Images/tablet/' + file);
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(swapImageClass).attr('src', 'Images/mobile/' + file);
}
});
});
};
});
</script>
</body>
We base the filename on the current element in the loop and bind an eventlistener to it.
$(document).ready(function() {
var swapImageClass = $('.swap-image');
swapImageClass.each(function(index) {
var filename = $(this).attr('src').split('/').pop(),
img = $(this);
$(window).on('load resize', function() {
var w = $(window).width();
if (w > 1025) {
img.attr('src', 'Images/' + filename);
} else if (w > 481 && w < 1024) {
img.attr('src', 'Images/tablet/' + filename);
} else if (w > 0 && w < 480) {
img.attr('src', 'Images/mobile/' + filename);
}
});
});
});
When you are using jquery I think you can simply use class name and each() loop.
$(window).on('load resize', function () {
$(".swap-image").each(function () {
var src = $(this).attr('src'); // "Images/image.jpg"
var tarr = src.split('/'); // ["static","Images","banner","image.jpg"]
var file = tarr[tarr.length - 1]; // "image.jpg"
if ($(window).width() > 1025) {
$(this).attr('src', 'Images/' + file);
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(this).attr('src', 'Images/tablet/' + file);
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(this).attr('src', 'Images/mobile/' + file);
}
});
});
check this function here https://jsfiddle.net/7619099p/
Just modifying your code here, was this the expected?
$(document).ready(function(e) {
//Here we are saving the file name as a data attribute to each images
$(".swap-image").each(function(index, element) {
var tarr = $(element).attr("src").split('/');
var file = tarr[tarr.length - 1];
$(element).data("filename",file);
});
$(window).on('load resize', function () {
$(".swap-image").each(function () {
// and here we are using the saved data attribute(filename) for new path [$(this).data("filename")] on resize.This will give you individual new paths based on screen resolution.
if ($(window).width() > 1025) {
$(swapImageClass).attr('src', 'Images/' + $(this).data("filename"));
}
else if ($(window).width() > 481 && $(window).width() < 1024) {
$(swapImageClass).attr('src', 'Images/tablet/' + $(this).data("filename"));
}
else if ($(window).width() > 0 && $(window).width() < 480) {
$(swapImageClass).attr('src', 'Images/mobile/' + $(this).data("filename"));
}
});
});
});
How can I resize image with jQuery scrolling only when the screen size is greater than or equal to 992px?
I've tried the following code, but it didn't work.
jQuery(function () {
/*Logo Resize*/
jQuery(window).resize(function () {
if (jQuery(this).width() < 992) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).width() >= 992) {
/*Logo Scroll*/
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() >= 250) {
jQuery('#logo-img img').attr('src', 'imgs/min_logo.png');
}
if (jQuery(this).scrollTop() < 250) {
jQuery('#logo-img img').attr('src', 'imgs/logo.png');
}
});
}
});
});
I have the following piece of jQuery that checks the width of the browser on load, and runs accordingly. But to make sure the div keeps the right size when the browser-width is changed, I have placed the same piece of code in $(window).resize(function() {..});.
This seems very weird and unnecessary, so I'm wondering how I can place the code only once and have it run on both .resize and on load.
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
});
You can trigger the event after binding the event:
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}).resize();//resize to trigger on load
Working Demo
Just store the function in a variable and execute it everytime you want to:
$(window).load(function() {
wFunc();
});
$(window).resize(function() {
wFunc();
});
var wFunc = function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
}