I have a site that I took over that includes Blue imp galleries but they have stopped working - when you click on the thumbnail link the screen just becomes black without any images and you need to refresh to view the page again.
Here is a link to the page that contains the galleries: https://www.secrethillswalking.co.uk/holiday/746/1240/a-yorkshire-treat---hebden-bridge.htm
What code do I need to remove/add to get both the galleries showing the larger images properly again?
I have tried just replacing jquery.blueimp-gallery.min.js with the new version but this did not work.
Thanks in advance!
I took a look at your page's source code and I think you're missing the javascript to bring blueimp into play for the PHOTO GALLERY section. This is what I use:
document.getElementById('links').onclick = function (event) {
event = event || window.event
var target = event.target || event.srcElement
var link = target.src ? target.parentNode : target
var options = { index: link, event: event }
var links = this.getElementsByTagName('a')
blueimp.Gallery(links, options)
}
where 'links' is the id of your gallery div.
I am updating a user profile picture and am able to see the image changing in the database. I am storing the location of the image in profile picture. I am able to see the change happen when reloading the app and am able to see the image in firebase storage change instantly.
Here is the structure:
Here is the function I am using to change the image:
export const changeUserAvatar = (userId, imageUrl) => {
firebaseService
.database()
.ref('users/' + userId)
.update({
profilePicture: imageUrl
});
};
And here is how I am rendering the image:
<Avatar size="xlarge" rounded source={{ uri: this.props.profilePicture }} onPress={this.openPicker}/> :
I am using redux to manage the state and would think it would automatically re-render with an updating value of profile picture. I have tried everything in here:
https://github.com/facebook/react-native/issues/9195
https://github.com/facebook/react-native/issues/12606
And when I try to add something like this I don't get an image at all and it shows up as a blank screen:
{{uri: profilePicture + '?' + new Date()}}
I am facing the same issue for when I navigate back to my messages list/ the picture only changes when I do a hard reload on the app.
I finally got solution of this issue:
componentDidUpdate(prevProps) {
if (this.props.photoUrl && prevProps.photoUrl !== this.props.photoUrl) {
this.setState({ profilePicture: this.props.photoUrl })
}
}
Basically, I just decided to store the new picture as a state instead.
I have an issue with image loading in IE 11. I am displaying coupons (in RABAT theme) in a page. But some of the thumbnails are not uploading. If I just refresh page all thumbnail images displayed without any issue.
My IE version is 11.0.9600.17959 .
The main issue is that some of images are not loading first time (a red cross image appears instead) and on refresh image just appears.
If I long click on an image and click show Pictures, it shows image.
Can anyone please help me with this issue?
Thanks
Abhishek
I have found a solution to this problem by reloading broken images if not loaded properly in first attempt.
Here is the git repository location and JS site link where this code is located:
https://github.com/desandro/imagesloaded
http://imagesloaded.desandro.com/
Add this js code in your page :
var imgLoading = ImagesLoaded(document); imgLoading.done(function () { console.log('All images loaded successfully'); console.log('Images: ', this.images); }); imgLoading.fail(function () { console.error('One or more images have failed to load'); console.log('Proper images: ', this.proper); console.log('Broken images: ', this.broken); }); imgLoading.always(function () { if (this.isDone) { console.log('All images loaded successfully'); } if (this.isFailed) { console.error('One or more images have failed to load'); } console.log('Proper images: ', this.proper); console.log('Broken images: ', this.broken); } ); imgLoading.progress(function (img, isBroken) { console.log('This image has finished with loading:', img); console.log('The image is ' + (isBroken ? 'broken' : 'properly loaded')); if (isBroken){ img.src = img.src+"?time=" + new Date(); } // Current state of loading console.log('Pending images:', this.pending); console.log('Loaded images:', this.loaded); console.log('Proper: ', this.proper); console.log('Broken: ', this.broken); } );
Main method is imgLoading.progress(function (img, isBroken).
A simple logic is added to this method to reload image if broken, by added a time stamp to it, just to force reload image so that browser thinks of it as a new URL and goes to server to load it instead of from Cache. Like this:
if (isBroken){ img.src = img.src+"?time=" + new Date(); }
And that is it. Now image will be reloaded at least once if broken.
I am developing a relatively simple Wordpress plugin for a client. It is used to upload/select images which are then saved (as image path) in the option variables and used as full-background images for the website's different categories/pages/etc..
Since images are of "wallpapery nature" (i.e. big) I added a custom image size with a maximum width of 1920 pixels (height is set to "auto", i.e. no image cropping). And that part also works, upon upload, images are being resized to my custom 1920 px width.
Now, the thing is, for uploading/choosing the background image I'm using the new media uploader and it works except that the chosen image (path) is always for the original uploaded image, for example "my-background-image.jpg".
My question is: is there a way to enable users (or make the uploader do it automatically) to select the 1920 px sized version of the original image, for example "my-background-image-1920x1080.jpg"?
Thanks!
I managed to sort out my problem, a bit differently than I first approached it - but it is a solution I'm even more pleased.
So, when you use the new media uploader, you have a jquery code that looks something like this:
jQuery(document).ready(function($){
var custom_uploader;
$('.upload_image_button').unbind('click').click(function(e) {
e.preventDefault();
formfieldID=jQuery(this).prev().attr("id");
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('.' + formfieldID).val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
Now, note the part of the code that gets the selected file's url:
$('.' + formfieldID).val(attachment.url);
This gets the ORIGINAL attachment's (image) url. So, to get some other image size, like thumbnail, large, etc. you use this:
$('.' + formfieldID).val(attachment.sizes.thumbnail.url);
AND in the end, you can even use your own custom image size like this:
$('.' + formfieldID).val(attachment.sizes.mysize.url);
BUT... I ran into one stupid but very time-consuming problem: DO NOT give your custom image size a name that is separated by a minus sign, like "background-image"; because while Wordpress part of it will work (the new image size will be visible and usable) the jquery for media uploader won't work with it.
If you need a separator, use underscore instead, e.g. "background_image" and it will work normally! This could be a beginner's error on my part, but I thought it could save someone some time! :)
Is it possible to reload an image with an identical file name from a server using jQuery?
For example, I have an image on a page, however, the physical image can change based on user actions. Note, this does not mean the file name changes, but the actual file itself.
ie:
User views image on default page
User uploads new image
Default image on page does not change(I assume this is due to the file name being identical, the browser uses the cached version)
Regardless of how often the code below is called, the same issue persists.
$("#myimg").attr("src", "/myimg.jpg");
In the jQuery documentation, the "load" function would be perfect if it had a default method of firing the event as opposed to binding a callback function to a successful/complete load of an element.
Any assistance is greatly appreciated.
It sounds like it's your browser caching the image (which I now notice you wrote in your question). You can force the browser to reload the image by passing an extra variable like so:
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
It's probably not the best way, but I've solved this problem in the past by simply appending a timestamp to the image URL using JavaScript:
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());
Next time it loads, the timestamp is set to the current time and the URL is different, so the browser does a GET for the image instead of using the cached version.
This could be one of the two problems you mention yourself.
The server is caching the image
The jQuery does not fire or at least doesn't update the attribute
To be honest, I think it's number two. Would be a lot easier if we could see some more jQuery. But for a start, try remove the attribute first, and then set it again. Just to see if that helps:
$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");
Even if this works, post some code since this is not optimal, imo :-)
with one line with no worries about hardcoding the image src into the javascript (thanks to jeerose for the ideas:
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
To bypass caching and avoid adding infinite timestamps to the image url, strip the previous timestamp before adding a new one, this is how I've done it.
//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);
function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
//get the src attribute
source = jQuery(".xyro_refresh").attr("src");
//remove previously added timestamps
source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
//prep new src attribute by adding a timestamp
new_source = source + "?timestamp=" + new Date().getTime();
//alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
//set the new src attribute
jQuery(".xyro_refresh").attr("src", new_source);
}
This works great! however if you reload the src multiple times, the timestamp gets concatenated to the url too. I've modified the accepted answer to deal with that.
$('#image_reload_button').on('click', function () {
var img = $('#your_image_selector');
var src = img.attr('src');
var i = src.indexOf('?dummy=');
src = i != -1 ? src.substring(0, i) : src;
var d = new Date();
img.attr('src', src + '?dummy=' + d.getTime());
});
Have you tried resetting the image containers html. Of course if it's the browser that is caching then this wouldn't help.
function imageUploadComplete () {
$("#image_container").html("<img src='" + newImageUrl + "'>");
}
Some times actually solution like -
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
also not refresh src properly, try out this, it worked for me ->
$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
Using "#" as a delimiter might be useful
My images are kept in a "hidden" folder above "www" so that only logged users are allowed access to them. For this reason I cannot use the ordinary <img src=/somefolder/1023.jpg> but I send requests to the server like <img src=?1023> and it responds by sending back the image kept under name '1023'.
The application is used for image cropping, so after an ajax request to crop the image, it is changed as content on the server but keeps its original name. In order to see the result of the cropping, after the ajax request has been completed, the first image is removed from the DOM and a new image is inserted with the same name <img src=?1023>.
To avoid cashing I add to the request the "time" tag prepended with "#" so it becomes like <img src=?1023#1467294764124>. The server automatically filters out the hash part of the request and responds correctly by sending back my image kept as '1023'. Thus I always get the last version of the image without much server-side decoding.
Based on #kasper Taeymans' answer.
If u simply need reload image (not replace it's src with smth new), try:
$(function() {
var img = $('#img');
var refreshImg = function(img) {
// the core of answer is 2 lines below
var dummy = '?dummy=';
img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());
// remove call on production
updateImgVisualizer();
};
// for display current img url in input
// for sandbox only!
var updateImgVisualizer = function() {
$('#img-url').val(img.attr('src'));
};
// bind img reload on btn click
$('.img-reloader').click(function() {
refreshImg(img);
});
// remove call on production
updateImgVisualizer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">
<p>
<label>
Current url of img:
<input id="img-url" type="text" readonly style="width:500px">
</label>
</p>
<p>
<button class="img-reloader">Refresh</button>
</p>
I may have to reload the image source several times. I found a solution with Lodash that works well for me:
$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());
An existing timestamp will be truncated and replaced with a new one.
If you need a refresh of the exact URL and your browser has the image cached, you can use AJAX and a request header to force your browser to download a new copy (even if it isn't stale yet). Here's how you'd do that:
var img = $("#myimg");
var url = img.attr("src");
$.ajax({
url: url,
headers: { "Cache-Control": "no-cache" }
}).done(function(){
// Refresh is complete, assign the image again
img.attr("src", url);
});
Nothing else worked for me because while appending a token to the query string would download the new image, it didn't invalidate the image in the cache at the old URL so future requests would continue to show the old image. The old URL is the only one sent to the browser, and the server was directing the client to cache the image for longer than it should.
If this still doesn't refresh the image for you, see if this answer helps. For more information, here is documentation on the Cache-Control request header.
In the html:
foreach (var item in images) {
<Img src="#Url.Content(item.ImageUrl+"?"+DateTime.Now)" >
}
I simply do this in html:
<script>
$(document).load(function () {
d = new Date();
$('#<%= imgpreview.ClientID %>').attr('src','');
});
</script>
And reload the image in code behind like this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
image.Src = "/image.jpg"; //url caming from database
}
}