I would like to use JQuery to load 2 images after the page has loaded. I would like to request and load one image at a time. I tried this, but the requests and loads are happening simultaneously. First image should be come from 'src' and second from'data-src' html attributes.
<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />
Can anybody help me on this?
Maybe this work for you
$(document).ready(function(){
$('img[data-src]').each(function( key, value ){
var _this = $(this);
var bigImage = _this.attr('data-src');
_this.after('<img class="preLoadingImage'+key+' hide" src="' + bigImage + '" />');
$('.preLoadingImage'+key).one('load',function(){
_this.addClass('hide');
$(this).removeClass('hide');
});
});
});
.hide{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image4" src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif"
width="100%" data-src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg" />
Without seeing your JS, I believe this is what you want:
var img = $("#image4");
var image1Url = img.attr("src");
var image2Url = img.attr("data-src");
$.get(image1Url)
.done(function () {
$.get(image2Url);
});
I'm not sure you want this but take a look
JS:
setTimeout(function(){
$("#image4").after("<img src='" + $("#image4").attr("data-src") + "' width='100%' />");
},2000);
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="image4" src="image/large.jpg" width="100%" data-src="image/full-size.jpg" />
Related
I have a code that crops images before uploading them. However, the code doesn't show the cropped image as it used to unless I replace the JQuery link of jquery-3.5.1.min.js with jquery-3.4.1.slim.js.
which I have no idea why suddenly now. And unfortunately, I can't replace jquery 3.5.1 min cause I wrote a lot of code based on that all over the site.
Is there any way we can modify the code so that it can work on 3.5.1 min like it used to?
JS Fiddle: Please note that this fiddle has jquery-3.4.1.slim.js in it. so it will work.
Code goes as:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css'>
<input type="file" form="feed-post" accept="image/x-png,image/gif,image/jpeg" id="image" onchange="previewFile()" name="image" class="file_image"/>
<input type="hidden" form="feed-post" name="image_cropped" id="image_cropped" />
<div class="img-container" id="some">
<img id="image_cropped_preview" />
</div>
<a class="salvar post-btn" id="image_crop_btn" type="button" data-ripple="" style="text-align:center;display:none;">Crop the Image</a>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.js'></script>
<script>
var recorte = $('.img-container > img');
recorte.cropper({
movable: false,
zoomable: false,
rotatable: false,
scalable: false
});
function previewFile() {
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
$("#image_crop_btn").css("display", "block");
$("#post-btn").css("display", "none");
$(".attachments-sub").css("display", "none");
reader.onloadend = function() {
$('img').show();
recorte.cropper('replace', reader.result);
console.log("test");
}
if (file) {
console.log("test2");
reader.readAsDataURL(file);
console.log("test3");
} else {
console.log("test4");
recorte.cropper('replace', '');
console.log("test5");
}
}
$('.salvar').click(function() {
temp = recorte.cropper('getCroppedCanvas').toDataURL();
//window.location.href = recorte.cropper('getCroppedCanvas').toDataURL();
$("#some").html('<iframe src="' + temp + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')
//window.document.write('<iframe src="' + temp + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
$("#image_cropped").val(temp);
$("#image_crop_btn").css("display", "none");
});
</script>
Observation: I noticed what exactly is going wrong, as I upload the image, the iframe body needs to be appended with the image blob link, which is not happening. that's the only issue, the dress looks good.
When I add the blob element through inspect, it shows.
Any help is greatly appreciated.
I don't think you will be able to buddy. JQuery 3.5.1 min is the recent version and the one that works for you is a slim version which includes this iframe body append function. If you want to make it work with jquery 3.5.1, you have to add additional function to do the iframe body blob appending.
$('.salvar').click(function() {
temp = recorte.cropper('getCroppedCanvas').toDataURL();
$("#some").html('<img src="' + temp + '" />')
$("#image_cropped").val(temp);
$("#image_crop_btn").css("display", "none");
});
so, ya, instead of printing the image in an iframe which caused the issue with jquery 3.5.1, I simply used the img tag. should have thought about it long time ago
I was looking for a way to change image A to B and B to A by just
clicking them.
So far, this is what I'm using.
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
The script works well for a pair of image.
Now if I have 100 pair of image.
"A <--> B"
"C <--> D"
"E <--> F"
and so on...
Do I have to copy the body HTML and script 100 times and change their ID+URL or there is another more efficient way?
To create hundreds of them... First, use a class.
Then, use a data attribute to store the "alternate" URL.
<img class="pixelbutton" src="images/pixelbutton.png" data-altsrc="images/pixelbutton_press.png"/>
<script type="text/javascript">
$(document).ready(function(){
$(".pixelbutton").click(function(){
// Get the two values
var src = $(this).attr("src");
var altSrc = $(this).data("altsrc");
// Switch them
$(this).attr("src",altSrc).data("altsrc",src);
});
})
</script>
This will work for thousands of .pixelbutton...
;)
EDIT
As per this other .data() documentation, (I wonder why there's two different documentation pages...) the data-* have to be lowercase... Because when trying to get altSrc, it is interpreted as alt-src.
I just learned that... That is quite a strange new standard, from jQuery 3.
So here is your CodePen updated.
You could probably set a naming pattern and use delegation to make an event handler on the images' container.
You could check if the event's target is an image and retrieve its id. Using that id, you could use the pattern you've set to change the images interchangeably.
There are multiple solutions to this, but this is by far the simplest approach:
Wrap your image pairs in a parent <div>
Use .toggleClass() to toggle a class, say .hide, in the images in the element
This solution assumes that you have images in pairs :) see proof-of-concept example:
$(document).ready(function() {
$('img').click(function() {
console.log($(this).siblings());
$(this).add($(this).siblings()).toggleClass('hide');
});
});
/* For layout only */
div {
display: inline-block;
}
/* Used to hide image */
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
<div>
<img src="http://via.placeholder.com/100x100/999999/ffffff" />
<img src="http://via.placeholder.com/100x100/b13131/ffffff" class="hide" />
</div>
Try this one:
jQuery(document).ready(function($) {
var $imgBlock = $('#images');
var html = '';
var imgArr = [
'http://i0.wallpaperscraft.com/image/surface_shape_metal_116716_200x300.jpg',
'http://i0.wallpaperscraft.com/image/universe_space_face_rocket_116714_200x300.jpg',
'http://i0.wallpaperscraft.com/image/letter_surface_wooden_116674_200x300.jpg',
'http://i0.wallpaperscraft.com/image/mountains_lake_reflection_116663_200x300.jpg',
'http://i1.wallpaperscraft.com/image/leaf_drops_surface_116678_200x300.jpg',
'http://i1.wallpaperscraft.com/image/candle_spruce_christmas_decoration_116684_200x300.jpg'
];
$.each(imgArr, function(index, url) {
html += (index % 2 === 0) ? '<div>' : '';
html += '<img src="' + url + '"/>';
html += (index % 2 === 1 || index === imgArr.length - 1) ? '</div>' : '';
});
$imgBlock.append(html);
$imgBlock.on('click', 'img', function(e) {
$(this).parent('div').find('img').removeClass('red');
$(this).addClass('red');
});
});
img {
border: 2px solid #ccc;
}
.red {
border: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images"></div>
How to make change the height of all images inside a div?
I have
$('.images img').each(function() {
$('img').attr('height', element.parent().attr('imgheight'));
});
<div imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
It does not seem to do anything - see https://jsfiddle.net/yu51a5/527gn64n/4/. How to make it work?
I cannot use "height=100%" because normally these images come with captions, so the image should be shorter that the div.
You haven't defined element. Access the node from inside the each function.
$('.images img').each(function(i, node) {
$('img').attr('height', $(node).parent().attr('imgheight'));
});
Working fiddle.
I suggest you to use HTML5 data- attribute with your custom attribute imgheight
<div data-imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
And JS can be as easy as this:
$('.images > img').css('height', $('.images').data('imgheight'));
Check fiddle
But, if you have multiple .images div, you would do like this
$('.images img').each(function() {
$(this).css('height', $(this).closest('.images').data('imgheight'));
});
or better
$('.images').each(function() {
$(this).find('img').css('height', $(this).data('imgheight'));
});
Change element to $(this) and you're good.
https://jsfiddle.net/wh85afq7/
Change the 2 references within the each function to the images to $(this)...
$('.images img').each(function() {
$(this).css('height', $(this).parent().attr('imgheight'));
});
You can use data-height attribute and get value by element.data("height")
here is the working example below
$( document ).ready(function() {
$('.images img').each(function() {
$(this).attr('height',$('.images').data("height"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-height="300px" class="images">
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>
I'm kind of new to jquery but I'm getting a hang of it. But so far it's been fairly simple jquery.
But I am trying to write a piece of code that is a bit more dynamic
Function: I want the code to hide pictures over different times. Like one picture after 2000 milliseconds, then the next after 4000 milliseconds. But I'm still uncertain on a few things...
This is what I tried:
<div class="twelve columns" style="padding-top: 24px; text-align:center;">
<div>
<img id="1" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="2" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="3" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="4" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
<img id="5" height="10%" width="10%" src="{{ url('/taskAssets/star.png')}}" />
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4mdQgvGrhwU" frameborder="0" allowfullscreen></iframe>
<hr>
<a href="{{ URL::previous()}}">
<button>Go Back</button>
</a>
</div>
</div>
<!-- Row End-->
</div>
</div>
<script>
var starNumber = 5;
var star = function() {
$("#".starNumber).hide("slow");
starNumber = starNumber - 1;
};
setTimeout(star, 2000);
setTimeout(star, 4000);
setTimeout(star, 6000);
setTimeout(star, 8000);
setTimeout(star, 10000);
</script>
I think the source of the issue is here:
var starNumber = 5;
var star = function() {
$("#" .starNumber).hide("slow");
am I able to call $("#" .starNumber)? I tried also $("#" starNumber) but did not work. How would I perform this?
In your selector $("#" .starNumber) you are not passing a valid string (which jQuery may parse in order to create the appropriate jQuery object). If you are trying to select the element with and id of "5" you must pass the string "#5" to $.
Knowing that the desired form is $("#5"), the easiest option in this case is to change the line in question from:
// This is syntactically incorrect as you are passing an "#" and
// the "starNumber" property of... nothing
$("#" .starNumber).hide("slow");
to:
// This is syntactically CORRECT, as you are concatenating an "#"
// with the value contained in the "starNumber" variable
$("#" + starNumber).hide("slow");
First, your selector need to be $('#' + starNumber) because, JS string concatenation done with +.
And if you need a re-usable function, you might use like following:
var starNumber = 0, timer, offset = 2000;
var star = function () {
if ( starNumber == 5 ) {
clearTimeout(timer);
starNumber = 0;
return;
}
setTimeout(function () {
$("#" + starNumber).hide("slow");
star();
}, offset * ++starNumber);
};
star();
I have just one <img> element on my page. I change the src attribute of this image every 7 seconds.
I see the new images every 7 secs, but it would be nicer if I can add some fading or transitions effect when loading new image.
Does some have simple script for this?
I don't need any plugin. Just need some clue or few lines of sample for doing it.
Despite what KaiQing mentioned, you can use the callbacks ability of jQuery to fade in/out the image while you're changing it. This can be done like so: http://www.jsfiddle.net/bradchristie/HsKpq/1/
$('img').fadeOut('slow',function(){
$(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});
You'll want to use two images:
<img id="backImg" />
<img id="frontImg" />
Set #backImg to be behind #frontImg like so:
#backImg
{
position: absolute;
}
Then, in your code that fires every 7 seconds, fadeOut the front image... this will automatically do your crossfade effect because the back image is already loaded behind it. When the fade is done, set the source of the front image to the back image's src, show it, and pre-load the next image into the back image:
function transitionImages(preloadImgUrl)
{
$("#frontImg").fadeOut("slow", function()
{
$("#frontImg").attr("src", $("#backImg").attr("src")).show();
$("#backImg").attr("src", preloadImgUrl);
}
}
This all assumes your images are identically sized. If not, you'll want to be just a little more elaborate with the css and wrap the images in divs that fade out.
You can't do this with just one image.
Check this out:
<div id="main_over"></div>
<div id="main_img"></div>
<div id="himg" style="display:none; clear:both; margin-top:40px;">
<img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" />
<img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" />
<img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" />
<img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" />
</div>
<style>
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('#himg img').each(function(){
if(i == 0)
{
$('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
if(i == 1)
{
$('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
}
i ++;
slide.arr.push($(this).attr('src'));
});
setTimeout(function(){
if(slide.arr.length < 2)
slide.fade(0);
else
slide.fade(2);
}, 3000);
});
var slide = {
arr: Array(),
fade: function(i)
{
$('#main_over').fadeOut("medium");
setTimeout(function(){slide.next(i);}, 1000);
},
next: function(i)
{
$('#main_over').html($('#main_img').html());
$('#main_over').css('display', 'block');
$('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');
i++;
if(i >= slide.arr.length)
i = 0;
setTimeout(function(){slide.fade(i);}, 3000);
}
}
</script>